How To Make A Button and Grab Box - #BlogChallenge

Day #29 of the Summer Blog Challenge, here we go! I hope at least someone finds this useful! :)

Going Green with the Grizls

Above, we have a button. They are so fun and they are great ways to help bloggers and businesses link up! But, how in the world are they made!?!?

I struggled as almost everyone knows, because I was blasting it all over Facebook about how hard button-making was for me! I've been out of college for almost 5 years. I have a MAC Powerbook G4 [old school] and a Dell desktop from 2003. Between the two machines, I have semi-functioning blogging equipment! But, that's another post entirely! Now, (finally) I have a new computer. (Sigh of relief!)

** This tutorial is for users of Blogger and Photobucket.** I do not know what I'm doing with Wordpress, Picasa, etc. but they should be similar. I hope you will take from this what you can to help you make a button!

First you need to upload a square. Any square will do. Mine is white for the purpose of my event. I also made a neon green one for my blog button this way.  You can make yourself a square in Paint if you need to. Or, you could find one out in cyberspace. Careful about copyrights and such though. Upload this square to a photo-editing site. I originally used picnik which is now closed, but I do recommend Photobucket, Pic Monkey, & Aviary. Add your text, stickers, effects, etc. Once you have it how you like, under 'basic edits,' resize the photo to 125x125. Facebook and Twitter require 180x180. Then, click 'save and share.' Save it somewhere you will find it easily.

Go to Photobucket or a similar photo-sharing site. I like the straightforward HTML and links that Photobucket provides. It makes it easier, you will need it in a minute. Upload your new button to Photobucket. Then, to the right and just below your photo, you will see some HTML code options. Click the 'direct link'. It will copy for you.

Come back to Blogger [old dashboard instructions]. Under Design --> Layout --> click Add a Gadget --> JavaScript/HTML

Paste your Photobucket 'direct link' into the large body box of this window. (Just so you don't misplace it!)
Here is the HTML for the Canada Day Event grab box, it will be my 'sample' -- be sure to change the colors to fit the links you will be making to suit your blog!

<div align="center">
<a href="" target="_blank"><img alt="Thanks, Canada!" src="" /></a> </div>
<div align="center">
<textarea cols="14" rows="4">&lt;center&gt;&lt;a href="" target="_blank"&gt;&lt;img alt="Thanks, Canada! " src="" /&gt;&lt;/a&gt;&lt;/center&gt;</textarea>
Change the bold purple to your blog URL.
Change the bold green to the direct link from Photobucket that I told you not to lose!
Change the bold orange to the message that you want to show readers when they hover their mouse arrow over your fancy new button.

Once you've made the changes that I listed, go ahead and SAVE the HTML gadget and it will appear in your sidebar.

Here is how the button and grab box will look when you are finished (well, how my button looks!):

Thanks, Canada!
Again, Make sure to change all of the necessary parts, and voila! You have a button. :)

Please feel free to post my BLOG BUTTON, found at the upper right-hand side of my blog home page to your blogroll or blogs you love!  Post my button on your sidebar--then you won't have to type at all to venture on back here and enter my giveaways, read reviews, and follow along with the adventure! Plus, having my button on your sidebar gets you 10 bonus entries into all my giveaways!


  1. Thank you so much. This is the only code I have found so far that works for me!