Thursday, September 10, 2009

How to Make a Grab My Button box


Manic Mother

A fellow blogging buddy asked for help creating a “grab my button” box, so I offered to help. She asked if I would write a tutorial on how I did it for her readers. So I did, and here it is for you as well!
It really isn’t as hard as it seems. This tutorial is written under the assumption that you already have a button, you can make one in Microsoft Paint, the most common size is 125x125, or you can use Photoshop if you have it (or for a small fee I can make you one )  To start log in to your Blogger Dashboard, and click on Layout. It should look somewhat like this.
blogger
Click on “Add a Gadget” then choose HTML/Javascript, you should see this (minus my little notes).
box copy
Give your box a title like “Grab my Button” or something more clever if you like. Paste the following code into the box, to copy: highlight and hit CTRL+P, to paste CTRL+V.
<div align="center"> <a href="http://manicmother.com" target="_blank"><img alt="Manic Mother" src="http://i704.photobucket.com/albums/ww47/manicmother/manic_mother.jpg"/></a> </div> <div align="center"> <form><textarea rows="6" cols="20"><center><a href="http://manicmother.com" target="_blank"><img alt="Manic Mother" src="http://i704.photobucket.com/albums/ww47/manicmother/manic_mother.jpg"/></a></center></textarea></form> </div>
Don’t worry you are going to replace all of my info with yours. I know it looks a little daunting, but we will take it step by step.
html1
Where I have highlighted my blog address, replace with yours, watch the quotation marks, its important that the HTML stays exactly same, except for your info. Where I have highlighted my blog name enter yours.
The second step involves the use of Photobucket, if you don’t have a Photobucket account, go get one, and upload your image now. Once you have uploaded your image click on it, and it should bring you to a screen that looks like this:
php copy
Where it says “Direct Link” copy that code, go back to your html box and paste your Photobucket  code in the following spots, replacing mine, again watch your quotation marks.
html2
Click “Save” on the HTML box, and there you have it you should now have a “Grab My Button” box.
If it is not working for you go back, and make sure you deleted my info, and replaced it with yours. Also, check the quotation marks, make sure they are there and that there aren’t too many.



I'm reading: How to Make a Grab My Button boxTweet this! Posted by Beth Mancuso at 8:11 AM
Labels:

137 comments:

  1. excellent tutorial, I have wondered how to do that & now I know!
    ReplyDelete
  2. Very well written. Wished you had written this when I was trying to figure out how to make my own button. Very frustrating at first but after figuring out how to make my own button, I've gotten so much better with html! I can make buttons all day long now! lol
    ReplyDelete
  3. Your tutorials are fantastic! So easy to follow!
    ReplyDelete
  4. shiver me timbers -how do you know all this stuff????
    ReplyDelete
  5. I don't think that I will ever be able to do that but thank you so much. I will try it!
    ReplyDelete
  6. Can't we just pay you to do it for us?
    ReplyDelete
  7. Beth rocks, doesn't she? Thanks again Beth for typing up this AWESOME post!
    ReplyDelete
  8. Thank you! I have wordpress, and am going to try to adapt it tonight. I was JUST trying to figure it out last night!!
    ReplyDelete
  9. Whoa! I bow down to you. I have been wondering for a few weeks now how to do that!
    ReplyDelete
  10. Thank you for a wonderful tutorial. I am new to blogging (and not very tech savvy) and I have been stumbling around trying to learn as I go. Love your posts and look forward to returning regularly.
    ReplyDelete
  11. Thank you! I used your tutorial to add this feature to my blog: http://www.alamodestuff.blogspot.com
    ReplyDelete
  12. Thank you so much! I was finally able to get it after using Photobucket. I just couldn't get it to work with Picasa!
    http://marthasbookshelf.blogspot.com/
    ReplyDelete
  13. I've tried a few, but your tutorial is the best! Thanks.

    Michelle
    www.TrashToTreasureDecorating.com
    ReplyDelete
  14. hi,
    thanks for the info.,i love your blog!
    i have a question?before you explained how to post a button you assumed we already had the design.can you tell me how to find a design or how to create a design for when i post my own button? i thank you for your time.oh,what is your fee for making me a button?my blog is> http://shannpf1977.blogspot.com/
    thanks,shannon
    shannpf1977@yahoo.com
    ReplyDelete
  15. thanks for tutorial,
    can you grab my button? :3
    ReplyDelete
  16. Thank you so much, you make it so easy to follow, thanks to you I have my button :)
    ReplyDelete
  17. Thank you, very easy to follow :)
    ReplyDelete
  18. THANK YOU SOOOO MUCH!!! You made it so much easier than most other websites. :)
    ReplyDelete
  19. how do you make it so a user can't alter the text while it is still on the page before they select and copy/paste it.I know it can be altered after a user pastes it into their text editor but I would like it to be secure while it is still on the page Thanks!
    ReplyDelete
  20. Oh my heck! Thank you so much for posting this! I was following so other instructions and just kept screwing it up! This was so easy to follow! Thank you a hundred times over!
    ReplyDelete
  21. Wow! Thank you so much for this! I have been trying to get a grab my button box on my site for over 3 hours! You tutorial is fantastic! I don't know what it all means, but it works! LOL
    Thank you thank you thank you. =0)
    -Melanie
    ReplyDelete
  22. Thank you! I have had 2 other blog buttons in the past but for some reason when someone would grab them and add them to their page, it would have a little red 'x' next to the button.

    Your tutorial was so easy to use and I am really happy with how fast I was able to add the code and I decided to change the button image too.
    ReplyDelete
  23. Hey! I just wanted to thank you so much, this was extremely helpful for me! My Grab My Button looks PERFECT!!
    ReplyDelete
  24. Thank you so much, I have been looking for this and found your link through 2 Moms Talk. Thank goodness. =)
    ReplyDelete
  25. Okay I resized my pic in photobucket, saved it, but can't seem to get the resized pic when I copy the direct link code.

    Do you know how to get the resized picture?

    Thank you for your help. :)
    ReplyDelete
  26. Thank You so much for the easy to follow instructions! I can't tell you how much time I have wasted trying to get a button for my blog. Now I have one thanks to you :) Tammy

    www.tammykemp.blogspot.com
    ReplyDelete
  27. awesome thanks... I tried this last time and thought I was doing it right but it didn't work... appreciate ya~
    ReplyDelete
  28. Thanks so much for this tutorial. It took me a couple of tries but I finally got it.
    lizbarber.blogspot.com
    ReplyDelete
  29. Thanks so much for this! I finally have my button up and it was super easy! Appreciate the helpful tips :-D Kellie @ Dime Store Decor
    ReplyDelete
  30. Oh my gosh..thank you, thank you, thank you! I tried to do this all day by following other people's step by step instructions. I finally got my button on my blog thanks to your tutorial. I am so thankful. Feel free to stop by and check it out www.cookieleeconsultant.blogspot.com. Thank you again, I am now your newest follower!
    ReplyDelete
  31. I just found a link to these directions on another blog. I'm so happy that I did, because I've been trying to figure out how to make a button for a while! Thank you so much for sharing these directions, they were sooo helpful!
    ReplyDelete
  33. Thank you so much! It worked great! I thought it was going to be difficult and it wasn't! THANK YOU!
    ReplyDelete
  34. Oh my gosh! I made a blog button! Your tutorial is the best and easiest to understand! Thanks for sharing!
    ReplyDelete
  35. Thank you! It took me a few tries to get it to work but I finally did it! y
    ReplyDelete
  37. THANK YOU SO MUCH! Great Tutorial...it worked perfectly!!
    ReplyDelete
  38. Thank you so very much...you made it so simple and I Love it! I'm reachin' through my computer & givin' you a bloggy ((HUG!))
    ReplyDelete
  39. Thank you very much..it worked for me!
    ReplyDelete
  40. Thaaaank you very much!! You've helped a lot (although i'm a little stupid with those things)and now i've my button!!! :D
    ReplyDelete
  41. It is so wonderful to have a place for blogging tips. This whole blogging is all new to me and it is very exciting to learn something new everytime I am on.
    ReplyDelete
  42. VERYYYY Helpful! Thank you sooo much!
    ReplyDelete
  43. Fan~Tastic! Thank you very much!
    I re-did mine...you never know...I may do it again, and again.
    ReplyDelete
  44. WOW! Who knew it was SO easy! Thank you so much! I wouldn't even know where to begin to figure out how to make a button on my own!
    ReplyDelete
  45. Thanks for the tut, nice and easy :)
    ReplyDelete
  46. Thank you so much!! I went to mutiple how tos and this one was the only one that worked thank you ! :D
    ReplyDelete
  47. Thanks for an easy to follow tutorial! I tried four others and could not get it to load correctly and after visiting you, its working! :>
    ReplyDelete
  48. Hi there ~ Thanks so much for this tutorial! I was able to follow it easily and I created my own blog button! :o) Found you through a google search and am so glad I did. Your blog is adorable!
    ReplyDelete
  49. Hi Thank you for the tutorial... but my button is not showing up! I used photo bucket, followed your great directions, but all I am getting (I tried it on another blog) is the title of my blog (no picture). The title goes to the link if you click on it but where's the picture? Can you help?
    Thank you!
    Susan
    homeroad.blogspot.com
    ReplyDelete
  50. Thank you! I had tried to put my button on my blog before, so I had a photo done. You helped me do the rest!
    Pam
    ReplyDelete
  51. Thanks so much, just posted my first button. Worked perfectly, would not have been able to do it without you!
    ReplyDelete
  52. Awesome! So helpful & easy. Thank you! :)
    ReplyDelete
  53. Thank you SO MUCH!!! I have tried this several times from other peoples step by step, but yours worked!!!
    I am your newest follower.
    Hopefully you can swing by and follow back
    Happy Sunday!


    http://singlemominspiration.blogspot.com/
    ReplyDelete
  54. Thank you! I have tried from other blogs only to be dissappointed and not knowing what went wrong. This worked out for me.
    ReplyDelete
  55. Thank you sooooo very much for this. I did not have a button originally, so I had to do some tweaking of my own. Very well written. Awesome job!!
    ReplyDelete
  56. So glad I found this, easy to do and simple to follow! Linking to you in a blog post! :)

    http://www.fineandfair.blogspot.com/
    ReplyDelete
  57. Thanks a lot..u help me so much since i'm a newbie in this blog stuff...Thanks a lot.. really appreaciate it..
    ReplyDelete
  59. thank you.
    bunches of thank you!!!
    I've been searching for button tutorials for weeks..and it's been frustrating moment..
    love this..love you. thank you :)

    http://bentosiayah.blogspot.com/
    ReplyDelete
  60. Excellent tutorial. I was able to make a button for my blog today. Your instructions worked perfectly! I found you from The Cutest Blog on the Block.
    ReplyDelete
  61. Thank you so much! I had just made a button. I had absolutely no idea how to make a text grab box! The only trick now is to get someone to grab it and see if I did it right! THANK YOU! XOXO
    Andrea from http://www.rockthatplate.blogspot.com
    I will add you to my fav blog list on my site!
    ReplyDelete
  62. Thank you SO Much!! I also found the link to your tutorial on The Cutest Blog on the Block. I just made a really neat blog button by following the instructions. I have been wondering for several weeks how to make one. THANKS AGAIN!! I am a NEW follower.
    Laurie
    htpp:lauriethoughts-reviews.blogspot.com
    ReplyDelete
  64. Thank you so much - very helpful. I now have my own button. Great instructins! Very well done! I would love you to visit my blog. Thanks again!!!!
    http://thecraftyelfworkshop.blogspot.com/
    ReplyDelete
  65. Awesome! Thank you! Easiest tutorial yet...and it worked!!!
    ReplyDelete
  66. Thanks so much for the tutorial.When you create an account on Photo Shop, do you just have to take pics, or are there ones their to choose from? I'll give it a try, but I'm sure 'll be begging for help, or jus tpay you to do it, or anyone else that could help me @Sarafan2 http://www.sarafan2.blogspot.com.Thank you so much!! Awesome!
    ReplyDelete
  67. Thanks so much for this post!
    ReplyDelete
  68. I can not thank you enough for posting this!!! This is just what I needed!

    Melissa
    MeloMomma
    ReplyDelete
  69. Thank you a million times!!!!!!! I linked your tutorial on my blog and showed mine! http://runwithglitter.blogspot.com/
    ReplyDelete
  70. Thank you a million times.. this made things much simpler!
    I linked back to your post on my blog...http://runwithglitter.blogspot.com/
    ReplyDelete
  71. Thank you sooooo very much for posting this amazing tutorial. I understand you have a busy schedule, and for you take some of that time to help us less tech savvy is amazing.

    I now have my shiny new button and all thanx to you! :D
    ReplyDelete
  72. Thank you so very much!!! This has been the most easyiest way to make a grab button!
    Lovely! yay I'm excited!!

    ♥
    Pearl
    ReplyDelete
  73. Thank you, thank you, thank you!!!! I appreciate your help so much!
    ReplyDelete
  74. I followed your instructions. I double checked the code and it is correct but above my little grab box is a small one with a question mark in it. The code is in the box but the picture is not showing up above the box. Any ideas?
    ReplyDelete
  75. HOLY MOLY! I just spent 3 hours trying different ways to make this happen from different websites and FINALLY got it with yours. AWESOME. Thanks. Following you...
    ReplyDelete
  76. thanks so much! very helpful!!
    ReplyDelete
  77. Excellent, excellent tutorial! So very clear and direct! Thank you so much!
    ReplyDelete
  78. Thanks so much! A few tries later I got it! I am a newbie craft and home hacks blogger at apronsandapples.blogspot.com stop by sometime! Thanks again so so so helpful!!
    ReplyDelete
  79. Thanks so much for the color coding! Made is so easy! Great Tutorial!
    ReplyDelete
  80. I love this tutorial. My question is how do I get an image? I really just want text, title of my blog with a solid color background. Could you point me in the direction of a tutorial on that?

    Thanks so much!

    Jennifer @ http://justpeachyindixie.blogspot.com
    ReplyDelete
  81. Thanks so much for posting this! I tried another method for making a grab button elsewhere but there was a funny little image problem image in the side beside my logo but with your easy peasy tutorial it worked out perfectly!!! Thanks again for sharing how to make a button!
    Meagan, row house nest
    ReplyDelete
  82. Legend. I managed it. I have been blogging since FOREVER and have always paid someone to do this for me - and now I feel like a pro@

    Thank you SO much...xx

    Diminishing Lucy
    ReplyDelete
  83. Thank. you. sooooo. much! :)
    ReplyDelete
  84. Thank you so much for this tut, I just made a button for my blog and it was so easy with your tut on hand. If you like to see it the link to my blog is: http://www.agnarogn13(dot)blogspot(dot)com
    ReplyDelete
  85. Thank You SOOOOO much!! I tried other people's tutorials and they never worked!!! Yours worked the first time!!! Phew!
    ReplyDelete
  86. THANK YOU so MUCH for sharing this...;)
    ReplyDelete
  87. Thank you!! This was really well done and it worked! Thanks for being generous with this knowledge - you are awesome!
    ReplyDelete
  88. Newest follower, thank you for this tutorial!
    ReplyDelete
  89. OMG! Thanks for this super easy tutorial! I was able to use my logo and make a blog button, then make the grab box on the first try! I just became a follower. Looking forward to more awesome tutorials! Will be tweeting this as well!
    ReplyDelete
  90. Thanks for sharing the info! Just created a button for my blog, kjrskitchen.blogpsot.com
    ReplyDelete
  91. simply the best tutorial I have tried that made sense!!! Brilliant, thank you.
    ReplyDelete
  92. I tried using another tutorial previously and took my hubby quite a while to get it all figured out. Your's took me less than 5 minutes with no help from hubby! Thank you for clear, consise, and quick instructions. Check it out if you'd like at http://www.homemakerhow-tos.blogspot.com! Thanks again! :D
    ReplyDelete
  93. I linked to your tutorial on my post about my new button. Your's was the easiest I found. & I looked at a lot. You can check it out here: http://homemakerhow-tos.blogspot.com/2011/06/heres-your-chance-to-push-my-buttons.html.

    Anyway I was wonder if you could tell us how to make a button, without the code box? That would be helpful too!
    ReplyDelete
  94. Thank you so much it worked the first time. SWEET! :-)
    Check it out on my blog if you want and let me know what you think. I might have made it a little big.
    www.romizessentials.com
    ReplyDelete
  95. Thanks! Worked easily even for me, the tech impaired!
    ReplyDelete
  96. Thanks so much for your help!... Awesome Tutorial! :)
    ReplyDelete
  97. Brilliant. Thank you. There are no words to express my gratitude. You are awesome.
    Although I haven't designed my button I tested it out, worked perfectly.
    Nissa

    http://versatilejewelry.blogspot.com
    ReplyDelete
  99. This is just what I was looking for! Thank you so much!
    ReplyDelete
  100. Thank you so much for sharing your tutorial! I couldn't have done it without you!

    ~Lorraine
    Fabulous 4th Grade Froggies @
    vasquezfrogs.blogspot.com
    ReplyDelete
  101. I did it, finally! Thank you so much for your help and now you can
    grab my buttont
    ReplyDelete
  102. Thank you so much! I have been trying tutorial after tutorial, always getting confused and no results. Yours worked. Thanks!
    ReplyDelete
  103. Thank you sooo much for this tutorial! :) It worked perfectly the FIRST time!! And Im not very good with html codes stuff lol Thanks again for the tutorial :)
    ReplyDelete
  104. All I can say is :THANK YOU!!!!
    ReplyDelete
  105. Thanks so much for the tutorial. I tried other sites and they didn't work. Yours was very helpful and less frustrating than I thought.

    http://nicole-lovestoread.blogspot.com/
    ReplyDelete
  106. Thank you so much! this helped me a lot, i have been trying to make the link box for two days. :) I'm putting your button on my page!
    ReplyDelete
  107. you are amazing!!!!!!!! i have been bashing my brains in for i don't even remember how long trying to do this and BAM! 5 minutes i swear! thank you for sharing this information!!!!! you totally rock!
    ReplyDelete
  108. Thanks to you I just created my very first button! What a great tutorial. I'm your newest follower :)
    ReplyDelete
  109. Show appreciation you! I have word press, and am leaving to attempt to acclimatize it tonight. I was now annoying to shape it out previous nighttime!!
    ReplyDelete
  110. Thanks so much for this tutorial. Just used it to create a button for my Joyful Mothering Series.
    ReplyDelete
  111. I DID IT!!!! Thanks so much for the tutorial. I'm knew at all this and you have helped me achieve something I thought I couldn't do when I first started setting up my blog. Thanks again!
    ReplyDelete
  112. Thank you! I once tried this, my coding was wrong and I was too new back then to toy with it. So, tonight I figured I should try it again :) Thanks for directions and coding that work perfectly!

    Blessings,
    Mel
    Please feel free to stop by: Trailing After God
    ReplyDelete
  113. How do you put a blog button in a blog post instead of the actual blog? I want to use one for a giveaway..
    breanna_cross03@yahoo.com
    ReplyDelete
  114. THANK YOU! THANK YOU! THANK YOU!!! I've tried finding info on this a long time ago and got frustrated. I have put it off thinking it was going to be hard . . . but it was sooooo easy! less than 1 minute and I had it on my blog! Thanks!!!
    ReplyDelete
  115. thank you thank you thank you!
    ReplyDelete
  116. Thank you so much for this!! Your directions were super clear AND it actually worked! Much thanks!
    ReplyDelete
  117. Thanks so much! I had no idea how to do this before!
    ReplyDelete
  118. Thank you! That was so simple and easy to make with your tutorial!
    ReplyDelete
  119. This is the best tutorial I have EVER seen! FINALLY I have a button!
    Thank you!
    ReplyDelete
  120. thank you. you have no idea how much i appreciate this help. (:
    ReplyDelete
  121. thanks very good!
    The only one that helped with the button and the grab box!
    ReplyDelete
  122. IT WORKED!!! Thank you so much! I tried someone else's description and the code didn't work. Yours worked on the first try. : )
    ReplyDelete
  123. Yes! You are brilliant! At last I have a grab box!! Thank you so much!
    ReplyDelete
  124. Thank you for this post!! I just made my first "grab button"!! Yaayy!! http://swbeautifullife.blogspot.com/
    ReplyDelete
  125. derp, I'm really getting rusty at html, I forgot for the life of me how to do this. Thanks to you, problem fixed and I have a shiny new button code for my peeps. Thank you so much.
    ReplyDelete
  126. Thanks so much for this tutorial! It has helped me SO much! Happy New Year!

    -Christina
    Live.Laugh.Teach
    livelaughteach.blogspot.com
    ReplyDelete
  127. Wow! That was so incredibly easy! Thank you!! I think that seriously took me less than 10 minutes, and that includes the time it took me to create a photobucket account. THANKS! :)
    ReplyDelete
  128. THANK YOU! Finally after umpteen tries you've explained it simply!
    God bless!
    ReplyDelete
  129. this was very helpful thanks.
    ReplyDelete
  130. AWESOME!! YOU ROCK! Thank you so much!!!
    ReplyDelete
  131. The best tutorial so far! In just a few minutes I had it figured out! Thank you!
    ReplyDelete
  132. thank you thank you thank you...I tried for so long and this took 10 minutes. I am so happy to be following your blog.
    ReplyDelete
  133. Thank you so much for you help. This was a tutorial I could finally understand! Whoohoo!!!
    ReplyDelete
  134. YAY!!!! Thank you so much! I am so stoked to have my own button. All thanks to you. By far the easiest blog related tutorial I have come across since I started my blog a few months ago! Go ahead! Grab it!!! Much love!!!!
    ReplyDelete
  135. Thank you...you made it so easy! Words cannot express how much I appreciate your help!!!!!
    ReplyDelete
  137. You know every one says they offer a step by step approach to do this, but you actually give every little step! Thank you SO MUCH! I really did not have the money to pay someone and really why not learn something new?
    http://passionateencounters.blogspot.com/
    ReplyDelete

I love to read your comments, keep them coming! Please have your email set to public on your profile so I can comment back to you!

Subscribe to: Post Comments (Atom)