17 August 2010

How to create a blog button...

How to add a “grab my blog button” link to your blog.

Have you ever wanted to create one of those blog buttons where a reader can copy and paste the HTML code, in the scroll box below the image, so they can add your button to the side of their blog? Well now you can in two easy steps… all you need is a blog and a flickr image…

Step 1: adding the blog button image

On your blog click the ‘design’ button on the top right hand side then click ‘add a gadget’ copy and paste the code below into the content box, you can add any title to the gadget ie “grab a blog button” etc….

<a href="http://YOURBLOGADDRESS/"><img src="http://THELOCATIONOFYOURBUTTON.jpg" /></a>

Where it says YOURBLOGADDRESS in green retype your actual blog address, I would type www.katherineq.blogspot.com

Now you have to add your button image.

I found the location of my blog button in my flickr account (you have to have an image on a site like flickr where you can get a HTML code for the image you want to use).

Click on the image you want from your flickr account, then above the image there should be two buttons to click… ‘actions’ and ‘share this’… click ‘share this’.

Click grab HTML… this is what my code looks like.

http://farm5.static.flickr.com/4062/4668927600_362e207125.jpg" width="313" height="313" alt="blog button" /

You just want the part of the code that I have highlighted in red. Of course the numbers will be different as this is the code to my flickr picture.
Cut and paste this part of the code into the purple highlighted part above titled THELOCATIONOFYOURBUTTON.

You have now completed the image part of your blog button…

Step 2: adding the text box with the code for your button

This next step is the code that people will cut and paste to their own blogs. You have to get another HTML gadget from the arrange layout page and copy and paste the code below into the content box, just like you did in the first step (you don’t need a title for this code).

<textarea cols="29" id="code-source" name="mybutton" rows="4" style="height: 83px; width: 266px;"><a href=//YOURBLOGADDRESS/"><img src="http://THELOCATIONOFYOURBUTTON.jpg"/></a></textarea>

As above replace the green highlighted YOURBLOGADDRESS with you own address and use the same HTML code from your flickr account for your image to THELOCATIONOFYOURBUTTON in purple. Just like you did in the first gadget box.

Arrange the gadgets by clicking and dragging them so the image gadget is above the code gadget and that should be it.

Click save... view blog


  1. AWESOME! Thank you! What a wealth of information and ideas NZ Handmade are!

  2. Thanks for sharing but I think a part of the code is missing on the second part. Or actually I think it transforms into a box. You'll need to type it differently for us to copy it.

  3. If you are finding it is not working I can send you a word document with the instructions on...

  4. Thanks for pointing that out, NatashaMay. I think it's fixed now. :)

  5. Thanks so much this is such a great tutorial. Off to make one now for on top of a lily pad! x

  6. Fantastic - definately making one of these. Thanks Katherine x


We love hearing what you have to say, please feel welcome to leave your comments...