Sunday, March 21, 2010

How to create your own blog button

I will take you through the steps I took to create my button. Let me know if you have any questions!

1. Design your button. You need to have some kind of image editing software. I used Photoshop Elements to create mine. I opened a new canvas and sized it to 150x150 pixels. You could also do 125x125 pixels. You just want to size it to fit the average sidebar. I chose a resolution of 300, but a lot of folks use 72. I wanted mine to look like my blog, so I used a section of my header as my picture. (Since I didn't create my header myself, I emailed Karen over at to get her permission to create a button out of her work.) You could also design a button using free clip art you can find on the internet, or you could even design something out of your scrapbooking papers and supplies and just take a picture of it. Then I chose a font and typed my blog name onto my image, put a black border around it, and I was done. Make sure you save your work as a jpeg.

2. Upload your button to an image hosting site. I used, which is free.

3. Open your blog to where you add page elements. Click on "Add a Gadget" and select HTML/JavaScript.

4. Copy this code into the text area:

<img src="http://YOURBUTTONLOCATION.jpg" /> <br /> <textarea style="text-align:center" rows="4" cols="22"><a border="0" href="" target="_blank"><img src=http://YOURBUTTONLOCATION.jpg></a></textarea>

Replace YOURBUTTONLOCATION with the location of your image. If you used Photobucket, they provide you with a direct link to your photo's location. Replace YOURBLOGADDRESS with your blog address:)

Let me know if you have any trouble, I will help any way I can.


Pam said...

Thanks for the tutorial. I've been blogging for only a few months and still have much to learn. But between remodeling projects and life in general, I haven't taken the time to devote to learning about the blogging world like I should.

I have Photoshop Elements on my wish list. Hope to get it soon. Thanks again for the blogging lesson.:-)

- - Sheryl - - said...

thank you - I always wanted a button.
I hope I can do this in Paint... going to give it a try.
Why do you have to have the picture at a free hosting site?
I can't use it from my hard drive files???

Zenita Smith said...

Tanya thank you so much for this. I'm trying to figure this all out but haven't quite got it yet. I might be asking for some help soon. Thanks for doing this for us.

Jana said...

Thanks for the tutorial! I will have to give this a try.

Angela Mclean said...

Yay, I've done it. Thank you SO much!!
You can see my efforts on
Angela xxx.

Anonymous said...

Correctly your article helped me very much in my college assignment. Hats afar to you post, intention look ahead for the duration of more cognate articles promptly as its one of my favourite subject-matter to read.

Zenita Smith said...

Thank you so much I got my button. You are the best!

*BJ* said...

I want to try it.. thanks for the tips. I too want to know what my options are for photo hositng. I do have photobucket but have not used for a long time. I just add my pice to my blog from my computer..

Julie said...


Shanarun said...

This is great! When I get more followers, I will definitely use this info -THANKS!

Blah said...

First time on your site...very nice btw. Thanks for posting touches my heart when people share.