Pages

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.

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.

4 comments:

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

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!

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.