How to Make a Blog Button

Answering more reader questions today…

Many people have asked me how to make their own blog button. This is the mother of all blog button tutorials (well, at least it felt that way when making it!!). Stick with me.

This time I’m going to show you how to make a 125px by 125px blog button like this (ahem…pardon my ugly, thrown-together button):

Once you do, you might want others to be able to grab your button and put it on their own site, in which case you’ll need a grab box along with your button like this:

A visitor would simply copy the code in the grab box, paste it into their own site and your button would show up there!

In order to do it you need to:

1. Create an image 125px by 125px (which will be the button itself).
2. Upload your image to your server.
3. Create the code others will copy & paste to grab your button.
4. Display your button & grab box on your own site (ready to be grabbed by others).

1. Create an image 125px by 125px (2 options)

Blog buttons are typically 125px by 125px square. To create your button, you can use either an existing image as your base, or you can start one from scratch.

Option A: To use a photo or existing image as your blog button base:

You are going to use the very same technique I showed you in How to Watermark a Photo. I’ll post the video again in case you missed it. The only difference is, instead of resizing your image to 16×16 pixels square, you’re going to resize it to 125×125 pixels square.

Can’t see the video? Watch it here.

Here are the steps (video notes):

1. Go to Picnik.com.
2. Upload your photo.
3. Crop your image into a perfect square. (It doesn’t matter what size it is at this point as long as it’s the same number of pixels wide by the same number of pixels high.)
4. Once it’s cropped, resize your image to 125px by 125px.
5. Add text, effects, stickers, etc. to embellish your button as you like.
6. Save it.
7. Done!

Option B: To use a blank canvas as your blog button base:

If you want a button with a solid-colored background as a base, you could employ the trick I showed you in How to Make and Install a Favicon (above). That is, find a photo with a good swatch of color you can isolate to use as your solid-color background. Once your background is set, you’d follow steps 3-6 above to add your text, etc.

OR

You could also use an application like Gimp (which requires a bit more design knowledge but is free). In this case you would open a new canvas, 125px wide by 125px high and then add text and maybe an illustration or two (iStockphoto is a popular site where you can purchase illustrations).

Now you’ve got your image.

2. Upload your image to your server

Follow the instructions in How to Access Your File Manager or How to Use FTP to upload your image to your server. (Aren’t you glad we learned how to access our server? It definitely comes in handy!)

Take note of the location of your image. It doesn’t matter a whole lot where your image is stored, as long as you know where it is. To make it easy, I would install it in my “root” (first level of my blog files). This is what it looks like (click to view larger):

If you do upload your button image here, the location of your image will look something like this:

http://YourDomain.com/ButtonImageName.jpg

3. Create the code others will copy & paste to grab your button

The basic code one will copy and paste to get your button to show up on their site looks like this (you will replace the bold with your own URLs):

<a href=”YourSiteURL“><img src=”YourButtonImageURL” /></a>

The <a href=”…”></a>” portion is your hyperlink and is the page you want someone to land on when they click your button (most likely your home page).  Make sure you don’t forget the closing tag (</a>) at the end!

The <img src=”…”> identifies where the image is located so a browser (i.e. Firefox, Safari, Chrome, Internet Explorer…but I know you’re not using Internet Explorer, right??) knows where to find it in order to display it.

So, for example, if I was going to put a button on my site (and I uploaded it to my root directory), my code would look like this (ignore the line break):

<a href=”http://bloggingwithamy.com“><img src=”http://bloggingwithamy.com/button.jpg” /></a>

<a href=”http://bloggingwithamy.com”></a> (i.e. BloggingWithAmy.com) is where they land when they click on my button, which the computer reads like this: <img src=”http://bloggingwithamy.com/button.jpg” / >

Make sense?

4. Display your button & grab box on your site (ready to be grabbed by others)

Let’s put your button and a grab box in your sidebar for others to grab. You’ll do this by pasting the below code in a text widget.

To get to your widgets from your Dashboard, go to Appearance–>Widgets. Click & drag the “Text” widget into your sidebar (your sidebar options may differ from mine in this photo):

The text widget should automatically pop open for you once you drag it into the sidebar; if it doesn’t click the little down arrow on the right side of it. At this point you’re ready to paste your code (below).

(By the way, if you want a refresher course on placing widgets into your site, check out How to Use WordPress Widgets.)

Here’s the code you will paste into your text widget. It consists of two parts:

1. Your image.
2. The grab box.

Highlight and copy the entire next paragraph into your text widget. You will obviously replace the bold parts with your own code:

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

So, for example, this is what mine would like:

<img src=”http://bloggingwithamy.com/button.jpg” alt=”BloggingWithAmy.com” /><div style=”width: 123px; height: 125px; overflow: auto; border: 1px solid #666666;”>&lt;a href=&#34;http://bloggingwithamy.com&#34; target=&#34;_blank&#34;&gt;&lt;img src=&#34;http://bloggingwithamy.com/button.jpg&#34; alt=&#34;BloggingWithAmy.com&#34; width=&#34;125&#34; height=&#34;125&#34; /&gt;&lt;/a&gt;</div>

Important Sub-Step: Make all code above HTML-friendly by changing the quotes!

In a nutshell, if you just copy the code above and paste it into a widget, it won’t work. Why? Because there are these things called “smart quotes” which mess everything up. (Feel free to google if you’d like. I’ll spare you the details.)

The bottom line is, it’s a bit of pain, but this is how I recommend making your code HTML-friendly:

1. So you copied the above code.
2. You pasted it into a text widget (as described at the beginning of Step 4).
3. Now, once you’ve pasted it in your widget, very carefully delete every quote (“) and re-type it. There are 6 total. I suggest doing them one at a time and in order. Be sure not to add any spaces or extra characters in the process.
4. Save your widget.
5. Your image and text box should appear. If not, delete the code, re-copy it and paste it into a text widget and try changing the quotes once again. (It’s easy to make a mistake.) (If it still doesn’t work, it’s probably all my fault. )

Once it’s in your sidebar, people can simply copy all the code in the grab box, paste it into their site and your button will show up!

Here are more of my quick tips.

This post is part of Works for Me Wednesday.

Related posts:

1. How to Install Google Analytics
2. How to Add Social Media Icons to Your Sidebar
3. Make Reading Your Blog Easier: 3 Tips