Tutorial: How To Create Your Own Grab Button and Code | Toronto Teacher Mom

Tutorial: How To Create Your Own Grab Button and Code

Sunday, April 04, 2010

Just a few days ago, I was overwhelmed with a sudden desire to design my own Grab Button and figure out how to add the special code to my Blogger template. So I googled and browsed, and settled on the instructions I found on the blog of a fellow mom blogger - All About Kimberly. She explains the steps in detail on how to add the "Grab My Button" link for WordPress users. I figured it would be the same if not similar using Blogger. So I followed her steps and entered the code into a text box widget (I didn't think of ever putting HTML code into a text box before. I have always used the HTML/Javascript widget in Blogger.) The only glitch I noticed was that, by copying and pasting directly from her post into the text box, the quotation marks mysteriously appeared twice, one set slanted and the other vertical. I didn't think to read all the way to the end of her post that suggested you copy and paste the code into Notepad first and then copy and paste from there into the widget. I just manually edited my quotation marks and it worked. Thanks, Kimberly!

Now here is my latest discovery that I'm so excited to share with you! I really wanted a button that matched my blog template, which is a wonderful freebie designed by the talented April at April Showers Blog Design. [Here's the thing... I'm not sure how copyright works and I suppose I could google that info, too. But I will state that the template is not my own and therefore I cannot take full credit for the design of my button. And if someone can clarify this for me, please don't hesitate to do so because I don't want to infringe on any copyright laws here. I should probably pre-order The Blogger's Guide to the Galaxy: Everything You Wanted to Know About Blogging (But Were Afraid To Ask)]

Update: I emailed April about using a snapshot of this template and she said it was fine as long as I keep her link on my blog.

This is what I did:

1. I loaded my site in a web browser (I usually use Firefox) and on my Mac, I took a screen shot. You can do this by simultaneously pressing the Apple Key, Shift and 4. You will then be able to select an area anywhere on the screen and, as soon as you release the mouse button, it takes a snapshot and saves it onto your desktop with the time stamp. I chose to grab a shot of the flowers in the header. In Windows, you'd use the Print Screen or Prt Scr key but you'll probably need to crop the image to narrow in on what you'd like to use for the button background.

2. Upload the snapshot to an online photo service such as Photobucket. I use Flikr but I'm quickly running out of storage space.

3. Next, you need to resize the image to 125 x 125, . In Flickr, you would click on Edit Photo. This launches the editing tool called Picnik. Now click on Resize to enter the dimensions.

4. Finally, edit your image by adding a border and any text you'd like. Continuing from step 3, you would simply click on the Create tab to take advantage of all these and other neat options available in Picnik.

5. Once you have saved the image, you'll need to grab the photo's url to be used in your "Grab My Button" code. In Flickr, you'll need to click on All Sizes.

This is how mine turned out after creating my button image and following Kimberly steps:

I love how it turned out! What do you think?

You Might Also Like


  1. Looks good! I have been trying to figureo out how to do this for some time. Thanks for the information. When(IF) I get the time to try this I will let you know how it turns out.

  2. I was wondering how people made those buttons! I'll make one.. one day LOL

    I've added your button to my blog :)

  3. Looks great (and I added it to my buttons page too)!


Thanks for taking the time to leave a comment here on Toronto Teacher Mom. Hope you have a great day!

Follow on Facebook

Follow on YouTube

Follow on Pinterest