web analytics

How to Design a Horizontal Menu Bar for your Blog

image

 

Updated May 23. 2012. This tutorial still works perfectly in the new Blogger dashboard. Things are just named and located a bit differently.

Good morning sweet ladies. I have come here early to give you another bit of information on how to design your own blog. Today we are going to make a menu bar, otherwise known as a navigation bar with different tabs under your header.

 

Voor de Nederlandse dames. Voor het gemak (vooral dat van mij) schrijf ik mijn blog alleen in het Engels en dus ook deze serie over hoe je zelf het een en ander aan je blog kunt veranderen. Dat wil  niet zeggen dat jullie mij geen vragen in het Nederlands kunnen stellen of niet om wat meer uitleg kunnen vragen. Aarzel dus niet om het mij te laten weten als je iets niet snapt of als je vragen hebt. Ik help jullie graag!

 

The menu bar used to be a highly coveted feature for a blogger blog, but to have one you would have to be quite familiar with changing your HTML code, and employ a few workarounds. But no longer. Blogger has wised up and made it very easy for us.

And as always there are various ways to go about it….

First:

 

Pages as Tabs in your Menu bar / Navigation bar

 

Blogger’s addition of Pages is fully intended to be used a a navigation bar. And it is so easy, if you know how to write a post you can write a (static) page.

 

Old dashboard:

www.blogger.com screen capture 2011-5-31-21-54-53

If you haven’t discovered them yet, this is how you can make your own static page tabs:

Go to posting pages,
choose pages,
write pages,
publish,
ad gadget and choose blog tabs,
Done!!!!

Screen print old dashboard:

add pages

Screen print new dashboard

 

Add pages menubar

 

If you want to change the order of the pages, you just go into the page gadget that has now been added underneath your header and change some settings there.

Good static pages to have for your blog are for example: a proper About page (about your blog and about you), a contact page, a page where you show off where you have been featured and which blog awards you have received etc. I am sure you can come up with many more. Page tabs is a great way to get rid of the clutter in your sidebar.

Now that was nice and easy wasn’t it?!

But I hear the first questions coming: but how can I make a tab link to a page/website outside my blog???? Well if you want that we will have to choose option  number two (but writing a few static pages is still a good idea you’ll see why later).

 

Linklist as tabs in your menu bar / navigation bar

Blogger has always given you the option to add a linklist to your sidebar. But now you can add that linklist under your header and it will magically turn into a menu bar with tabs. Again it is really easy. But first you will have to delete your pages gadget (don’t worry this will not actually delete the pages, just the menu bar).

 

Go to your page elements layout page
click the ADD A GADGET underneath your header
find the LINK LIST option and add that
fill out the little link list menu with the links you want to add
click save
Voila!

And if you want to have a few static page tabs in here as well (which basically are just internal links), you can just add the link to them in this menu. (if you have already deleted your pages menu bar and are looking for the permalink to the pages, just go to the pages posting area, you’ll see they are all still there, click view and it will take you to your page and you can copy the permalink there).

Good (external) links to add are: links to your tumblr blog or pinterest boards or the static pages you made. And you can also link internally to a label category, for instance “Garden” you just have to go to a post that has that label, click the label to bring up the list of all the posts with that label, copy the permalink and add it to your linklist.

I made a quick linklist based menubar for my DIY Blog Design blog:

 

diyblogdesign.blogspot.com linklist navbar

 

Now you want to make it look pretty…..

How to customize your menu bar / navigation bar

Blogger has  made it really easy to make the most basic, and most important changes. You can do it right there in the Template Designer, just like how you change colors and fonts on your blog.

In template designer, go to Advanced, Go to Tabs Text and change the font and color of the words in your tabs; and go to Tabs to change the color of the tabs themselves.

 

Changing appearance tabs template designer

 

Already a lot better. But I want a little more control still, and if you do to you will have to add a little custom HTML to your CSS Sheet (remember I explained what the CSS style sheet is in the post on How to Make a Blog Header).

 

Changing linklist tabs css style sheet

 

You can see here (in the preview window) that I have made the tabs a bit wider, but less high and that I have centered them. To do this you just have to copy the following lines and add them to the CSS sheet.

 

.LinkList {text-align:center !important;}
.LinkList li {display:inline !important; float:none !important;}

.tabs-inner .LinkList li a {padding-left:20px; padding-right:20px; padding-top:1px; padding-bottom:1px}

.tabs-inner .LinkList li a {border: 1px solid white;}

The first two lines are responsible for centering the tabs. The third line defines the size of tabs, you can play with the numbers and you will instantly see the tabs go wider and or bigger. The fourth line is for that border around the tabs. In the end I chose to change that last line to 0px so there is no border in my final menu bar.

Final result:

 

Final linklist nav bar

 

Ok that is looking good isn’t it. Ok I’ll leave you with one final hack, for those of you who can’t make up their mind and want to add everything into a tab and run out of space on that one line and need a second menu bar.

How to add a second menu bar / navigation bar

For this you will have to change a tiny bit of html in the html of your blog.

But before you do that remember to take the Safety precautions first and back up your template.

Go to html and find this bit of code (I used the word linklist to search), you will probably see maxwidgets=”1” and showaddelement=”no” change that as in the picture below and save code.

 

Extra linklist html

 

Now when you go to page elements you will see another place for you to add a gadget underneath the header, so you now have the option to add a second linklist as your menu bar.

Good luck and remember just ask me questions for future episodes in my DIY Blog Design series or if you run into problems using my tutorials.

 

 

Love,

signature

 

If you liked this post, enter your email address to receive all my future posts in your email inbox:

Comments

  1. ritajoy says:

    Thank you for this wonderful tutorial! I'm a new blogger and have learned everything through tutorials like yours! I'm looking forward to reading through your past (and future) "classes".

  2. Lesley Litrento says:

    THANKS!!!!!!!!!!!! I just updated my blog all by myself, but didn't know how to add the tabs bar. Now I do!! I truly appreciate it.:)

  3. Geri Centonze says:

    Loved this tutorial – can you tell me how to change the outline of the tab to grey – I tried a color code and that didn't work??

  4. Ashley @ It's Fitting says:

    This is awesome! I'm trying to do a redesign myself on my blog and I'm desperate for more tutorials like this!

  5. thank you so much for this tutorial! i have been wanting to do this forever!

    ashleytrujillo.com

  6. I have spent several days going through tons of tutorials on navigation bars and this was the first one to explain it in a simple and effective way. Thank you so much for posting this.

    • Ellise,

      I see you tried this tutorial today also. Were you able to get it to work? I don’t see an option for blog tabs under the add a gadget option.

      • Femke Siebring says:

        Hoi!
        Ik heb alles gevolgd maar ik kan dus bij sjabloonontwerper bij geavanceerd niet kiezen voor tabs tekst en dan de menu balk veranderen qua kleur etc. Heel vreemd. Weet jij misschien hoe ik dat kan oplossen?

        Alvast heel erg bedankt! Zonder deze blog was me het nooit gelukt tot zo ver.

        • Marianne@Songbird says:

          Hmm, bij mij zit de optie om de tabs tekst kleur en de tabs achtergrond kleur te veranderen er gewoon in. Heb je misschien een heel afwijkend begin template gekozen?
          Anders weet ik het ook niet. Maar ik ben blij dat ik je in ieder geval met een aantal dingen heb kunnen helpen.

    • Marianne@Songbird says:

      You’re welcome.

  7. Thank you so much for your tutorials! My blog desperately needs some help and I thought I would attempt to work on it myself before breaking down and hiring someone to do it for me. I just tried to add a horizontal menu bar and I am having an issue with it. I’m thinking Blogger might have changed something since you did this tutorial. When I click on add a gadget, there is no longer one for blog tabs. Help! Is there another way to do this using the new blog designer template? I converted back to the old style so I could follow this tutorial step by step. Thank you!!!

    • Marianne@Songbird says:

      Hi Monica,
      I took a look for you in the new dashboard design.
      To add a menu bar by way of Pages. You just have to use the pages tab (it is underneath the posts tab) and it lets you choose the layout there too.
      The linklist menu bar still works too. Choose link list from the ” add a gadget ” box underneath the header.
      In the new editor it all works exactly the same, it just looks different.

  8. On our blog, http://www.hansandnicole.blogspot.com I can’t get any codes to center our link list, post titles, or date above post. Do you have any ideas on how to fix this? thanks!

  9. I am trying to edit my pages….. and now they are all messed up- can you look at them and help?
    also I want more direction on using the labels to make category links .. when ever i clicked the labels it took me to a page that had the post that containted those labels but I never saw a permalink or anything like that.

      • okay so i fixed my page tabs but now it doesnt look like i can move them or anything..
        I still need help with the labels and categories cause i have always been wondering how everyone has like drop down list on their tabs that goes to older blog post, likt the are automatically categorized, – is this what the labels can do? Thanks for your help
        Thanks- Meg from Unique Designs And Finds

  10. I am unable to add a second pages bar or get the pages to appear beneath each other. I was wondering if there was a way to have pages that are either in an identical and second bar or on the same bar but below the current pages. Thanks so much!

    • Marianne@Songbird says:

      Yes that can be done. Off the top of my head. Can you ad a second widget area underneath your header and add the gadget there?

  11. Thanks for all your tutorials.

  12. Hi, thank you for your great tutorials! Do you know how I can change the background color of the Linklist? Mine is currently a gradient from pink to white and I want it to be just solid white or just solid whatever color I want, but not gradient. It’s driving me nuts trying to change it!! Thank you!

    sincerely,
    mari
    crabandfish.blogspot.com

    • Okay, nevermind! After hours of searching, I of course found what I need five minutes after I asked you! The code to change the background of LinkList or Tabs bar from gradient to solid color is:

      body {}
      .tabs-inner .widget ul {background:#ffffff;}

      (The #rffffff being solid white, change to whatever you need)

  13. Hi Marianne,

    thank you so much for these tutorials, they are a great help. I do have a question – I have applied your css to centre the tabs, or rather links, I have used the advanced template to determine font, text colour and set the background to the tabs, but I still have those blogspot preset semi-circle tabs and cannot figure out how to change that or the colour of them, I would like them to be invisible and just have the text, what am overlooking here? Your help would be much appreciated.

    Thank you

    Helle

    • Problem sorted – I added some css code, at first it didn’t work cause I used your “solid white”, once I only wrote “white” it worked.

      Helle

  14. This was SO helpful thank you so much!!!

  15. thanks for your information..it helped me, thanks a lot..

  16. Hi and thank you. I reference your blog in a post today about my blog redesign. I utilized this information and found it very helpful. So thanks!

  17. I did copy and paste into the CSS and it did nothing :( HELP!!!

Speak Your Mind

*