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!