DIY Blog Makeover - Create Your Button

I've gone through several buttons for my yellow corner:


They usually match the blog design I'm using.

For this tutorial, I'm going to cover the following topics:

1. Creating a Blog Button
2. Resizing Your Blog Button
3. Linking Your Button

CREATING A BLOG BUTTON

Using Picasa, we're going to create a blog button almost exactly the same way we made our header.
Open Picasa, and select the photo [or photos] you'd like to use for your button.
[Since the button is so small you probably only need one picture.]
I'm going to use the same HTML beast sketch that I used for my header.
Click on the picture that you want, click the "create" tab, and select "picture collage":

Straighten the picture and put it in the center of the screen... make sure there's lots of white space surrounding it.
Then click "create collage"

Crop the picture to a square, still being sure to leave room for text
[unless you want your text to go over the image]


Add your text:


Yay, we have a blog button!
We'll spruce it up more in the next step.

RESIZING YOUR BLOG BUTTON

We're going to use Photobucket for this next part.
If you don't have a photobucket account, go ahead and set one up [it's FREE!]

Upload your button into your photobucket.
[I'm not going to go into details about how to load pictures into photobucket, but Libby @ The Bonjour Family has a great tutorial for that - Check it out!]

Once your picture is loaded, click on your picture and then select "edit" up at the top:


Let's add a border really quickly before we resize it, k?
Click the "Decorate" tab select a border:


Then click the "Basic" tab and select "Resize"


You'll have to uncheck the "Keep Proportions" box [because picasa's square crop isn't perfectly square], and then type in 150 for the width and for the height:


Click save, and there's your button:



LINKING YOUR BUTTON

Ok, so some of you already had a button and just want to know how get it on your page.
Piece of cake!

I have two codes to share with you:
The first one is for posting JUST a button.
The second is for posting a button code so that other people can grab your button and paste it on their page.

Here is a button code:

<a href="YOUR BLOG URL" target="_blank"><img src="YOUR PICTURE LOCATION" /></a>

You'll copy and paste this code, but be sure to change two things:
1. Change the "YOUR BLOG URL" to your web address.
2. Change the "YOUR PICTURE LOCATION" to the "direct link" of your button on photo bucket:

Then go to your blogger homepage and click the Design tab.
Click "Add Gadget" on the right side:


A box will pop up.
Click the + beside "HTML/JavaScript"


Then paste your code in the box and hit save:


Your button should appear in your sidebar:


But let's face it. . .
What's the point of just having your button in your sidebar?
They've already made it to your page.
You want your readers to be able to take your button with them and share it.

The code for this is almost the same. . . just twice as long:

<div align="center"> <a href="YOUR BLOG URL" target="_blank"><img src="YOUR PICTURE LOCATION" /></a> </div> <div align="center"> <form><textarea rows="6" cols="20"><a href="YOUR BLOG URL" target="_blank"><img src="YOUR PICTURE LOCATION" /></a>

Yep, replace the same parts the same way
[you'll just have to do each one twice]
and paste it in your HTML/JavaScript box and your blog should look like this:


So here's what we accomplished today:

Tomorrow we'll make some tabs :]

♥

I'm linking to these parties.