Friday, June 25, 2010

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][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.


  1. I have been trying to figure out how to make one of these!! I'm going to follow your steps and hopefully figure it out. Thanks so much!
    Big Fat Mama

  2. I'm going to try it later. Thanx so much !!
    I'm following you now and got your button !!
    Thanx so much !!!


  3. Hi! Thanks for stopping by I'm now following you back via GFC! Love your new button!

  4. I've been wanting to make one of these. Yours is the first that sounds simple enough to actually work. But first I wanted to get one of those cute pictures that I see everybody with, do you have any suggestions? They look kinda cartoonish. I've tried Zwinky but it doesn't seem the same. Thanks :-)


    I did it!

    Just couldn't figure out how to add a picture. But I do have a blog button now :)

    check it out

  6. Thank you! I've been trying to figure out how to do that for awhile now!! Now to just find me a cute logo/design so I can remove my plain ole button now!!

    Please check me out if you get a chance!

  7. Thanks for the fab tip! I may end up with a blog button yet ...

  8. Woohoo! It worked! Thanks so much! I've tried to follow other bloggers instructions and this is the only directions that worked.

  9. OMG! You are beyond AWESOME! Thanks so much! I've been wanting a button for some time now! Thanks for putting it in terms that I could understand! I'm putting your button on my blog also! Thank you again!!


Please leave a comment!