How to Make a Blog Button with Grab Code

how-to-blog-button
When I first started blogging, everything seemed OH SO HARD. I never thought I’d make it past zero followers and my only views would be my own. Now, one and a half years later, I’ve gotten the hang of it all, though I’ll occasionally get overwhelmed. My newest goal? To make blogging easier for you.

If you didn’t know, I design blogs through my website at IceyDesigns. I’ve got detailed pricing, an easy to fill out form, my portfolio, and testimonials from satisfied clients.

But that’s not why you’re here, right??

Today, I’m bringing you a tutorial for a blogging essential. I’ll admit, when I first started blogging, I was baffled when I saw those nifty little buttons with codes beneath it to ‘grab’ and place anywhere you want.

Follow these easy steps and you’ll have a pretty little button with a super easy way to let your visitors snag it!

1. Make your button. This could be the hardest thing if you don’t know how to design. But I’ve got a surprise for you! Here are some free graphics that you can easily add your blog name to!

Designing your own? Average size? In my opinion, about 160×160. But you can choose to have it square, rectangle, or circle.

2. Upload your new button to an image host. Photobucket, Flickr, your webhost, or even a new post in Blogger would work. Get the URL of the image.

3. Now we’re going to make the grab box. This is the best part! Copy the following code and paste it in a new HTML gadget on your blog:

————————————-

<img src=”http://www.iceydesigns.com/id-graphics/id-button.jpg” /><div><textarea cols=”16″ name=”textarea” onclick=”this.focus();this.select()” rows=”1″ style=”height: 37px; overflow: hidden; width: 140px;”>&lt;a href=”http://www.iceydesigns.com“&gt;&lt;img border=”0″  src=”http://www.iceydesigns.com/id-graphics/id-button.jpg” /&gt;&lt;/a&gt;</textarea></div>

————————————-

And follow these instructions carefully, or you’ll have a mess you won’t know how to fix.

Replace the URL in RED with the URL of your image, which we got in step two.
Replace the URL in BLUE with your blog’s address.

That’s it! What do you think?
If you use the tutorial, leave me a link to your blog, so I can check it out!
And if there’s any tutorial you would love to see, drop me a comment or an email, or fill out this form and you might just see an explanation here!

Hafsah

Hafsah Faizal is a YA author, designer, and blogger. Her designs have graced the sites of New York Times bestselling authors, bloggers, and more. She resides in Texas, with her family.

RELATED POSTS

73 Comments

  1. Reply

    Rachel @ Unforgettable Books

    March 8, 2012

    thank you! i still need to make a grab box and you made it so much easier.

  2. Reply

    Angelya

    March 8, 2012

    Sadly the textarea tag isn't allowed in wordpress.com widgets :( I've just added my button there and people will have to sort the code out for themselves for the time being.
    Thanks for the lesson though :)

  3. Reply

    Kristie Cook

    March 8, 2012

    I'm pretty good with tech stuff, but always wondered how to do these and was too lazy to look it up. Thank you so much for sharing!

  4. Reply

    Mundie Kids

    March 8, 2012

    This comment has been removed by the author.

  5. Reply

    Mundie Moms

    March 8, 2012

    Thank you for this post!!

  6. Reply

    Tiffany Mahaffy

    March 8, 2012

    I haven't tried it yet but I will!! Thank you so much for taking the time to do this! I don't have a button yet because I don't want to keeo asking people or even when they offer most of you awesome bloggers have done so much for me or others just starting out!! It's such an awesome community to be a part of!

  7. Reply

    Amanda

    March 8, 2012

    Thanks for doing this! I've been wondering how to make one of these ever since I started my blog. I'm heading to make one right now!

  8. Reply

    Amanda Sarinana

    March 8, 2012

    This is an awesome blog post! I'm sure it'll help out alot of bloggers. Me personally… I had to figure this one out on my own through google searches and such. Wasn't easy! This is definitely easier lol! :)

  9. Reply

    Candace

    March 8, 2012

    Wow, you make it sound so easy! I just always ask someone else to do it for me. I may have to try it myself now!

  10. Reply

    Dashley

    March 8, 2012

    Thanks so much for making this easy, http://www.paranormalsisters.blogspot.com

  11. Reply

    Arianne Cruz

    March 8, 2012

    so cool :) i might have to try it later…

  12. Reply

    Mary @ BookSwarm

    March 8, 2012

    Still not sure I'm up to the task, though you do make it sound do-able. Though I have one, it matches my previous design. I might have to give this a whirl!

  13. Reply

    Michelle @ Book Briefs

    March 9, 2012

    I love your designs. My favorite thing about them is everything is so clean but still fun. You use such nice colors and fonts but everything looks put together and crisp. I have not seen any design of yours that is anything less than awesome! This grab code tutotrial is great! I'm adding the HTML to my blogging cheat sheet. I use a word doc to keep track of all the tips and tricks I have licked up over the past year.

    It is so nice that you made some blog button backgrounds for everyone to use. You rock! :)

  14. Reply

    Danielle

    March 9, 2012

    Such a great tip! Thanks so much for sharing and linking up at the Feature Friday Linky Party on Blissful and Domestic:>

    http://blissfulanddomestic.blogspot.com/

  15. Reply

    guitar_girl714

    March 11, 2012

    Hey there…quick question!

    How do you get the URL from the image? I posted the button on a Blogger post, but I'm still unsure on how to get the URL.

    Thanks!

  16. Reply

    ❤ Vivian

    March 11, 2012

    Thank you so much for this tutorial! It was super helpful! I've now added a Grab-my-button to my sidebar :)

    Check it out!
    http://vivaciously-vivian.blogspot.com/

  17. Reply

    lisseth

    March 12, 2012

    thanx i was able to make mine!

  18. Reply

    Arianne Cruz

    March 15, 2012

    thank u so much for the tutorial!! :) I decided to make it easy for myself and make my button exactly like my blog design..lol check it out and let me know what u think.. http://ariannecruz07.blogspot.com (sidebar)
    u can tweet me @ariannecruz07

    THANKS AGAIN!

  19. Reply

    The Crafty Housewife

    March 19, 2012

    Thank you so much!!! Such a big help:)

  20. Reply

    Flora Moreno de Thompson

    March 29, 2012

    I did a Google search for how to find directions to add a blog button, and of the few pages I looked at for help, yours was BY FAR the easiest and quickest. Thanks for the great directions!

    Here's a link to mine, down on the right: http://www.jeffreyandflora.com

  21. Reply

    KatEzat

    March 31, 2012

    It works! Come and see:

    http://lifesjewelsonstring.blogspot.de/

    YAY! Thanks, that was the 3rd set of code from 3 different websites that I tried… I was determined to do it myself and thanks to you I did.

    Thanks again for sharing!

  22. Reply

    mommyto2kids_07

    April 4, 2012

    woohoo THANK U lol. took me 2 hours to figure this out.

    here's my blog, I'd love for you to snag mine for your blog too
    http://mamasreviews2012.blogspot.com/

  23. Reply

    Bethany Small

    April 5, 2012

    Thank you for your help! It worked for me! Here is a link to my blog:
    http://smallswall.blogspot.com/

  24. Reply

    Chantelle J Shick

    April 29, 2012

    Awesome post, thank you sooo much for sharing!!! My blog is http://www.chant3llo.com and thanks to you I now have my very own button. :)

  25. Reply

    Kara

    May 1, 2012

    Thank you! This helped a ton.
    Now any of you can grab my button ;)

    http://viricordate.blogspot.com

  26. Reply

    Deborah

    May 3, 2012

    Wow, the grab box was difficult for me, because there are two
    sections of text in red and I don't want to mess up the URL!

  27. Reply

    Deborah

    May 3, 2012

    Yay! It works! Thank you so much!

  28. Reply

    smiling_ina

    May 15, 2012

    Thank you so much!!! I was dreading to do the grab code, but when I found your site, you made it so easy. :D

    You can find my button here -> My Blog

    Thank you again so, so much!!! :)

  29. Reply

    taysbookcorner

    May 27, 2012

    Thanks you!!!!!!!!!!! This was so easy!

    Heres a link: http://taysbookcorner.blogspot.com/

  30. Reply

    Ms.Treml

    May 28, 2012

    Thank you so much!!!! The tutorial was very easy to follow!
    Here is my blog! http://www.mstremlsteachingblog.blogspot.com
    ~Amanda

  31. Reply

    Jess_LyMi

    June 8, 2012

    The tutorial was fantastic, but for some reason it's showing us as a broken picture where it isn't displayed. I changed it to 125×125. Do you happen to have any suggestions? Thanks!

    Jess
    http://thedelightfulcrafter.blogspot.com

    • Reply

      Hafsah - IceyBooks

      June 8, 2012

      Hey Jess! I'm glad it was easy to follow.
      The reason why your image isn't showing up is because the link is broken. Try uploading your image to a new sample blog post. Go into the HTML part of your post and copy the URL of the image and use that instead of your Flickr one.

      Hope that helps!

    • Reply

      Jess_LyMi

      June 10, 2012

      Hey Hafsah,

      I wanted to let you know I just learned how to do the code! I couldn't have done it without you. I wanted to update my button and I clicked on the image and copied and pasted it into the code! Thank you so much! Go check it out if you like. :)

      http://thedelightfulcrafter.blogspot.com

  32. Reply

    iamshellfish

    June 14, 2012

    My Image isn't showing up, the box is there with the code, but no image. Any idea what I'm doing wrong?

  33. Reply

    iamshellfish

    June 14, 2012

    Nevermind, I was trying to use Flickr but it wasn't working, so I used phota.me and it took a few tries but I did it!! Thanks so much for the tutorial!

    Check it out!

    http://ishellfish.blogspot.com

  34. Reply

    Rena Halloran

    June 19, 2012

    This was the first tutorial that actually worked! I will definitly be sharing this on my blog! Thanks! http://dandelionwishes9.blogspot.com/

  35. Reply

    Jaime Lyn

    July 5, 2012

    Thank you so much for this tutorial!! After looking through about a half dozen others that I could not get to work, yours finally gave me success!!!!

    THANK YOU THANK YOU THANK YOU!!

    :)

  36. Reply

    Jerri Davis

    July 5, 2012

    I did this and it put the writing on but not the picture just a little square messy thing above the writing. But Thank you I learned a lot just/ http://www.jerri1962sblog.blogspot.com/2012/07/blog-post.html/ not a complete work. Thank you. Jerri Davis

  37. Reply

    ❤ Vivian

    July 17, 2012

    Lovely! This is definitely my favourite tutorial on blogging goodies!! <3 I went with the nice 160x160 size, and designed mine based on the images already there from my pre-made template. ^_^ An owl button added to the sidebar!!

    Vivian @ Vivaciously, Vivian

  38. Reply

    ❤ Vivian

    July 17, 2012

    Lovely! This is definitely my favourite tutorial on blogging goodies!! <3 I went with the nice 160x160 size, and designed mine based on the images already there from my pre-made template. ^_^ An owl button added to the sidebar!!

    Vivian @ Vivaciously, Vivian

  39. Reply

    hollymayb

    July 17, 2012

    Great! I had a go but couldn't figure out how to make the 'grab code' quite right, so I just put it in a post so people can copy and paste it that way.

    Thanks so much, I couldn't have done any of it without your help!

    http://acraftmarket.blogspot.co.nz/p/grab-button.html

  40. Reply

    Amy

    July 23, 2012

    Thank you SO much for this! After trying about 3 different tutorials, I was able to do this the 1st time with yours!!! Wish I had found you first…ha! THANK YOU!

  41. Reply

    Gourmet Scent Shop

    July 25, 2012

    Thank You, You made it so easy. I've been wondering how to make these

  42. Reply

    Claire

    July 25, 2012

    Thank you so much – I've made a button for a bloghop I've started. Your instructions were perfect!

  43. Reply

    Somer S

    August 3, 2012

    Thank you!!! I did it!!

  44. Reply

    Ms.M

    August 3, 2012

    Thank you so much! Your directions were so clear and helpful.

    http://thirdgradegems.blogspot.com

  45. Reply

    Jayme Holmes

    August 16, 2012

    Yay I did it first go, very clear and easy instructions to follow :)

    http://youngmumsguidetosurvival.blogspot.com.au/

  46. Reply

    Bonnymom

    August 21, 2012

    Thank you very much for your accurate tutorial. I spent several hours trying out different HTML codes from other blogs, and none of them worked. I was about to give up when I found yours through several google searches. It worked. At first my image was too big, but I used Microsoft Office Picture Manager to resize it, and I finally have a real button. I wish I had found your blog first. I really appreciate you sharing your information with us. You can check it out at http://thedomesticatedprincess.blogspot.com

  47. Reply

    Cindy

    September 22, 2012

    I also tried several different blog tutorials that didn't work before finding yours. Worked the first time! Thanks

  48. Reply

    Patricia Potts

    October 3, 2012

    Thank you!!!! It took me forever. I had all sorts of trouble with Picasa and so I did a sample blog like you suggested and got my image. I hope it is working. It looks okay on my page. Thanks again.

    http://lessonsinhomeschooling.blogspot.com/

  49. Reply

    Johane Levesque

    October 9, 2012

    Thank you so much for the tutorial! I was trying to figure this out for the longest time. :D

    http://www.cookingcacophony.com/Blog

  50. Reply

    Leilani Roseberry

    October 30, 2012

    Thank so much, yours is the first code I found that actually works. The others looked great on my blogs, but the code to grab didn't work.

    http://www.caelestishandicrafts.blogspot.com/

    http://www.lyrtutoring.blogspot.com/

  51. Reply

    Vilisi

    November 7, 2012

    Thank you for making it so easy. :)
    http://islandmusings-shuni.blogspot.co.nz/

  52. Reply

    Jacquinita

    November 12, 2012

    Oh my goodness! this post is a gift.. I've always wondered how the do those pretty little square boxes. Thank for this easy-to-follow instructions. I was able to make one in less than 10 mins (not bad for a newbie eh?)

    Without further adieu, I am proud to share my button.

    http://jacquinita.com/home/

  53. Reply

    A.Michelle

    November 14, 2012

    You are absolutely the most wonderful person in all the world! I have been trying to fix a blog button onto my blog for about three hours now and I kept having problems. Your blog post saved me! Thank-you so much!

    Check out my new blog button!

    http://www.thepreppylittlepolkadot.blogspot.com

  54. Reply

    Brandy Black

    November 30, 2012

    HOLLA! I'm so glad I found this!! I tried a few different tutorials and none of them worked! This was super easy and it worked! Check it out!
    http://www.bestrongerthanyesterday.blogspot.com

  55. Reply

    Marlyn Beebe

    November 30, 2012

    Wonderful! Thank you so much! I'm bookmarking this!

  56. Reply

    nokhuthula nyoni

    December 1, 2012

    Thank you so much. You made it so much easier!

    Here it is: http://crystalcosmicchic.blogspot.co.uk/

  57. Reply

    Danielle Faerber

    December 6, 2012

    Thank you so much for this! I read several tutorials and yours was the first that made sense :)

    Danielle
    carolinakteacher.blogspot.com

  58. Reply

    Sophia Lin

    December 16, 2012

    Thanks for the Guide! :D

    ~Sophia
    http://bookwyrming-thoughts.blogspot.com/

  59. Reply

    Debbie Rodgers

    December 24, 2012

    Thanks so much for sharing this information. I have been trying to make a blog button for a while now and your code is the most clear and easiest one I have found. I now have a blog button.

    http://thunderroseleather.blogspot.com

  60. Reply

    kelly thompson

    January 9, 2013

    I tried a gajillion of these tutorials elsewhere but for some reason your code worked when others did not add the text box down below so thank you – have a great year and I am a new fan!

  61. Reply

    juLie tearjerky

    February 1, 2013

    I just made my own blog and thanks to your tutorial, I even now have a blog button! Yipee! This is really helpful, not to mention easy to follow. Thanks so much! :)

  62. Reply

    Loving My Crafts

    February 11, 2013

    Thanks so much, I now have a blog button! http://lovingmycrafts.blogspot.co.uk/

  63. Reply

    whyicantstopreading

    March 4, 2013

    I just figured out how to do the button when I came upon your post… If only I had found this one first!

  64. Reply

    WeaklingNo14

    March 10, 2013

    Thanks for this post!! I had the picture and everything ready to go before I realized I didn't know HTML, so thanks so much for this! http://weaklingno14.blogspot.co.uk It's under my About Me…

  65. Reply

    JiN KaZaMa

    March 17, 2013

    I finally got it…thank you so much for a great tutorial. It was what I was doing not your directions. —- == CsLoVersPrO == —-

  66. Reply

    Amanda Whittaker

    March 18, 2013

    Thank you so much for this! Noone elses codes seemed to work and yours is just perfect!

  67. Reply

    Butterfly Me

    April 12, 2013

    Thank you so much, you are a life saver. I tried so many codes and nothing was working. ;-) thank you

    Kay

  68. Reply

    Paula Hamand

    May 4, 2013

    Ok! I'm going to try this! wish me luck! if I do it right, I will let you know, thank you! Paula

  69. Reply

    Paula Hamand

    May 12, 2013

    woooo! it worked! I did about 30 do overs, but I now have a working button on my blog! thank you for the button too! I used pic monkey to personalize, it took me awhile to figure out which section of the image html I needed to copy. thank you! here's my blog address if you want to see http://educatingchidrenwithdisabilities.blogspot.com
    Paula

  70. Reply

    Kelly R.

    July 12, 2013

    Finally a tutorial that worked-Thank you:)

LEAVE A COMMENT