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.

Update: Before you embark on your blog button-making journey, I highly recommend you read my two blog button tips. These are two things I learned when making my own blog button.

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):

BloggingWithAmy.com

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:

How to make a blog button.

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. Picnik no longer works. Here’s an alternative.
  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):

How to install a blog button

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):

How to install your blog button

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!

Did you like this tutorial? There are a whole lot more of those ’round here! You might also like:

This post is part of Works for Me Wednesday.

Do you get The Useletter™?


Comments

  1. says

    I’ve been looking for a way to add my blog button for a while now and this is the first post I’ve found that is actually helpful! It’s so easy to follow along and only took me about 3 minutes to get the code set up added to the widget.
    Thanks for the help! :)

  2. says

    Hi Amy, I’m confused. :( Do I do anything with the code created in step 3? I tried the code in step 4 but it doesn’t show an image. Perhaps I’m using the wrong URL for the image. I uploaded it to my google drive and I’m using the share URL. Help, thank you!

  3. says

    Thank you so much for posting this! It worked except for one tiny detail. The code inside my grab box doesn’t work… when I scroll down in the box the button is actually in the code too. Not really sure what happened?! : /

  4. says

    AMY! You are a life saver!!! You are literally the 6th blog i’ve tried (been working on this button for 48 hrs straight it seems) and the ONLY one that has worked. Thank you, Thank you!!

    Morgan

  5. Sissy says

    Hi Amy,
    Thanks!! I got it to work, I have blogger.
    My question is how did you get you image name to say “bloggingwithamy” My image has some random letters and then 125×125 at the end.
    I would love to be able to rename the image. I just uploaded it to my gadgets.
    Please help me…and thanks so much!!
    Sissy
    http://www.southfloridasavers.com

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>