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:

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.
Jen says
Great tutorial. I just recently found that website too and it’s a great tool! Thanks for sharing! 🙂
Leslie Nicole says
Thank you! Can’t believe how long I’ve been trying to find something on this! xx
Sarah says
Thank you so much for this! It helped me finally get a button code on my blog!
Sona says
Thanks for your great tutorial. I was stuck up with code generating process, but this tool becomes handy.
Rachel says
Thank you! This was very helpful, I was finally able to make a blog button…yay!
Nicole Radtke says
Hi Amanda,
I just have to say a big THANK YOU for your help here on the button badge. I swear I have been trying to figure out this darn thing forever! I finally figured out what I was doing wrong, until you showed that you have to upload the image to your wordpress media library. That was the missing step that you totally helped me with! I AM SOOOOO THANKFUL to you!
~ Nikki
amanda says
You are welcome! Glad you got it to work!
Kim, KC Bakes says
Thankkkk youuuuuuuuuuuuu. This was by far THE most helpful information I found specifically for WordPress users!
amanda says
You are welcome!
Jennifer says
Thank you for the great tip! It worked perfectly.
Natalie says
Thank you so much! This helped a lot!!