Thursday, March 3, 2011

How to Make a Blog Button Grab Box

When I first made a button for my blog it took me FOREVER to figure out how to do the html code to get a snazzy little grab box underneath it.  Hours of googling, tweaking, googling, tweaking, googling and tweaking.  So I'd like to share what I learned with you so you can hopefully keep your googling and tweaking to a minimum...

First off you're going to need a button.  This is a fancy name for a jpg.  You can use a photo or text or a photo and text, or some graphics, or really, anything.  It's common to make it about 125 or 150 pixels square.  You can do this when you design it (I use elements, but you can use any editing program you like), or I'll show you how to resize it later if you need to.  OK, so here's my button:

Next up you need a photobucket account.  Don't have one?  Go get one.  I'll wait.

Ok, so upload your button to your photobucket account, then click on edit, resize.  (If you need to resize).
Here you want to click on "keep proportions" and then input your new size (I put 150 x 150).
Click "apply", then click "replace original" (down at the bottom).


You can do lots of other editing here in photobucket if you like.
I went to edit, decorate, borders, and added a border.
Remember to click on apply, then replace original.


When you are happy with how your button looks you need to copy the "direct link" code.  You're going to need this in a minute.


Here is the magic html you need to post into your blogger sidebar:

<div align="center"> <a href="http://andthenshesnapped.blogspot.com" target="_blank"><img alt="and then, she {snapped}" src="http://i77.photobucket.com/albums/j52/drexgal/buttonbutton.jpg" /></a> </div> <div align="center"> <form><textarea rows="4" cols="14"><center><a href="http://andthenshesnapped.blogspot.com" target="_blank"><img alt="and then, she {snapped}" src="http://i77.photobucket.com/albums/j52/drexgal/buttonbutton.jpg" /></a></center></textarea></form> </div>

Change the red to the link to your blog.
Change the green to that direct link you copied from photobucket.
Change the purple to the text that you want to show when somebody hovers over your button.

Then you need to post that code into an html gadget on your sidebar.  And here's what it will look like!


and then, she {snapped}


Have fun making buttons!

xxoo
Rachel
http://andthenshesnapped.blogspot.com/

38 comments:

  1. Thanks! I doubt I would have ever figured that out on my own!

    ReplyDelete
  2. Thanks for the tutorial. I will have to try it soon.

    ReplyDelete
  3. Thanks so much!! It's working perfectly!!

    ReplyDelete
  4. hmmm, I'll have to try that one, all other other similar ones I've tried didn't work, and I gave up. :) Of coure that means I need time to make a new button.....are yoiu handing out time with this post? ;)

    ReplyDelete
  5. THANK YOU! ive been trying to figure that button thing out for FOREVER!

    ReplyDelete
  6. Thank you so much! I have been needing to know how to make a button!!
    Emma
    http://redheadedpenguin.blogspot.com/

    ReplyDelete
  7. Great job on this Beginners Guide to Button Making tutorial, Rachel! I never even thought about using an online photo editor like Photo Bucket to add a frame to buttons. You can do this on PSE too but it's complicated. And for people who don't have the software, it's awesome to have another option.

    ReplyDelete
  8. I have been meaning to ask this for AGES! Yay! Thank you!

    ReplyDelete
  9. Hey ladies! I'm soooo glad that you all found this useful! I hope you use it and get yourselves some new buttons up!

    xxoo
    Rachel

    ReplyDelete
  10. Well since you made it looks so easy I will have to try this. Thanks!!

    ReplyDelete
  11. I am curious does this work for a post in blogger. For example if you were to use it for a blog hop?

    ReplyDelete
  12. Thank you So Much. It took me a few minutes, but I did it. Yeah.....

    ReplyDelete
  13. Thank-you so much!! I never thought I would be able to make a button like that on my own! Super easy!

    One thing: Instead of using the "Direct Link" on photobucket, I had to use the "Thumbnail version".

    ReplyDelete
  14. Direct link wasn't working, but I used the jpg portion from Direct Link. Thanks!

    ReplyDelete
  15. Thank you, thank you, thank you! I was totally lost using code from another website...but your code worked perfectly. You rock!

    ReplyDelete
  16. Thank you for sharing this! I've always wondered how the cool kids do it. Now i need to just go make myself a button!

    ReplyDelete
  17. Just found this tutorial through a google search, thank you so much!! I have been trying to do this forever with no luck, your tutorial worked right away. Many Many Thanks!!

    ReplyDelete
  18. Just came across this and it was the easiest tutorial I could find!! Great job, you really are a saint :)

    ReplyDelete
  19. just used this successfully! Thanks ateachersbagoftricks.blogspot.com

    ReplyDelete
  20. Thank you so much! I have been trying to figure it out for so long. It's pretty simple! Thank you!

    ReplyDelete
  21. Thank you SOOOOOOOOOOOO much. Your instructions were so much better than other ones that I found.

    ReplyDelete
  22. Thank you so much for this~ I made my own button in a matter of about 10 minutes and it works!!!! This was by far the easiest tutorial I have come across. I am going to give you props on my blog!

    ReplyDelete
  23. Thanks so much for this tutorial! There is NO WAY I could have done this without you. You ROCK girlfriend! Check out my button. http://www.stampshacklady.com/

    yeah!!
    Christie

    ReplyDelete
  24. I am such a tech novice. A friend linked me here to learn how to do a blog button and it was so easy! Thank you thank thank you!!! I am now the proud owner of a blog button :D

    ReplyDelete
  25. I have been trying to figure this out for so long I was seriously having dreams about it, lol. Thank you so much!

    ReplyDelete
  26. OH GOD THANK YOU SO MUCH!!!!! I SPENT HOURS SLAVING AWAY TRYING TO FIND OUT HOW!!!! :D

    ReplyDelete
  27. That was THE BEST tutorial for buttons! Thanks you so much! I love the button to hover over. So cool! Thanks again!

    ReplyDelete
  28. Thank you. Yours was the most straightforward tutorial on the HTML that I have found.

    ReplyDelete
  29. Ohmygoodness! You are so wonderful! It worked like a charm! I've been trying to get mine in for.ev.er!

    ReplyDelete
  30. Thanks a MILLION! I started reading about 5-7 other 'how-to's' but they didn't simplify if enough or at least didn't speak to the way I learn. I tried for a month. (and quit lots of times!) Your tutorial took me all of ten minutes! Super-thanks! :)

    ReplyDelete
  31. I got everything BUT the picture! Help!!!

    ReplyDelete
  32. I know this post is old but I have to tell you: I did everything and it worked. THANKS SO MUCH!!!! It was so easy your tutorial was very very very very good!
    Thanks!
    (I recommended it on my blog :)

    ReplyDelete
  33. This was EXTREMELY helpful and easy to follow. Thank you so much!

    ReplyDelete
  34. I am dying over here trying to figure this out. Does this make just the grab box or should I also see the button as well? Or do I need to use the add gadget to just place the picture of the button above my grab box?

    ReplyDelete
  35. And THANK YOU!!! I've been working on this all afternoon via two different blog post tutorials. I did yours in ONE... ONE try!! Thank you so much!!

    Definitely following you now! ;)

    Regina

    ReplyDelete
  36. Your tutorial is the only one that has worked for me! And it was perfectly straight forward which is exactly what people need so thank you!!!

    <3 Rae

    http://dramaticatticboutique.blogspot.com

    ReplyDelete

❤ Something lovely to say?