how to make a custom blog button

I’m sure if you’re deep into the blog world, you know about blog buttons. If not, that’s okay. Because it’s not a difficult concept to understand. I will explain in this handy dandy tutorial!

Blog buttons are used by bloggers so that their followers/viewers can link directly to their webpage with little effort.

For example, here is my blog button.

The scroll bar underneath the picture is the html that is copied and pasted by your viewer onto their blog so that the picture shows up on their blog…which is a kind of advertisement for your blog.

Here are some buttons I have pasted on my wall.

Notice when you post it on your blog, the drop box with the HTML disappears. (Just in case you were wondering.) (Or did I just insult your intelligence?) (Hope not!)

Now onto the part where I explain how to make one of these for yourself that you custom design. It really isn’t too difficult to do. It’s just difficult to find a good explanation of the process. I will try my best to lay this out and make it easy for ya.

This tutorial has been made for use in Blogger. I don’t know much about Wordpress or any other blog sites.

Let’s start at the very beginning. That’s a very good place to start.

1. First, you need to log in (or set up an account) in a picture hosting website like Photobucket, Flickr, etc. So while you do that, I will go grab me a hand full of M&Ms…my pregnancy craving for the past few weeks!

2. Second, you need to design your button. You can use programs like Photoshop, Paint, etc. to construct your button. Buttons are typically 125 X 125 pixels. So when you open a new file in your program, change the width and height to those dimensions. If you’re using Photoshop Elements, you will do this:

So now you have a nice little 125 X 125 square in your editing program. This is where you can get creative and design your little button. There’s not much room for the most commonly used size button but it’s definitely doable. You could also increase your width and height but people are more likely to snag your button if it’s on the smaller side.

3. Now you need to save your button and upload it in your picture hosting website. We are doing this so you can get the direct link to the photo.

4. Grab the link to your picture. You do this by clicking on your photo in your hosting website portfolio. For example, I love to use Photobucket. Once you click on your photo of the blog button  you created, you will see a box with options to “Share this photo”. Click on the box that says “Direct Link” and it automatically copies the link for you. Paste this link somewhere you can access it easily in just a little bit…or remember to recopy the code once it’s time to paste it!

5. Go to the “Design” tab of your blog account.

6. Create a new gadget by clicking “Add a gadget”.

7. Scroll down and select “HTML/Javascript”.

8. Paste the following code in the “HTML/Javascript” gadget:

<center><a href="http://YOUR WEB ADDRESS/" target="_blank" title="BLOG TITLE"><img alt="BLOG TITLE" src="http://IMAGE WEB ADDRESS"/></a> <center>
</center>
<center><textarea id="code-source" rows="3" cols="13" name="code-source"><center><a href="http://YOUR WEB ADDRESS/"><img border="0" src="http://IMAGE WEB ADDRESS"/></a></center></textarea></center>

-Replace only the RED TEXT with your blog’s HTML address.

-Replace only the GREEN TEXT with the title of your blog.

-Replace only the BLUE TEXT with the direct link for your photo image. (Go recopy that code from your photo hosting website and paste it here!)

***Make sure you don’t delete the “ " around each URL.

9. Click save and view your new button!

I do hope this was clear…I made it as clear as I could! Let me know if you have any questions. There are a lot of common mistakes that can be made in the copying and pasting of codes and text. Be sure to double check all your work! And have fun creating your own custom button!

-------------------------------------

I linked this to