Find a photo that you want to use for your button and size it to 150x150 pixels. You can do this very easily in Photoshop >> Open the image you want to use. Select IMAGE from the taskbar. Then click on IMAGE SIZE. A box will open and you can size the pixels from there.
Host your photo on a website like, Photobucket. Here's the link to Photobucket.com Upload the photo, then copy the direct link assigned to your specific photo.
Copy this code and replace the "yourblogURL" with your actual blogger web address and replace the "yourimagedirectlinkURL" with the link you copied in step 2.
a border="0" href="yourblogURL" target="_blank">
make sure to use this with a < at the beginning and /> at the end (see the photo in step 4)
Within your blog go to the Layout tab and click the ADD A GADGET link. Select the HTML/JAVA Script tool. It will open a new window. In the title area you can write something like..."Grab my Button" or whatever suits your fancy. Within the text box post the HTML from step 3.
If it looks similar but with your replacement links hit save.
Open another HTML Gadget but leave the Title blank. Paste the following code at the top of the text area... textarea rows="4" cols="20" again use < and >
next copy and paste the code from step 3
finally insert this at the end textarea using and >
It should look like this...(click the photo for a larger view)
Click save. Make sure this box is under the previous box. So that your blog looks like this...
That's it! You should now have a working blogger button!! Phew! What a relief :)
Let me know if you have any questions about this post.