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

  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

  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

  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

  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

  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

  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)