Jan 31, 2012

Make a blog button with a grab box, easy tutorial!

So I decided it was about time to get myself a blog button! {Feel free to swipe it from the sidebar!}
However, there was one problemo with this plan. A lot of the online blog button tutorials are waaaay more complexicated and confusilating than they need to be.
Fortunately I have made a blog button with a friend before, so I got a bit of help from her, and then figured out some of the bugs she had.
So, while most of you probably already know how to do this, I decided to post a tutorial anyways. Just because if you don't know how to do it, finding a good tutorial is a pain


1. Design your button. Take a photo, and crop it into a square. Mine is 150 by 150 pixels. That will give you a good size reference. Add your blog title, logo, or whatever you want. You can use pretty much any photo editing program. I used Photoshop to create my button:

2. Post the photo somewhere online. You can post it on flickr, photobucket, your blog, etc. If you do it on your blog, you will have to actually post it. Once it's posted, you can click the photo to view it. Then right click over the photo. There should be an option that says "Copy image URL". Open a word document and paste the URL there for future use.

3. Go to your blogger layout, and click "add a gadget". Add the one titled "Configure HTML/JavaScript."

4. Make a title (mine says "Grab my blog button!"), and then paste this code into the actual gadget:

<center><a href="BLOG URL" target="_blank" title="BLOG TITLE"><a href="BLOG URL"><img src="IMAGE URL" /></a></a> <center>
<center><textarea id="code-source" rows="3" cols="13" name="code-source"><center><a href="BLOG URL"><a href="BLOG URL"><img src="IMAGE URL" /></a></a></center></textarea></center></center>

5. Fill in your own information. For example, I would put http://paperraindrops.blogspot.com/ as my blog URL, and Paper Raindrops as my blog title. For the Image URL, go back to your word document and copy and paste that in. 

Note: Be sure to fill in your information very carefully. If you delete so much as a quotation mark by accident, it could mess up the whole thing! 

6. Hit save. Now view your blog and hope it works! It should look like this, with a grab box underneath:

7. To test the grab box, copy the HTML from under your new button. Now make a new post draft. Click the HTML button on your draft (right next to the "compose" button), and paste the grab box HTML in. Now click compose. If your grab box HTML works, you should see your blog button photo! Now you can delete that draft, knowing that the code will work for anyone who wants to share your button.

Hope this works for you! 
Let me know if you have any questions!


  1. Thanks for the tutorial! Definitely going to make one of my own!

  2. You is so smart. I like it. Plus now I know how to do something that has been confusing me. Yay!

  3. Thanks so much... i did mine!!! :D

  4. I was looking for a blog-button tutorial -- and this worked!! Thanks so much for posting it. Super simple. Very understandable. Now my blog has a new snazzy button AND a html drop box. Thank you!!!


Thank you for commenting!