Easy Way To Create Blog Button Code

Are you familiar with blogs that encourage you to “grab their button” and place it on your blog? This is often used in blog hops, link parties, or for advertising purposes during a giveaway for additional promotion. This tutorial will show you how you can create html button code for your blog.

Grab My Button Code Generator

As always, I searched for an easy way to do this for my own button, and stumbled upon the Grab My Button Code Generator. This process is so easy, that I wanted to share it with you!

Step 1:  Create an image that you would like to use as a button. Most buttons are made as a square and are 125 x 125 pixels. I used Adobe Photoshop to create my button, however free softwares, such as Gimp or Picasa, also work great for this task. When you save your button, make sure to use your “save for web” option to compress the image down to the smallest size so that it will load faster when viewed over the Internet. This is important to do on blogs and when sharing images because all of our readers don’t have the same speed of Internet connection and we don’t want people to leave the blog because they have to sit and wait for images to load.

Here is a picture of my button and the finished product:

<div align=”center”><a href=”http://www.midwesternmoms.com” title=”Midwestern Moms” target=”_blank”><img src=”http://midwesternmoms.com/wp-content/uploads/2011/04/newmwm.jpg” alt=”Midwestern Moms” style=”border:none;” /></a></div>

Step 2:  Upload the image to your blog’s media library. After you are complete with uploading your image, you will be given the image URL. This is where the image is stored on your site. You will want to copy this URL by using “Control C” on your keyboard or your copy/paste functionality from your mouse. I use WordPress, so this is an example of what I see after I upload my image to my media library.

Step 3:  Visit the Grab My Button Code Generator link. Here you will input all of your information. For “Container Type” I chose “Text Area” and I left the default colors. I also always choose to open links in a new window from my blog. This is simply a personal preference. When you click the “preview” button you will see your code has been generated. Choose “Get Code” to then display the code to copy and paste over onto your site.

Step 4:  If you wish to add the button and code to your sidebar, add a new “text” widget. You will then paste the html that you just generated from the website into the widget and save.

If you notice in my code, I have updated the original height and width to be 125px. This is so that it will fit in nicely on my sidebar. You are welcome to adjust the code as you like so that it fits where you want it to in your site.

Did you find this tutorial helpful? Be sure to let me know if there are any blog tips and tricks out there that you would be interested in seeing a tutorial for, please contact me and let me know.