Saturday, December 20, 2008

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 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".


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 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".

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, "".

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

This is a full link tag:

<a href="">Halftime Lessons</a>

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

<a href="">Halftime Lessons</a>

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

<a href="">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=""><img src=""></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 Angie hosts at Photobucket, and you will see the full URL of the image in the tag:

<a href=""><img src=""></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.

Stumble Upon Toolbar


kel said...

very informative... i think.. since i don't spea HTML!

Diane said...

So THAT'S how it's done!
I think I'll pay somebody...

CaJoh said...

Something I tend to do if I am linking to an external site is to use target="_blank" after the URL. for example:

<a href="" target="blank">My blog</a>

That way it opens up a new window.

Cool huh

Carol said...

I like the way it looks, too. Don't know that I could make that work with TypePad, though. I'd have to speak CSS. I can barely handle English.

Annie said...

Holy crap.I'd have to quit blogging. I can barely do the basics in sheer fear I'll royally F up!

Ann said...

This is so cool Jay!
Thanks so much. I want to be an HTML geek and give it a try.
I'm excited! (I think by just that fact I might be a geek. Is that how it works?)

Tony said...

This is why you are the "Blog God" . Knowledge, female insight and great humor. I think Kat is going to have do something special Christmas eve for you big boy. Oh yes I do.

Cassie said...

You lost me at "backup your blog" and "copy your template". That's just too much to write down. Ha - Kidding!

I'm just learning simple HTML things like center, bold, strike through...I'll bookmark this and come back to it in about 5 years!

It looks very well written though for those that speak the lingo!

Lee the MWOB Queen said...

Oh Jay - I'm afraid to say I'm with Cassie. You lost me at BACKUP YOUR BLOG! Please tell me how to do THAT one!! I've decided I'm paying someone to do this - it's already in the works - something brand new to unveil in '09. But I still need you. And all of your blog tips. So keep on keeping on...

Happy weekend!

p.s. your latest comment on MWOB really made me laugh...

Jenners said...

Oh thank you thank you thank you! I'm so sorry that it was so much work for you ... but I will definitely be using the information as I plan to "rework" my blog over the holidays. And the new one with definitely (hopefully) have the menu links! Thank you so much! I totally appreciate it!

Jenners (the cause of your agita)

Eudea-Mamia said...

You lost me at back up your blog.

But honestly, once the Holiday cheer dies down and the Oldest is back in school, I'm coming back to this.

Thanks for taking the time to post it!!


Jenni Jiggety said...

That made my brain hurt a little bit...

br8eyes said...

This is awesome!!! Originally, I was gifted my blogs layout. I feel I am at the point where I can do some things myself and this is one of them. Thank you so much!

Jenners said...

I did it! I used your information and created menu links! It was really easy to do using your information! I tried it out on my book blog first as I am planning to revamp my personal blog over the holidays (switching to 3 column template) and I didn't have any problems! If you want to check it out, the link is

I hope I have make you proud and that you don't think doing all this was a waste of time! I will be using it on my personal blog too and will credit you when it goes up.

Tabitha Blue said...

GREAT info... thanks for sharing. Sounds easy enough to figure out!!


Anonymous said...

I'm totally working on this but here's my problemo. When I drag it up there it keeps shortening its width to fit between the two add a gadgets on the sidebars. I can't get it to go above them. Any clue?

Tabitha Blue said...

Just perfect! Thanks!


Tiaras and Tantrums said...

oh man - I have been trying to figure this out for MONTHS and MONTHS!
THANK YOU SO MUCH -super easy and presto done-o!!!!!!!

Sarahlcc said...

Thanks for the tip Jay ~ I have used it to good effect.

Scary Mommy said...

I love you. Seriously. I have been trying to figure this out for A YEAR!! You rock my world!!!!!!

Terra said...

I love it, it works! However I wanted to add a 5th and 6th and each time I do they get all messed up..the links GROW in size and the 5th adn 6th fall below the first four instead of in line.

Snarky A. said...

Thank you so much for posting this!

Beadiful Things said...

Finally got around to doing this. Thank you, Jay!

angie said...

That easy huh?

What if you can't even glance at HTML without going cross-eyed?

Seriously though, so informative and helpful.

THANK YOU. Especially for throwing my little button in there and making me feel special.

posthumous pointer
To laugh often and love much; to win the respect of intelligent persons and the affection of children; to earn the approbation of honest citizens and endure the betrayal of false friends; to appreciate beauty; to find the best in others; to give of one's self; to leave the world a bit better, whether by a healthy child, a garden patch or a redeemed social condition; to have played and laughed with enthusiasm and sung with exultation; to know even one life has breathed easier because you have lived - this is to have succeeded. - Emerson