Thursday, July 30, 2009

Tutorial: Navigation Buttons

If you look right under my header, you will see some page navigation buttons. Several friends have asked me how to do them, and truth be told, it's a cinch. Disclaimer: Please back up your blog before making any changes.

1. Go to <Layout> then <Edit HTML> *now don't let yourself be intimidated by all this code if you are a newbie to blogging. (to back up your blog, you can click on the Download Full Template link located on this page in blue.

2. You want to find the line that says: (you can find it easy by clicking <Ctrl F> and then typing it in.

3. Right above this line, cut and paste this code:

a.navigation {
background: #000000;
color: #ffffff;
margin: 1px;
padding: 5px 35px 5px 5px;
border-width: 0;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
a.navigation:hover {
background: #5d5d54;
text-decoration: none;

4. Then you have to place the navigation buttons where you want them by saving your template and going to -Layout- then -Page Elements-, and -Add a Gadget-. Create an HTML/ Java Script box.

5. Copy and paste this in the HTML/ Java Script box:

6. It will look different when you paste it, weird I know. Anyway, you can replace the words with what links you want and their URLs. The instructions are kind of within the code you will paste. You can add as many navigation links as you want. Save it and place it where you want it! Click and drag the gadget so that it is located under the header for the best look.

7. At this point, you can go back into the HTML editor and change the colors of the links. You will need to use a HTML color code. I really like this one: HTML Color Code Chart.

If you have any questions, if I wasn't quite clear, feel free to leave me a comment or email me.


Kimberly said...

This is AWESOME! I've been searching and searching on how to do this and haven't figured it out. I can't wait to try this out on my blog. Thank you!!!

Kimberly said...

Quick question:
For #2 what is the line I need to find? I don't think I see it written on your blog?

Mama Nut said...

Sorry about that! I had it in brackets and the blog thought it was code and made it disappear. I didn't catch it after I published it.

Anonymous said...

LOVE this- Thanks so much! My only question is that my navigation links appear on top of eachother and not side by side. Did I do something wrong? Thanks for the help!

Mama Nut said...

You are so right! I did a small but major typo! You need to place the coding before < /b:skin > NOT < b:/skin > It makes a HUGE difference!!! Thanks for catching that! I will go back and correct that typo.

Also you can check and make sure the margins are set right. Go back to step #3 and recheck all the numbers. Pay close attention to the padding and the margins.

Thanks again for your comment. HTML coding is tricky to blog about!

Mama Nut said...

Yeah, I just did another test run and it was the "skin" problem. Works great now. So sorry about that!

Our Family said...

Success! Great tutorial, Cat!

I had trouble with the stacking, too. This is probably because I'm still a beginner as far as using Blogger, but I didn't know you could add a gadget in the center when you're working in the layout. I just clicked "Add a Gadget" on the left side of the layout, and the navigation buttons appeared on the left-hand side of the blog and stacked on top of each other. I finally figured out that you can drag that gadget to the center (above "blog posts"), and now it looks great.

Mama Nut said...

You can also lengthen it out, by moving it right under the header, click and drag until the space gets long right under the header.

You are right though, I should have specified that you need to move the gadget :)

Our Family said...

Hahahaha! I just came back here because I needed help after I added another navigation button, and they were stacked on top of each other again. Lo and behold, you answered my question before I asked it. I just had to stretch it under the header like you explained. Problem solved. Thanks, Cat.

Smitten by Britain said...


I'm trying to find directions on how to turn your blog into a blog site, meaning, it works like a website by linking together individual blogs. Here's an example:

If you know how, do tell. ;-)



Admin said...

Where do i get the code?
The Blue link as referred by u..coz i can't fond one on this page :/

Blog Widget by LinkWithin