How to make a blog button with a grab box

It’s time for another New year, New Blog installment.

New Year New blog @ Measured by the Heart

 This time I am going to show you how to make a blog button with a grab box.

What is that exactly you say?  Well a blog button is a little graphic that people can click on and it brings them to your blog.  Like the one above that says New Year New blog etc.  The grab box is the box with a bunch of garble gook in it. That is code that you can copy and paste onto your blog.  If you do that, it will show only the top image and when someone clicks on it, It will take them to my blog here.  Make sense??

Step 1. Make your blog button image.  I like to make mine 125 x 125.  That is a pretty good size overall.  Some people make them bigger but I don’t like that.  Have you ever seen an oversized button that is hanging off of someone’s sidebar because it didn’t fit?  I like things to be organized and pretty.  So if someone’s blog button is too big, I sometimes won’t use it.  You definately don’t want people not using your button because of that.  And you cannot say what size someones sidebar will be.  So stick with 125 x 125 and you should be very safe.

It’s a good idea to keep it simple and uncluttered.  It is only a small area and you don’t want people squinting to read everything or confused  with it.  Put your blog name on the button.  Usually people see these as they are scrolling through a blog so it needs to be something that catches the eye quickly with out too much fuss.

Step 2. Ok so now you have made your image, what to do with it.  You need to upload it somewhere.  I like photobucket.  You can create a free account with them and they are easy to use.  My friend uses Flickr.  That works for her.  If you are on WordPress, you can upload it to your media library.  The point is that you want to get a link to that image. On photobucket it is the direct link.

Step 3. Here comes the coding.  Copy and paste the following into a blank document:

<div align=”center”> <a href=”YOUR BLOG URL HERE target=”_blank”><img alt=”YOUR BLOG NAME HERE” src=”DIRECT LINK TO YOUR BUTTON IMAGE HERE“/></a> </div> <div align=”center”> <form><textarea rows=”6″ cols=”20″><center><a href=”YOUR BLOG URL HERE target=”_blank”><img alt=”YOUR BLOG NAME HERE” src=”DIRECT LINK TO YOUR BUTTON IMAGE HERE“/></a></center></textarea></form> </div>

You then need to replace all the colored text with the required information. So everything in Pink gets replaced with your blog address.  Everything in Orange gets replaced with the name of your blog.  And everything in Blue gets replaced with the url to your image.  {this is from step 2}. 

Step 4. Take the code with all the colors replaced with the relevant information.  Paste it into your blog as html code.  And viola you have a blog button with a grab box.  You can use this on your sidebar, in your posts, on your pages.  Pretty much anywhere you can put html.

This can seem confusing and daunting, but if you follow the steps you should be ok.  If you have any questions please feel free to leave me a comment or email me.  I’m happy to help.

If you’d like the chance to win a free blog button for your site, you can enter my January Blog Design giveaway.  And as always, if you want me to do them for you, I design buttons for $10 and you can find more information by visiting my blog design site. {which isn’t designed very well and I need to update it.}

Hope this helps you guys out.  Thanks for reading!!


  1. Thank you for this tutorial! I was just wondering how to do this, and I love that you’ve made the instructions so easy to understand! One question I had was, how to do you make your image in the first place? Is there a particular program to use, etc?
    I found you on Blogelina, and will definitely be checking back here again!

Speak Your Mind


CommentLuv badge