11 June 2011

How I Did My Tutorials Page/How to Make a Blog Button

One of you wonderful readers asked how I did my tutorials page, so get ready for a tutorial on that!  You could use this technique wherever you want to have images function as links.

First, of course, you need to make your image (to become the button/badge).  Mine is 162 px square, but just choose whatever size works for you.  You'll probably want to include a picture (who doesn't like pictures?) and a title.  If you will be making several of these images, I suggest keeping one as a template.  In the case of Photoshop (my image-making software of choice), this means not flattening the layers, so I can just switch in the new pictures and titles.

Now, upload the image to Photobucket or similar site.

Next, in Blogger, go to Edit Pages and then Edit HTML for the page of your choice.

For each image, enter this code, replacing the orange words with your own information:

<a href="the url you are linking to"><img src="the Direct Link to your image" /></a>

If you are putting in more than one button, just paste the above code in again, with new information in the orange spots.  If your buttons are showing up too close to each other, you can just enter a couple spaces between the two sets of code.  You can make other additions to your page (adding categories for the tutorials, for example) in the Compose tab.

And that's it!  It's really easy, and makes your blog easy to navigate.

If you have any questions, please leave a comment or e-mail me!


  1. Woof! Woof! Lots of Golden Thanks. This is much easier than how my mom did it ... she stored the badge into blogger and created an table HTML. It works. It was a great idea. Lots of Golden Woofs, Sugar

  2. I love this, but I can't get my pictures next to each other. I was hoping to get 3 or 4 to a row. I can only get two, and there is no divide in the html. I am not sure what I am doing wrong. Any advice would be great! I have been wanting to learn how to do this for about a year now :) Thanks!

    1. I went over to your blog and your tutorials page has three buttons/row, so I guess you figured it out. How did you end up fixing it? I was going to suggest that maybe your blog wasn't wide enough to fit more than two on a row.

      I'm glad you could get it worked out!

    2. Hi Jill! Thank you for responding! I don't know how I worked it out, I just played with it for a while. I have a lot to learn!


Thank you for your comment! I love to hear from you--your comments make my day!

I've been getting a lot of spam comments lately, so I'll not be allowing anonymous comments for the time being. Sorry to any legitimate anonymous commenters!