Tutorial: How to Make a Blog Button

In order to be a successful blogger, you have to brand yourself and your blog. There are a million blogs and websites out there. What makes your blog different? Why should visitors take the time to read yours?

Creating a blog button is the perfect way to brand your blog. It promotes your blog’s name, look and feel, and mission in one simple image. You will use your unique blog button on blog hops, blog directories, Entrecard, on your sidebar, etc. When another blogger grabs your blog button and posts it on their sidebar, it opens you up to new visitors and more followers. In a nutshell, your blog button is your main advertising tool.

(Newbies – a blog button is a hyperlinked image or logo that takes a visitor to your homepage when it’s clicked on.)

To drive traffic to your blog, you’ll want to design and make a blog button that makes visitors want to click. Mommy bloggers create the most stylish blog buttons. I’ve found that the most successful mom and parenting bloggers have well-designed blog buttons. You can hire a graphic designer to create a blog button for you for a minimal fee, or you can design it yourself.

This tutorial gives you the steps involved in:

• How to make a blog button.
• Creating a code box that allows other bloggers to grab your blog button and place it on their blog.
• How to add and display the code box and make a blog button using WordPress and Blogger platforms.

How to Make a Blog Button – Basics

The standard blog button is 125px by 125px. You can choose a size larger than this, but don’t go larger than 150 pixels wide. Most sidebars are only 200 pixels wide, and if you use a larger blog button, the sides of your button will be cut off. For this tutorial, I am sticking to the standard size: 125 x 125.

Step 1: Design and Create Your Logo

In order to design and make your blog button, you will need access to an image editing software – such as Photoshop. Unfortunately, for many beginning bloggers, Photoshop is too pricey. There are a number of free image editing software programs available. One of my favorites is Picnik – which is a free online photo editing site, owned by Google, that allows you to easily add text, stickers, frames, etc. to photos or images. (I highly recommend Picnik to beginning bloggers due to its ease of use.)

For more advanced bloggers – if you’re familiar with Photoshop, but you don’t have a copy of Photoshop, consider using Pixlr – another free online photo editor that has many of the functions that Photoshop uses. You can crop pictures, resize them, free transform, add text, add shapes, and more. I absolutely love Pixlr.

For this tutorial on how to make a blog button, I will be using Picnik. (It’s easier to use for new bloggers with no design experience.)

Creating a Blog Logo in Picnik – Step by Step with Screenshots

1 – Go to Picnik.com. And upload your photo. (You don’t need to register to use this free online editing program.)

2 – After you’ve uploaded the photo, you will need to crop your image into a perfect square. It doesn’t matter what size your image is. At the top of the screen, you will see the word “crop.” Click on Crop. (See the screenshot below).

In the drop down menu, you’ll want to choose “square.” Click on the square to move it where you want. Click on “OK” at the top to crop.

3 – Once your image is cropped, you will need to resize your image to 125px by 125px. (This is the standard size for most blog buttons.) To the immediate right to the “Crop” button at the top, you need to click “Resize.”

Resize your image to 125px by 125px. Hit OK.

4 – Next, click on the “Create” tab (to the right of the “Edit” tab) at the top of the page. This is where you can add effects, text, stickers, frames, and etc. to your image. When you’re working, to make your image larger, adjust the “Zoom” on the bottom of the page.

5 – Play around and embellish your image in any way that you want. I recommend placing your blog’s name somewhere on the image. When you’re done, click on the tab “Save & Share.” You’ll want to name your file and save the photo on your computer.

Step 2: Upload Your Image to Your Server

After you have designed and created your blog button image, you need to upload your image to your image hosting account. If you have a Photobucket account, upload it there. Since I used Blogger as my original blogging platform, I used Picasa Web Albums.

Once you upload the image, you can easily find the URL code for the image. In Picasa, you simply need to right click and select “Copy Image URL.”

The image URL should look something like this: “http://www.YourDomain.com/ButtonImageName.jpg” - Keep the image URL handy. You are going to need it.

Step 3: Create the Code for Your Blog Button

Pay close attention – this next step is a bit technical. I am going to try to explain it the best that I can. (If you have questions, please leave me comments so that I can tweak and edit this post to help others.)

This is the basic blog button code. (This code does not contain the grab box for the blog button. This code is the HTML code that you will use when you’re writing a blog post and you want your blog button to appear within the post, or when someone else is writing about your blog and they want your blog button to show up. This is the code that shows up inside the “Grab my Button” box. If you want to make a grab box for your blog button, skip this step and go onto the next. For most bloggers, they do NOT need to follow this step.):

<a href= “http://www.YourSiteURL.com”><img src=“http://www.YourButtonImageURL.jpg” /></a>

You should replace the “YourSiteURL” and “YourButtonImageURL” with your own URLS.

The <a href=“….”> portion of the code is the page that you want visitors to land on when they click the button.

The <“img src=“….”> stands for “image source.” It’s the location of the image that you want to use. This is where you copy and paste your image URL.

*** Important: *** Don’t forget to end the code with </a>. That’s how you close the code.

In my own blog, this is what my blog button code looks like.

<a href=”http://www.mypregnancybaby.com“><img src=” http://www.mypregnancybaby.com/wp-content/uploads/2011/01/blog_button.jpg ” /></a>

When anyone posts that code on their sidebar, or in a blog post, it looks like this:

(I hope that explanation makes sense. Please let me know if it doesn’t!)

Step 4: Make your “Grab my Blog Button” Box Code

Now that you’ve created the code for your button, you need to create a “Grab My Button” Box so that other bloggers can grab your code and promote your blog on their site. This code includes the “Grab my blog button” box, as well as your blog code. For most bloggers, this is the ONLY code that they need to know.

This code is a bit tricky, but I’ve tried to explain it the best that I can. There are two parts to the code:

1 – Your image
2 – The grab box, where your code appears for others to grab.

Here is the HTML code for the entire thing.:

<img src=“http://www.YourButtonImageURL” alt=”YourSiteTitle” /><div style=”width: 125px; height: 125px; overflow: auto; border: 1px solid #666666;”>&lt;a href=&#34;http://www.YourSiteURL.com&#34; target=&#34;_self&#34;&gt;&lt;img src=&#34;http://www.YourButtonImageURL&#34; alt=&#34;YourSiteTitle&#34; width=&#34;125&#34; height=&#34;125&#34; /&gt;&lt;/a&gt;</div>

It’s a very confusing code, and all the strange symbols – such as &#34 stand for quotation marks. (For some reason, WordPress and Blogger can’t pick up the quotes that should go around the YourSiteURL, and they transform them into &#34.) A very confusing code, but it works.

Here’s what the finished product should look like:

Copy and paste the code I’ve given you into Notepad, or TextEdit (if you are using a Mac). Replace all the URLS with your own.

Step 5: Copy and Paste the Code and Use it on Your Sidebar

If you are using a self-hosted WordPress blog, you need to go to Appearance → Widgets → Text. Copy and paste the blog button code.

If you’re using Blogger, underneath the “Design” tab, you will need to “Add a Gadget.” Then scroll down until you find “HTML/Javascript.” Click on that and copy and paste the blog button code.

Save your work. Test the code to ensure that it works properly. It should.

Troubleshooting Problems:

If you are having problems with the blog button code, check your quotation marks. Each and every URL needs to have quotes before and after it.

If you’re still have issues, your quotes may have been changed to “smart quotes,” which are curved quotation marks. HTML hates smart quotes. HTML wants straight quotes. Unfortunately, this means, you will need to go back to the blog button code and carefully delete every single quote (“) and re-type it. There are a total of 6 in the code that I’ve given you.

Good luck. Please let me know if this tutorial on “how to make a blog button” was helpful. I’ve tried to make it as simple as possible. I may do a video tutorial when I have more time.

If you enjoyed this post, please ReTweet, StumpleUpon, Digg, Reddit . . . and Share this post with your friends!

(And if you can’t figure it out, I am more than willing to help you figure it out. All I I ask is for a link back to this post! I’d love the exposure!)

Please note that if you Read this Post correctly, it WORKS. A lot of people have been emailing me, claiming that it doesn’t work, or that they are confused. The reason is that you did NOT read the post in its entirety. Skipping will make you confused! The Code in Step 4 is the code that Most people are looking for.

You May Also Enjoy Reading…

Top 7 Blogging Tips for the Newbie Mom Blogger

Tutorial: How to Add a Custom Favicon to your Blogger Blog

Tutorial: How to Create a Favicon for Your Blog

Free WordPress.com vs. Self-Hosted WordPress.Org

Blogger to WordPress Migration: A Step-by-Step Guide (Part 1)

Moving from Blogger to WordPress without Losing Page Rank or Followers (Part 2)