What you need:
A picture you want to use as the button
Simple (plain) text editor (I used Notepad)
Find the picture you want to use and open it in Picmonkey
Crop it to be 125 x 125 (this is the recommended size for a button)
Then play around until you get it the way you want!
Upload your photo to Photobucket
When you highlight your picture a drop down menu appears.
Click Direct Link and it will automatically copy it for you
Step 3: The Code
After you have copied the direct link to your picture, open up Notepad (or whichever plain text editor you have) and copy it there. Mine looks like this.
Okay, time for the code, don't freak out, it's easy!!
You are going to copy and paste the below into your plain text editor.
<img src="YourImageDirectLink" alt="YourBlogTitle" /><div style="width: 125px; height: 125px; overflow: auto; border: 1px solid #666666;"><a href="YourBlogLink" target="_self"><img src=" YourImageDirectLink " alt=" YourBlogTitle " width="125" height="125" /></a></div>
Replace YourImageDirectLink with the link you copied from Photobucket.
Replace YourBlogTitle with none other then your blog title!
Replace YourBlogLink to your blog URL.
You may have to double check the quotation marks. If they are the ones with a curl (") they won't work for HTML. They have to be the ones that are straight up and down ("). If you delete them in your plain text editor and re type them, they will be the straight ones.
Step 4: Adding it to your blog
Open up blogger and go to the Layout tab. Select Add a Gadget from the sidebar.
Copy and paste the code you just created in the plain text editor.
Save it and then go check out what your button looks like!
This is mine :)
Now people visiting your blog can grab your button and put it on their blog to show they love it!
If this works for you I'd love to know and if it doesn't I'd love to know too! Leave a comment below and I will do my best to try and help :)