How To Make A Free Blog Button with Text Box

If you haven't noticed, I finally made a fabulous blog button for this blog, "The Frugal Free Gal." (*Note: My button has changed with my new design!) I am very proud of my button. I have been visiting several blogs similar to Frugal Free Gal and thinking, "How do I get one of those?!" I searched and searched the "Swagbucks" toolbar (and won a few Swagbucks in doing so) and finally figured out how to make a blog button.

My button is simple. I like it simple. It is blue because blue is my favorite color and it also matches my blog. AND..."The Frugal Free Gal" is wearing a tiara. I figured since I am a frugal girl, I deserved to at least wear a tiara. It may not be real, but it sure is cute! Every frugal girl deserves a "tiara," even if its a digi-tiara! So go ahead. Make a blog button if you haven't already.

This is how I made my blog button:

1. Go to the Cool Text Graphics Generator.
2. Click on "Buttons" in the blue bar at the top.
3. Choose your button design.
4. Design your button: text, color, shape, size (I chose 125 X 125).
5. Click "Render Button."
6. Download and save your button to your computer.
7. Save your image to an online photo album (I chose photobucket) or place it in a blog post and publish the post.
8. If you saved yours in an online photo album, copy the direct link code. If you chose to use photobucket, copy the entire address that is in the Direct Link box.
9. If you published your button in a blog post click View Blog. Then click on the image. This will take you to a new web address where you will see only your button.
10. Copy the entire address that is in the address bar.
11. Paste into a word document, email, or write down the buttons code and save it for later.
12. Go to your blogger account and click layout.
13. Choose to add a gadget.
14. Click on HTML/Javascript.
15. Type "Grab My Button" or "Get My Button" in the title box.
16. Copy this code and place it in the text box.

[center][a href="http://YOUR WEB ADDRESS/" target="_blank" title="BLOG TITLE"][img alt="BLOG TITLE" src="http://IMAGE WEB ADDRESS"/][/a][center]

[/center]
[center][textarea id="code-source" rows="3" name="code-source"][center][a href="http://YOUR WEB ADDRESS/"][img border="0" src="http://IMAGE WEB ADDRESS"/][/a][/center][/textarea][/center]

All of the front brackets [ will need to be replaced with < and all of the back brackets ] will need to be replaced with >

***Also, make sure that there is only one http:// before your web address and before the image web address. If you copy and paste you may need to delete an extra http:// in order for the code to work.***

17. Go back into the code and type in your information anywhere it says BLOG TITLE, or YOUR WEB ADDRESS.
18. Save this gadget.
19. Position the gadget on your blog where you would like it to be.
20. Save your changes and click view blog.
21. Click on your button to make sure it takes you back to your blog.
22. Let your friends know that you have a blog button and ask them politely to add it to their homepage.
23. If you successfully make a blog button after reading these instructions, please come back and leave your blog address below. I also ask that you share this blog post with your friends, or copy my button and place it on your page.

Do you want to make a free signature like you see below? Head here.