Here's how its done…#6 Create Menu Links

Well, a nice reader named Jenners wrote in and challenged me with a How-To question:

How do you get the little links at the top that make your blog look like a real web site (like the Challenge Me button)? Is it a template in Blogger that I’m missing?

Disclaimer: Do you speak HTML? I would warn you to back up everything before you get started, especially if you are not altogether comfortable with the code aspect of blogging. Better yet, pay someone to do this for you! It’s pretty cheap. Still wanna try? Well then, let’s get to work!

The Menu bar is not a Widget or a template within itself. It is simply code in a basic “HTML Widget”. I am gonna do my best to show you how to set it up, and give you the bare bones code to develop for yourself within the widget. I am assuming you are on Blogger, and there is no guarantee that this will look very good with your existing blog…but maybe you can make it work. I had to tweak mine quite a bit before I got it the way I wanted.

Also, there are literally a hundred different ways to do this…my current menu is written in Javascript, but most people dont know much about that, so I am going to simply show you how to do one with HTML text links. You could also use a similar technique to use image links instead. but let’s start by keeping this “somewhat simple”.

First, BACK UP YOUR BLOG!!!!

Then, after you back it up, make a copy of your template code for safekeeping!!
Customize> Layout Tab> Edit HTML> Download Full Template

Next, you will need to place the widget, which will go just under your header.
Customize> Layout Tab> Page Elements> Click Add a Gadget at the bottom of your blog.
You will see on mine this is circled at the bottom.

You will add an “HTML/JAVASCRIPT” widget, and drag it up beneath the header. You will see on mine above that there is a “TEXT” widget that has been placed above it, which is actually empty, and was placed there for spacing purposes…you may have to get creative like this to make the finished page look the way you want it. Or, depending onthe size of your header and the layout of your blog, you may not need this. You will see in the image below how the widgets end up next to the header.

Next, here comes the code you will need to put in your “HTML/JAVASCRIPT” Widget…right click in this box, then click “Select All”, then right click again, and select “copy”.

<center><a href="PUT YOUR FULL BLOG ADDRESS (URL) HERE"><span style="color: rgb(0, 0, 0);font-size:140%;"><span style="font-family: verdana;">Home</span></span></a> | <a href="mailto:YOUR EMAIL ADDRESS"><span style="color: rgb(0, 0, 0);font-size:140%;"><span style="font-family: verdana;">Email</span></span></a> | <a href="PUT YOUR FULL PROFILE ADDRESS (URL) HERE"><span style="color: rgb(0, 0, 0);font-size:140%;"><span style="font-family: verdana;">Profile</span></span></a> | <a href="FULL ADDRESS FOR TEXT LINK 3"><span style="color: rgb(0, 0, 0);font-size:140%;"><span style="font-family: verdana;">TEXT LINK 3</span></span></a></center>

Next open the “HTML/JAVASCRIPT” widget you created, paste the code in the box, and save.

Now, the first thing you will notice on your blog is that now you have generic text links on your blog, so you are gonna have to change them to be, well, yours.

The most frequent question I have gotten about these links is, “What are they pointing at?” How do you create the page that the link points to? Well, I cheat a bit. What I do is create a post, so that post will have it’s own unique address (URL) that I can then point to. When I create that post, I simply use the post date option to post it back somewhere in my archives. For instance, if today is Dec 12, I would put something like Aug 31 as its post date to “bury” that post back in my archives. Then I go to that post directly, and copy it’s address that Blogger created, and that is the address that I will be pointing to from my new text link.

So now to customize the code, you will need to change some of it. Go to the front page of your blog, make sure you are logged in, and look for the little wrench and screwdriver underneath your new text links over on the right side, and click it to edit your code.

For each one of your text links, you will need to change how the text link reads, AND the address (URL) that it is pointing to. For Instance, change TEXT LINK 3 to read “Mommy’s Music”, or “My Favorite Naughty Underwear Links”, or whatever you want. Then you will have to make sure that you have the FULL address (URL) for the link to point to, like, “http://www.halftimelessons.com”.

Just so you understand the structure of the HTML tag you are using, here it is:

This is a full link tag:

<a href=”http://www.halftimelessons.com”>Halftime Lessons</a>

In Bold is the link address (URL) it points to:

<a href=”http://www.halftimelessons.com“>Halftime Lessons</a>

In Bold is what the link will look like on your blog:

<a href=”http://www.halftimelessons.com”>Halftime Lessons</a>

Now slightly more complicated, if you want to use an image in place of a text link, which we do all the time when we use, for example, Angie’s clickable image for Wordful Wednesday…

Here is Angie’s Blog address (URL) plugged in:

<a href=”http://angiescircus.blogspot.com“><img src=”http://i218.photobucket.com/albums/cc291/eoberrys/button30.jpg”></a>

Then you replace the Text Link with an image tag, where the address is the address of where the image is hosted on the internet…here Angie hosts at Photobucket, and you will see the full URL of the image in the tag:

<a href=”http://angiescircus.blogspot.com”><img src=”http://i218.photobucket.com/albums/cc291/eoberrys/button30.jpg”></a>

And of course it ends up looking like…this:

Well, that’s how it’s done. I know I’ve given you quite a bit to digest here, but all the fundamentals are in place so you can go design something that works for you. Thanks again to Jenners, who made me put two whoppin’ weeks into this post…Holy Shnikeys. Hope it helps.