How to: Create a Blog Button with the code underneath

I was creating myself a blog button, when all of a sudden I had a thought that it might be helpful to start a 'How to' series of posts. Basically, the idea is that everytime I come across anything that might be useful to other bloggers, I do a post on it...... so here you go!

Marketing your blog is a great way to encourage extra readers, and a blog button is just one way of doing this.

A blog button is basically a hyperlinked (to your blog) thumbnail image of your website that your followers can post onto their blogs to help encourage their readers to visit you.

Below is a screenshot of the blog button on my website showing an example of the code. Your readers would copy the code and paste it onto their own site. But how do you go about creating this image with the code beneath?

Pic.No.1. My blog button. My, who is that good looking gal?

You want to make your own Blog Button? Let's go......

Step One - Make your Blog Button Image

You need to create a .jpg image for your Blog Button. You can do this in any photo editing software, like Photoshop or Paint (if you don't have Photoshop).

Pic.No.2. I created my Blog Button in Photoshop

Step Two - Size your Blog Button

Make sure the image is the correct size. It should be around 150 pixels wide.

Step Three - Upload your Blog Button

Upload your image to a Image Hosting site like Photobucket or Flickr. I used Photobucket. If you don't have an account set up, you will have to register first.

Step Four - Create the code for your Blog Button

Look at the code below, you need to replace all of the green text with your own information (there is an example in Step Five which will help you).

<center><a href="http:Your Website URL" target="_blank" title="The Title of your Website"><img alt="The Title of your Website" src="The URL of the Image you Uploaded" /></a> <center>

</center>

<center><textarea id="code-source" rows="3" name="code-source"><center><a href="http:Your Website URL"><img border="0" src="The URL of the Image you Uploaded" /></a></center></textarea></center></center>

If you are not sure how to get the URL of your uploaded image, go into Photobucket, and click on the album that contains your Blog Button. Above the image of your Blog Button, click on the link called 'share'. A separate window will open. Click on the tab called 'Get Link Code'.

Copy the code in the 'Direct link for layout pages' box. This is your image URL and can be posted into the code above. 

Step Five - Check that your Blog Code is Correct using this Real Example

This is what the finished code looks like for my own website Blog Button, so that you can compare:

<center><a href="http://www.thedayafteryesterday.co.uk/" target="_blank" title="Anne Dickens | The day after yesterday"><img alt="Anne Dickens | The day after yesterday" src="http://i834.photobucket.com/albums/zz264/dangermousette/Blog%20Button/Blog-Button.jpg" /></a> <center>

</center>

<center><textarea id="code-source" rows="3" name="code-source"><center><a href="http://www.thedayafteryesterday.co.uk/"><img border="0" src="http://i834.photobucket.com/albums/zz264/dangermousette/Blog%20Button/Blog-Button.jpg" /></a></center></textarea></center></center>

Step Six - Post the Code onto Your Website or Blog

This is how to post your code in Blogger:

Copy the code that you created in Step Four

Make sure that you have your blog dashboard on the screen

Click on the 'Design' tab

Click on the link 'Add a Gadget'

Select the gadget 'HTML/Javascript'

In the 'Title' box, type 'Grab my Blog Button' or similar

Paste the code that you copied into the 'Content' box

Press 'Save' and the Gadget screen will close

Press 'Save' again on the 'Design' page, and that's it.  

Voila! There you have it - your very own blog button. Now all you have to do is approach your readers and see who wants to do a button swap!

Let me know how you get on and if you found this post useful!