How To Make A Blog Button

In Your Guest Writers on July 20, 2010 at 9:18 AM

by Apryl of Christian Clippers

If you have a blog, it’s extremely important to have a “button” for your blog. A “button’ can help spread the word about your blog, it’s like free advertising.

I’m going to show you an easy way to make your own button. You don’t have to have any design experience to do this. If you have your blog professionally designed a “button” is usually included.

We will start with a 125 x 125 button. This is the standard size for most blogs and their sidebars.

First you need to decide what background you want for your button. You can use a plain color or even crop a photo. Keep in mind that your background should be fairly light so your font shows up on it. You can get Free scrapbook pages on DigiScrap or Free photo’s online, just “Google” it and make sure it’s not copyrighted.

Once your found your desired background, save it and open Picknik. Picnik is a really easy photo editing program and best of all it’s free. Now upload your background to Picnik.

Now that your background is uploaded, click resize and change the dimensions to 125 x 125. Increase the “zoom” percentage on the bottom right of your screen so you can see your background better. It may look blurry but it’s just because of this size.

You can now select the font and design your “button” with stickers or whatever you’d like.


Once you’ve designed your button the way you want it, save it as a .jpg.

Here’s how you get it on your blog:

First, you need to host your “button”. I recommend using the free hosting service Photobucket. Go to Photobucket (register if you don’t have an account) and upload your button. Once your button is uploaded, Photobucket will assign it an html code.

Here is what the coding needs to look like to make the “button” visible on your blog:

Replace the red text below with your information.

<center><a href=”YOUR BLOG URL” target=”_blank”><img border=”0″ alt=”YOUR BLOG NAME” src=”HTML CODE FROM YOUR BUTTON ON PHOTOBUCKET“/></a></center>

This is how my button code looks:

<img border=”0″ alt=”Christian Clippers” src=””/>

Now that you have the html code, just copy and paste it into a widget on your blog. You now have a button!

If you want to create your button with code underneath, here’s how:

Replace the red text below with your information.

<center><a href=”YOUR BLOG URL“><img border=”0″ alt=”YOUR BLOG NAME” src=”HTML CODE FROM YOUR BUTTON ON PHOTOBUCKET“/><textarea id=”code-source” rows=”4″ cols=”13″ name=”code-source”>YOUR BLOG URL” target=”_blank”><img border=”0″ alt=”YOUR BLOG NAME” src=”HTML CODE FROM YOUR BUTTON ON PHOTOBUCKET“/></a></center></textarea>

Just copy and paste this code into a widget on your blog and you will get this:

Christian Clippers

These are great because people can just copy and paste the code underneath into their own widget.

We love this tutorial and are soooo thankful to Apryl at Christian Clippers for sharing.

If you have Microsoft Publisher or Power Point it’s also super easy to design an image to use for your blog button.  Simply save your creation as a picture (jpg). then upload your image to Picnik for additional editing and resizing.  I found that adding my text in Power Point was a lot easier than using Picnik’s text feature.  Play around with the software, do a bit of experimenting, and then use the techniques that work best for you.

Here’s our “freshly pressed” button

“Grab it”, in the middle column at the bottom of our blog.  🙂

Please feel free to contact Apryl or me (here, in comment section or at  if you have questions. – Enjoy!!!

Additional Resource:

Buttons, Bows and Badges for Your Blog

  1. I tried this, and it didn’t work. I get the scrolling box, but no picture and the link in the box doesn’t show up when I tested it.

  2. Hi There! Thanks for stopping by.
    I’m sorry to hear you’re having trouble with Apryl’s tutorial. I’m not sure where you’re stuck though. Is it with DigiScrap, Picnik or Photobucket? If it’s with DigiScrap, or Picnik, I found it a lot earier to design my image using MS PowerPoint. If you don’t have PowerPoint you can use Office Suite (the download is FREE). :).
    Please let me know and I’ll do my best to help.
    – Nikola

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: