Pages

Monday, June 13, 2011

How To Make a Grab It Button on Blogger



As of late, I've had readers asking me how I made my button. If you happen to be one of those bloggers who so desires a button, here's it is--quick and simple!
It's only a matter of dropping your Blog URL and Photo URL into some coding. Here we go:
•••••••••••••••••••••
••••••••••••••••••••••••••••••••••


1)  Create your catchy, cute little blog button graphic. I made my less than trendy, but functional  "How to make a grab it button" photo with Fotoflexer- Picnik is great too! (Be sure that it isn't any larger than 200 pixels wide, or all kinds of crazy things will happen.)
2) Upload your new snazzy picture to your preferred image hosting site. (I used photobucket)
3) Pull up your blog on another page/tab, click on Design in the upper right corner, and that will take you to the elements page. Next click on Add a Gadget and then scroll down the list to HTML/Javascript, select it and then paste the code below in the HTML/Javascript box:  





Or use this if you would like to place your grab it button in a post and want it centered (make sure to paste it on the html side):




4)  Now all you have to do is copy your image code from your image hosting site and paste it in place of the YOURGRABITBUTTON.JPG. Next place your blog URL where it says YOURBLOGADDRESS.COM.

Congratulations! You're all done!!!
••••••••••••••••••
•••••••••••••••••••••••••••••••
Also, if you change your mind about the look of your button, there's nothing to worry about. You can change your graphics and all those readers who have your old button will be automatically updated with your new look! Mrs. Marine over at  Mrs. Marine and the Tiny Troops has come up with this great solution. I haven't tried it yet, but I change the look of my blog like I change my nail polish-so I'll be using it soon, I'm sure. 
Posted by lindy at 2:04 PM
Labels: ,

10 comments:

  1. UnknownJune 13, 2011 at 2:10 PM

    What a great tutorial! For someone like me (internet challenged) this helps tremendously!

    ReplyDelete
  2. KatrineJune 13, 2011 at 4:01 PM

    Yay! Thanks for posting a tutorial! Haha yes, all sorts of craziness definitely happens! XD haha thanks for all your help! :)

    ReplyDelete
  3. CherylJune 14, 2011 at 12:15 AM

    Hey thanks so much - I'm sure I was one that asked. Now I just have to summon up the courage to have a go!

    ReplyDelete
  4. The Preppy StudentJune 14, 2011 at 8:18 AM

    Nice tut!

    ReplyDelete
  5. steufelJune 14, 2011 at 9:31 AM

    Hey, and thanks for stopping by and following me. I follow you now via email:-)

    ReplyDelete
  6. Sabrina B RadkeJune 14, 2011 at 10:00 AM

    I am SO not tech savvy anf this is so great of you to share!

    ReplyDelete
  7. Mrs. GambleJune 14, 2011 at 10:48 AM

    hi i am the newest follower from the blog hop.. feel free to visit... http://www.courtnesopinion.bogspot.com

    ReplyDelete
  8. CherylJune 14, 2011 at 11:50 PM

    Help, help, help. Have tried about a dozen times and I'm not getting it right. So a couple of questions:
    - what is the image code from the photo? Is it the url? I'm using Picasa.
    Do I put it in twice as your code has the "yourgrabitbutton.jpg" in twice. What the heck am I doing wrong? Thanks for any help you can offer. Am subscribed to follow-up comments in case anyone else is in trouble so you can comment here. Cheers and many thanks.

    ReplyDelete
  9. CherylJune 15, 2011 at 12:15 AM

    Cancel that last request. Decided it was Picasa so swapped to photobucket and checked another code site and hey presto my button is up. Thank you again for encouraging and inspiring me to finally get this done.

    ReplyDelete
  10. lindyJune 15, 2011 at 11:58 AM

    Thanks for the feedback everyone! So glad it's working for you, Cheryl! I sort of broke out in a cold sweat when I posted this-even though I tested the html over and over, I was afraid I may have missed something.

    ReplyDelete

Subscribe to: Post Comments (Atom)