Beautiful Buttons

After I posted my post about my blog button, one of my readers asked me how I had done it. So, in this post, I hope to show you how to make one, and to convince you that it's not really that hard. I mean, if a dingbat like me can do it, so can you.

This post details how to make a blog button with a drop down box containing a code for sharing to other blogs. The sites I used are: Picasa Web albums, Picnik, Morguefiles, and A Heart for Home. I've included links for all the sites where relevant to help you make your blog button easily.

First, find your picture. You can use a photo you've taken, or use one you've found. Remember to check the copyright on it. A good site to use is Morguefile. Their pictures are all free, and you can do anything you like with them.

This was my original picture from Morguefile.

Now go to a photo editing program. Picnik is a great free online photo editing program.

Upload your picture to your editing program. Now you can crop it, add text, frames, and touch up the colours.

This is what I did for Charlotte's blog button

Now you need to resize your button. In Picnik, if you're using it, click on resize in the edit tab. Then type your new size into the resizing boxes. Blog buttons are normally 125 1to 150 pixels square.

Once you've done this, save your picture to your computer. Then go to an online photo storage site such as Flickr or Picasa. If you're a blogger, you've got an account at Picasa. Upload your blog button to the storage site.

Now you need a code for your blog button. I got mine from A Heart for Home. Scroll down the page until you find the html coding. It will have six sections of words in three different colours. Add your blog addres for your home page and your blog name. There should be two coloured sections left. This is for your picture's url.


This is my final version of my own blog button.

Go to wherever you've saved your picture on the web. RIGHT click on the picture of your blog button. A commands box should appear. Click on the command that says "Copy image URL." then past the url into the last spaces.

Now go to your blog. Click on the design tab. Click on "add a gadget". Scroll down until you find the HTML/Java script gadget. Copy and past your completed blog button code into the gadget box. If you want to, add a title. Then click save.

Now position your blog button in your sidebar. Click save. Now go to your blog and admire your blog button.


I had the most trouble with the html coding. Check that you've kept everything but the coloured words, which you should have replaced with your blog address, blog title, and picture url. Check also that you haven't got two forward slashes after your blog address. Otherwise when people click on your button on other blogs, it won't be able to take them to your blog home page.


Another problem I've been asked about a few times is, if the command Copy Image URL doesn't appear when you right click on your picture, how do you get the url? Well, Right click on the picture. Click on the command Properties. Then look through the properties. You can find the url there.
Still having problems? Drop me a comment and I'll do my best to help you.

Happy Blog Button making! And thank you to JT for asking me how to make one. Pleas ecomment and tell me if you use this tutorial. Also, I would appreciate any advice on how to make it even better.