Make a Cute Blog Monday! One Super Cute Blog

I know, technically it is Tuesday, I am 18 Minutes late....  I meant to get it done on Monday :p

This is brand new, but I think I am going to steer away from Weeks, for the time being anyway, every Monday (or almost every monday), I am going to make a cute blog, and show you how I did it!

This weeks blog is "One Super Cute Blog" Click Here to see it live.

• Free Blogger Blog
• Free Account on Colour Lovers
• Cute Illustration
• Picnik (no registration or sign up required)
• Free Account on Fonts.com Web Fonts 

How to Get a Cute Non-Web Font for your Blog.

Part 1: Get Set up

EASY DIY Custom Blog Design Part 4: Header

This is a Series of Tutorials, so if you need to start at the beginning, CLICK HERE.

Step #1: Making the Header
I found this really cool website called Picnik it is so easy to use, and the best part is that it is FREE and NO registration required!!  I will show you how I made this header, so that you can make one that is 100% Custom for you!

First, head over to Picnik, and click on Get Started!

EASY DIY Custom Blog Design Part 3: Wide 2 Column Template

This is a Series of Tutorials, so if you need to start at the beginning, CLICK HERE.

In this part of the tutorial, I am going to show you how to make a wide 2 column template with nice white space.  If you want to make a 3 column template instead, I have a tutorial HERE.

This tutorial uses the Minima Template (if you started at the beginning, I already had you do this).

First, you will need to head over to your Edit HTML page and scroll down to #header-wrapper { and change 660px to 1000px (or change it to what ever width you would like, in my example I am doing 1000px).

Next do the same thing on your #outer-wrapper {

Now I need to adjust the #main-wrapper {  I changed my width to 640px.

Then adjust the  #sidebar-wrapper {  I changed mine to 300px.

If you like your sidebar on the right, you can stop here, but if you would like to change it to the left, I will show you how to do that now.

Go to your #main-wrapper {  and change $startSide to $endside, and go to your #sidebar-wrapper {  and change $endSide to $startSide.  Now it should look like this!

Now Save your Template, and you are set!

Move on to EASY DIY Custom Blog Design Part 4: Header

EASY DIY Custom Blog Design Part 2: Background

This is a Series of Tutorials, so if you need to start at the beginning, CLICK HERE.

You can find cute Free Blog Backgrounds all over the Net.

But I am thinking more custom than that, so I am going to show you how to make a Custom Seamless pattern to use for a background at Colourlovers.com   I love this website!  Below is the Pattern that I colored, and that I am going to use for my example.  **If you want to use a digital scrapbook paper instead of making one, I have a tutorial here.

So first, you need to set up a Free account.

EASY DIY Custom Blog Design Part 1: Getting Started

One of the biggest complaints/questions that I get about these tutorials, is that some people don't have Photoshop or they don't want to download any software and try to learn all of it to do a custom blog design.  So... I have been doing some serious searching and experimenting, and I am going to show you how to make a cute and completely CUSTOM Blog Design with NO software that you have to download!!

So the first thing that we need to do to get started is to set up a photobucket account. Go to Photobucket.com and set up the FREE account. Once that is set up, you need to make sure to click on "(more options)" see below, and select "1 megabyte file size"

Back in blogger, the very FIRST thing you need to do is to back up your template, to do that, go to "Edit HTML" and click on "Download Full Template". Take that file and make sure you know where it is so that if you need to go back you can.

We need to change our template to Minima, it is an older template, so you will need to go to your "Edit HTML" page, and click on "Select Layout Template", then you will see it :) When you click on "Save Template", it may or may not ask you if you wish to keep your widgets, if it does, keep them, unless you want to loose everything on your sidebars. 

That is all we need to do to get you started!

Move on to EASY DIY Custom Blog Design Part 2: Background

DIY Custom Blog Design Part 7: Post Divider

This is Part 6 of a series of tutorials, if you need to start at the beginning, click here.

In this portion of the tutorials, I will show you how to make and add a post divider to your blog.  First you need to determine what size you need to make your post divider.  To do that, go to your Edit HTML page and scroll down to your #main-wrapper and you will see your width there.

My width was 540px, so I went ahead and made my post divider 540x75px.  I made the post divider the same way that I did my header in the header tutorial.

To install your post divider, you need to upload it to photobucket and grab your direct link code.  Then head over to your Edit HTML page and find this section:  .post {

First, add these lines:
  background: url(Your Direct Link Code Here);
  background-repeat: no-repeat;
  background-position: bottom left;

Second, delete this line:
  border-bottom:1px dotted $bordercolor;

Third, change your padding-bottom to suit your post divider, I changed mine to 4em, but if you have a taller post divider, go with a larger number.  You may just have to play with it a bit.

Your final code should look something similar to this:

Thats it!!

DIY Custom Blog Design Contest!

If you have or want to create your own Custom Blog Design, enter for my contest!  You have until January 9th at Midnight to enter.  I wanted to give everyone plenty of time to design their blogs from head to toe!  I have plenty of tutorials to get you started, just click on my Tutorials page.  If you don't have Photoshop or any other design software, that is no excuse :)  Just go to Paint.net for FREE software that is similar to Photoshop.  AND I also have new tutorials that show you how to make a custom blog design with NO software at all!!!!

Who can enter?
Anyone that is NOT a professional Blog Designer

What are the Rules?
1.  Your blog must be designed by you!  (You may use digi kits and other digital freebies to put it together)
2.  Have Fun!

How do I enter?
Easy, just add yourself to the linky list on the bottom of this post.  You don't have to be finished with your design to enter, but you HAVE to enter by January 9th at midnight (no judging will take place until January 10th).

Who Wins and what is the Prize?
When the contest ends on January 9th, I will pick 10 finalists.  Then I will have 4 other Custom Blog Designers help me make the final decision.

1st Place wins:  

$100 towards any of my Design Services (Custom Illustration, Design Shoppe, Custom Blog Design, or Advertising)  See my website here.

2nd Place wins:  

$50 towards advertising on any of my sites.  See my Advertising Rates Here.

3rd Place wins:  

3 Months of advertising on Makin Cute' Blogs

Have Fun Designing!  If you get stuck on anything, email me or comment with your question, and I will do my best to help out :)

Oh, and because of this contest, I will be pushing WordPress week out, it will start on December 20th, and I will do DIY Week again next week, so that I can get you more tutorials!

Oh, and Grab one of these :)

<a href="http://makincuteblogs.blogspot.com/"><img border="0" src="http://i454.photobucket.com/albums/qq269/carolynnreynolds/Makin%20Cute%20Blogs/MCB_IDESIGNED.png" /></a>

Making a Post Signature in Adobe Illustrator

I wanted to start this week off with a simple tutorial, so we are making a Custom Signature.  The fun thing about this tutorial, is that I am going to show you how to alter your font and so that your Signature can be even more personalized than just a cute font alone.  I am using Illustrator CS5, but you can use any version that you have (nothing in this tutorial requires CS5).

First I am going to make a new document.  I am sizing mine at 100px high by 175px wide.

DIY Custom Blog Design Part 5: Sidebar Titles

This is Part 5 of a series of tutorials, if you need to start at the beginning, click here.

 In this part of the tutorial, we will make sidebar titles and I will show you how to install them.

You are going to first make the Sidebar title the same way that you did the Header.  If you need to see that Tutorial, CLICK HERE.  The only thing that you need to do differently, is to make the size of your sidebar titles, with the same width as your sidebar. You can find the width in your Edit HTML page here:

DIY Custom Blog Design Part 4: Header

This is Part 4 of a series of tutorials, if you need to start at the beginning, click here. 

In this part of the tutorial, we will make a simple header and I will show you how to install it properly.

I am making my header in Photoshop CS5.  If you don't have Photoshop, you can use Paint.net it is similar to Photoshop, and 100% FREE!

DIY Custom Blog Design Part 3: 3 Column Template

This is Part 3 of a series of tutorials, if you need to start at the beginning, click here.

In this part, I will show you how to make a 3 column template for your Custom Blog Design.

DIY Custom Blog Design Part 2: Background

This is Part 2 of a series of tutorials, if you need to start at the beginning, click here.

I have picked this paper from Amanda's Kit to use for my background:

So what I need to do first is open my paper up and size it down to 72dpi and somewhere between 1200 and 1800px (I totally just grabbed that number, just remember that this is custom, so size it where you want it :)

DIY Custom Blog Design Part 1: Getting Started

I am so excited to do this tutorial, it is something that I have thought about for a long time. I wanted to put together a completely custom blog design and show everyone that is ambitious enough how to do it themselves.

So there are TONS of ways to approach a custom blog design, so I just decided to pick one direction and go with it. I am going to take a digital scrapbooking kit and make a custom blog design from that.

Here is a quick list of places that I found to get free digital scrapbooking kits (NOTE: Make sure to check the owner's Terms of Use, many are NOT for Commercial Use, only Personal):

http://makincuteblogs.blogspot.com/2010/09/freebie-sweet-n-summer-mini-digital.html *This one is MY design :)

http://shabbyprincess.com/downloads.asp

http://mdkscraps.blogspot.com/search/label/Freebie

http://scrapsbythebrush.blogspot.com/search/label/freebies

http://sasluvscrap.blogspot.com/

http://www.digitaldivasdesigns.com/store/index.php?main_page=index&cPath=6

http://www.kevinandamanda.com/whatsnew/category/freebies

http://www.twopeasinabucket.com/shop/kit-price-free/digital-kits/?pp=150

http://www.computerscrapbook.com/free-digital-scrapbooking.html

I chose to go with one of my favorite bloggers' kits, "The Fall Collection" at kevinandamanda.com! Check her out, because she has FREE fonts as well, and they are super cute!

So the first thing that we need to do to get started is to set up a photobucket account. Go to Photobucket.com and set up the FREE account. Once that is set up, you need to make sure to click on "(more options)" see below, and select "1 megabyte file size"

Back in blogger, the very FIRST thing you need to do is to back up your template, to do that, go to "Edit HTML" and click on "Download Full Template". Take that file and make sure you know where it is so that if you need to go back you can.

We need to change our template to Minima, it is an older template, so you will need to go to your "Edit HTML" page, and click on "Select Layout Template", then you will see it :) When you click on "Save Template", it may or may not ask you if you wish to keep your widgets, if it does, keep them, unless you want to loose everything on your sidebars.

Move on to Custom Blog Design Part 2: Background

Flash Header Tutorial (Flash Slides cross fading)

I am really excited about this tutorial, because only 3 months ago, I had never even used flash before and it is not as hard as you may think!

Click Here to Preview this Flash Header

Step 1:  Prepare your Slides

How to Replace the Expandable Post "Read More" (Jump Link) Text with an Image Button

I wanted to kick of DIY Week with this tutorial because I had so many requests for it :)  If you don't know what or how to use expandable posts, click here for my first tutorial on Expandable Posts.

So, lets get right into it....

Check your "Expand Widget Templates"

and find (command F) this line of code:

<b:if cond='data:post.hasJumpLink'>

Now select the above code, all the way down to </b:if>  (shown below, it may vary slightly)

 and replace it with the code below (if you cannot find the code shown above, add the below code after <data:post.body/>)

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><p align='left'><img border="0" src="Your Button URL Here"/></p></a>
</div>
</b:if >

You can change where your button is aligned by replacing "left" with "center" or "right"

And Voila!  You have it!