I have noticed how many people like to put buttons on their blog, and I finally worked out how to do it!

So I had to share!

Here are two ways to make a button: the first one involves a little bit of code, and you need to place your picture on an external image storing site like Picasa, Photobucket, Flikr etc. This one can be put on other blogs as well. It isn't clickable, so won't link anywhere - it's just an icon you can share (maybe a photo, quotation or whatever).

The other way is easier as the content stays on your computer (no external sites involved). You can make this a clickable link if you wish, or just an image. But you can't put it on other people's blogs - this one is strictly personal and will sit in your side bar.

Here's how you do it:

1. A pretty button to liven up your blog (like the one above):
  • Create/save a picture or photograph in your favourite graphics editing programme. It needs to be saved at 72dpi and at thumbnail size, around 120 - 150 pixels wide, and whatever you want the height to be (you may want oblong or square, you may want tall & thin). Most blogs will be happy with 120 pixels wide.
  • Create a line of text on top of your pic - either as a separate layer, or as a text box, depending on the programme you have. Save the image as a jpg. (In Photoshop, Paint Shop Pro etc you may need to flatten it before you save it).
  • Upload your image onto an external site like Photobucket, Picasa or Flikr.
  • In Blogger, go to Layout > Page Elements > Add A Gadget
  • Click on HTML/Java Script, and copy&paste the code below in the box, substituting your own code in between the "" marks: the first set will be the url of your blog, and the second set the url where you stored your picture (which should be a jpg).
  • Replace the instructions highlighted in RED with your own urls.
<a href="your blog address"><img border="0" src="your image url"/></a>

And that's it! If you hate it, simply delete the HTML/Java Script box.

This method is the way to go if you want to make your buttons available for other people to put onto their blogs. Please note this is not a clickable button.

2. The other way (for your personal blog only)
  • Create/save a picture or photograph in your favourite graphics editing programme. A good size would be at 72dpi and around 120-150 pixels wide (thumbnail size) so it will fit in your side bar.
  • Once you have your picture ready, go to:
Layout > Page Elements > Add a Gadget > Add a Picture.
  • This will bring up a choice of either browsing online or from your computer.
  • Browse your My Pictures folder to locate the picture on your hard drive and upload. Blogger will even shrink it for you (to 190 pixels wide).
  • You also you have the option of making it clickable by typing in the url of the website or page that it will link to (in the box) plus a title and a caption.
  • If you just want the picture as is (no link) just don't type one in!

post signature


  1. OMGOSH you are sooo smart how did you learn all this?!!
    Sounds so easy!

  2. Hey Susie,

    How do I add the snippet of code like underneath your images? I'm probably being really lame on this one..I know how to hyperlink images but not how to have that actual little box of code for people to copy.

    Thanks for all you do!

    ♥ Love, Hugs & Faerie Dust ♥

  3. Staphanie - thanks so much for asking. I'm off to write you a tutorial right now!


I love to receive comments, and I read each & every single one! Thank you so much.
I'm sorry to have to put Captcha back on - I know how annoying it it is - but I'm getting targeted by spammers again. Please note, spam will not get through, and I also automatically delete any comments containting links!