How to create a blog button with a grab box

Please note this guide is for Blogger/Blogspot only.

So, you’ve got your blog, and you’re keeping up with your blogging, but now you want to spread the word about yourself. A great way of getting new readers to your blog is to ask your blogger friends to link to your blog from theirs. But who wants a normal text link when you can stand out from the crowd by having your own designed blog button!? A button is simply an image with an embedded link that directs people straight to your blog. Just like a normal link, but in a much fancier way.

This is how you create a blog button with a grab box for Blogger. (The grab box is simply for your readers to copy the code for your button in case they want to display it on their blogs.)

1. Design your button

It’s best if your button is of similar design to your blog header, so that people recognise you straight away. Stand out! Try to design something different – your own little trademark. If you haven’t got any Photoshop skills, one simple tool to use is Polyvore. Save your button image in a picture tool such as Paint, and make your button around 125-200 pixels wide.

2. Save your button image somewhere on the web

You can either save it on a photo sharing website such as Flickr, or somewhere on your own blog. Copy the image link location (you will need to use it in the button’s HTML code).

3. Copy this code into an empty Word document (this is easier than copying it straight into your blog):

<center><a href="http://YOUR BLOG URL/" target="_blank" title="YOUR BLOG NAME"><img alt="YOUR BLOG NAME" src="http://YOUR IMAGE LOCATION"/></a><textarea id="code-source" rows="3" name="code-source"><center><a href="http://YOUR BLOG URL/"><img border="0" src="http://YOUR IMAGE LOCATION"/></a></center></textarea></center>

Add the URL to your blog where it says YOUR BLOG URL (http:// is already in the code)

Type in your blog’s name where it says YOUR BLOG NAME

Insert YOUR IMAGE LOCATION with the URL for where you’ve saved your image (http:// is already in the code)

Make sure you haven’t accidentally added any spaces in the code, or deleted any symbols. If you have, it won’t work!

If we were to use Best British Bloggers as an example, and the BBB badge (which has this image location: http://www.bestbritishbloggers.co.uk/wp-content/themes/bbb/img/logo-en.gif), the code would look like this:

<center><a href="http://www.bestbritishbloggers.co.uk/" target="_blank" title="Best British Bloggers"><img alt="Best British Bloggers" src="http://www.bestbritishbloggers.co.uk/wp-content/themes/bbb/img/logo-en.gif"/></a><textarea id="code-source" rows="3" name="code-source"><center><a href="http://www.bestbritishbloggers.co.uk/"><img border="0" src="http://www.bestbritishbloggers.co.uk/wp-content/themes/bbb/img/logo-en.gif"/></a></center></textarea></center>

 4. Log into your Blogger account

Go to “Layout” and add a new gadget. Choose “HTML/JavaScript”, and put something like “Grab my button” as the title. Paste your code in the textbox, and save. You will now be able to see the button and the grab box on your blog. Test that the button is working properly by clicking on it – it should take you straight to your blog’s homepage. You could also try to copy the code in the grab box and uploading it on your site to see that you image with the embedded link actually shows the way it is supposed to.

And now all you need to do is convince some of your favourite blogger friends to grab the code and link to you!