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
And now all you need to do is convince some of your favourite blogger friends to grab the code and link to you!