How to create a blog button

An easy step by step tutorial for creating a functional blog button for your site

how to create a blog button

A blog button can be great tool for getting your name out there. Whether you’re swapping with another blogger, or someone just wants to share your button to let everyone know they enjoy reading your blog.  In any case, if you don’t have a grab box on your site you’re missing out on an excellent opportunity. In order get started you’re going to need an account with an image hosting website. Two great free sites are and Once you have that all set up we can get started. The end product will look something like this:

Creating My Own Career
<div align="center"><a href="" title="Creating My Own Career"><img src="" alt="Creating My Own Career" style="border:none;" /></a></div>

Step 1: The first thing you’re going to have to do is create the image for your blog button. Personally I use Adobe Illustrator but there are a bunch of free online image/photo editing programs that will work just as well. One I like is It’s free and has really great features to make your button look nice. I’m not going to go into detail about how to make the image but I suggest you create something that represents the style and tone of your blog; something that grabs the viewers attention and makes them want to click on it. You can make your blog button virtually any size you’d like, however I notice that the smaller buttons generally get “grabbed” more often. Some common sizes are 125×125 pixels, 200×100 pixels and 200×200 pixels.

blog button sizes

Step 2: Next, upload your image to your hosting website. Make note of the image URL. It should look something like this -

Step 3: Now you’re going to have to insert your information into a piece of code that will display your button. Fill in the highlighted text in the following code with the your own information.

<!–grab button header –>

<div style=”width: 150px; margin: 0 auto;”>

<img src=”Image URL” alt=”Grab button for your blog name” width=”width in pixels” height=”height in pixels” />

<!–end grab button header –>

<!– button code box –>

<textarea rows=”15″ cols=”20″>

<divs3″>your blog name button” style=”width: 150px; margin: 0 auto;”>

<a href=”your blog url“>

<img src=”Image URL again” alt=”your blog name” width=”width in pixels” height=”height in pixels” />


</div><!–end button code box–>


</div> <!–end grab-button –>

Step 4: Now all you have to do is paste that code into the html of your blog wherever you want your grab box to be displayed. And that’s it!

Did you follow along and create your own blog button with a grab box? Leave a link to where you display it and I’ll grab it and put it on my sidebar.

Subscribe to Creating my own career by Email

Related Posts

Add a Facebook Comment


  1. I just created mine! Thank you! I show it at the bottom of my sponsor page:

  2. Thanks so much for this! I’m displaying mine here (just scroll down a bit, it’s in the side bar) :) :)

  3. When I use photobucket and copy and paste my URL it doesn’t have jpg behind it it has like something png.. I think. I tried for hours doing this last night and couldn’t find out what I did wrong. My picture was there (link when you click on the picture), the frame of the box was there… but nothing in it box. :(


  1. [...] keyword is most relevant to your posts content. For example a post I wrote in the past was about how to create a blog button.  In this case, clearly the most relevant keyword would be “blog [...]

Speak Your Mind



Get every new post delivered to your Inbox

Join other followers