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!

How To Make Custom Navigation Tabs

(Once again, the evil laugh of success.)

I told you in my post about adding navigation tabs (aka Pages) under your blog's heading that I had an idea for how to make these customized.  Well, it worked.  (Bwa-ha-ha-ha-ha!)  I'd read other tutorials about how to do this, but they involved all this html stuff that I really didn't understand.  So I just kept thinking about it and hopeing there was an easier way to accomplish the same thing.

Then it occurred to me--What is the difference between a blog button and a navigation tab?  Nothing.

So here's what you do.

First, whip up some completely awe-inspiring Pages.  (You do not have to have added the Pages gadget to do this.)

Then, use your favorite image editing software to design your new, unique tabs (one for each page).  Upload the images to Photobucket or some similar website.

Next, on Blogger, go to Design-->Page Elements (Update:  It's under "Layout" now)-->Add a Gadget right under your header, like in my other tutorial.  This time, add the HTML/JavaScript gadget.  (If you already have the Pages gadget, you can delete it.  Don't worry, your pages won't disappear.  I tried it just to make sure.)

Now paste this into the space for "Content," and replace the red text with your own info.

<a href="the url of the page you want this tab to take you to" mce_href="the url of the page you want this tab to take you to"><img src="the url where the image is hosted aka Direct Link on photobucket" mce_src="the url where the image is hosted aka Direct Link on photobucket" border="0" /></a>

(I don't know why everything is there twice; all I know is that this does work.)

Do this for each of your tabs (in the same HTML gadget--you don't need to add multiple gadgets).  Click Save, and you're done!

Here are my tabs.  What do you think?  I'm not completely in love with them, myself, but the'll do for now.

How to Tidy Up Your Linky Party Buttons!

You know when you're working on something and it's difficult/ complicated/ confusing/ generally not working, but you keep at it until you figure it out--that feeling you get?  I feel like a mad scientist--It worked!  IT WORKED!  BWA-HA-HA-HA-HA!  (Ahem!  Sorry about that.)  I call it the "evil laugh of success."

There was definite evil laughing when I finally figured this out.  Here's what happened.

It all started on a dark and stormy night...or an unseasonably pleasant February evening, anyway.  I was exploring one of the blogs I follow, when I came upon a tutorial on how to resize your blog's buttons with html.  Personally, I'd just use my good ol' Photoshop and change the actual size of the button, but what about OTHER blog's buttons you have on your page?  That would be worthwhile.

Most (all?) linky party hosts ask you to put their party button somewhere on your blog.  (I totally would if I hosted a linky party--advertising!)  So I have the buttons for the parties I join down at the bottom of my homepage, but they were such a mess!  The buttons were all different sizes, and some of them didn't play nice with the other buttons (insisting on being on their own lines), and they just generally made my page cluttered.

But with this tutorial, I could make them all the same size!  (The anti-social tendencies of the buttons would be dealt with later.)  It was great, and so simple!  Well, I was excited and tried it immediately...and nothing happened.  Re-read the instructions.  They weren't very clear.  It was only one step--insert width:##; height:## somewhere after the "img" in the html code.  Problem is, it says "img" several times in the button code.  ???  So I tried a couple of different things, with no luck.  I checked the comments; maybe others were having the same problem, and the blogger clarified.  Well, other's had the same question, but no answer yet.

Okay, next step--try Google.  I found this article, How To Resize an Image With HTML,  and I thought, A button is just an image, when you think about it.  Maybe this will work.

It said to put the new height and width after the img src html tag, so:
<img src="the url where the image is hosted" width={new number} height={new number}

So for a real-life example, here's how you would re-size my button.

The Original Button  and Resized  (Aww, isn't it cute?)

Here's the code:

By the way, sometimes the "img" and "src" bits aren't right next to each other, so look for the "src" specifically.

Now a quick note about the anti-social buttons:
If you see a code like this  <center>  then it is (you guessed it) centering itself.  Just take that out.

Let me know if you have questions!

Update:  I thought you might want a point of reference so you can choose how many pixels tall/wide to make the buttons.  The linky party buttons at the bottom of my page are 75 x 75 pixels, and the Resized Button in my example is 35 x 35 pixels.
Oh, yeah--remember to keep the dimensions proportional.  Rectangle buttons will look weird if you resize them to be squares.