Create Automatic Tabs Menu From Labels Widget

automatic tabs menuYes you heard it right! Thankfully now you can create a tabs menu using blogger's official labels widget. Tab links will be automatically updated and added to your menu whenever you create a new tag/category. This widget is really helpful for those of our readers who wanted an automatic method rather the traditional techy way of drop down menus. I have tried my best to make it worth looking and worth trying. This is again a first time shared post by MBT on automatic Tabs Menu for blogger blogs. Lets see a demo first,

Live Demo

How To create the Navigation Menu?

  1. Go To Blogger > Design > Edit HTML
  2. Backup your template
  3. Search for this code,

]]></b:skin>

    4.   Just above it paste the following CSS code,

/* MBT Automatic Tabs Menu */

 


.mbt-label-list h2 {
    display: none;
}
.mbt-label-list a {
    color: #333333;
}
.mbt-label-list {
    background: #E1D4C1;
    height: 35px;
border:1px solid #DBC8AD;
-moz-border-radius:6px;
-webkit-border-radius:6px;
box-shadow: 5px 5px 5px #CCCCCC;
    margin: 0 auto;
    padding:0px;
    text-shadow: 0 1px 0 #E1D4C1;
    text-transform: none;
    width: 960px;
}
.mbt-label-list li {
    border-right: 1px solid #666;
    color: #333333;
    float: left;
    font: bold 12px Arial;
    margin: 0 2px 5px 0;
    padding: 0px 14px;
    text-transform: uppercase;
}
.mbt-label-list ul {
    float: left;
    list-style: none outside none;
    margin-bottom: 0;
    margin-left: 10px;
 
    padding: 0;
    width: 920px;
}

This CSS code is responsible for the color and look of your tab links and background.

  • If you wish to change the background color of the menu then edit    #E1D4C1
  • To change link colors change this #333333 . Edit it twice.

5.   Now search for this code,

<div id='content-wrapper'>

If you are using the new blogger designer template then search for this code instead,

<div class='tabs-outer'>

   6.  Just above any of these matching codes paste the following HTML code,

<div class='mbt-label-list'> <b:section class='mbt-label-list' id='mbt-label-list' preferred='yes' showaddelement='no'>
<b:widget id='Label1' locked='true' title='Labels' type='Label'/>
</b:section></div>
<div class='clear'>&#160;</div>

This code will create a labels widget in your PageElements page.

   7.   Save your widget and you are all done!

Visit your page elements page and open the label widget at top,

labels widget

Choose the following settings:

  1. Choose All labels only if your number of labels are less than 10. Else choose selected labels to decide which label links you wish to display in tabs.
  2. Set sorting to alphabetically or by frequency which ever you like. Choosing by frequency will display your most used label tabs first in the menu and the least used labels last in the menu.
  3. Choose Display as list
  4. You can decide whether to show or hide the label counts. So  uncheck "Show number of posts per label" if you don't want label count to be displayed next to each tab.
  5. Hit save and bingo you are all set!

tabs menu settings

Visit your blogs to see this brilliant new trick working just perfectly as shown in the demo. Please feel free to ask any related questions. Will try my best to reply as soon as possible. Kindly share it with your friends if you think this new trick proved useful and unique for most of you. God bless pals! :)

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

18 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. Hello Please me with this error if someone likes a post on the blog thru facebook like button, so when the link goes on Facebook, several codes show blow in link which look really bad
    How can I fix this?
    This is a picture of it
    http://i.imgur.com/wrzwM.png

    Please help thanks

    ReplyDelete
  2. Hello Please me with this error if someone likes a post on the blog thru facebook like button, so when the link goes on Facebook,, several codes show, which look really bad
    How can I fix this?
    This is a picture of it
    http://i.imgur.com/wrzwM.png

    Please help thanks

    ReplyDelete
  3. Hey Mohammad sorry for asking this here i really need help ,

    I have a customized church blogger template my problem is the meta tags are not been recognized , I tried various thing but nothing worked please help me brother

    url :- http://hackhaholic.blogspot.com/

    ReplyDelete
  4. hello sir,

    i want tabbed widget code exactly similar to the one you have here in this site "Topics and Blogger trics" widget.

    ReplyDelete
  5. sir, also please give a facility called "Notify me when someone replies to my comments" checkbox in the comments section and also please provide code for the same. this is adopted in wordpress using default plugins...please think for the same kind of facility to blogger and mainly to this site.. thank you.

    Gaurav.

    ReplyDelete
  6. Hi Mohammad!
    Fantastic work! Thank you very much!
    Published an article about it to their readers (links to your blog active)
    If you have time - see: (vsegenialno.blogspot.com)

    ReplyDelete
  7. nice...



    go here

    www.mediafirerockz.blogspot.com
    or
    www.mediafirerockz.co.cc


    for free Hd movies,mediafire downloads,games,software

    ReplyDelete
  8. I'm trying to add these quote in my template but I cannot save as it shows:

    More than one widget was found with id: Label1. Widget IDs should be unique.

    ReplyDelete
  9. Great tutorial Mohammad, this resolves my problem. I ported a wordpress theme to blogger but I get some problems about the CSS I'm working. Thanks to your idea, I fixes the problem. I will also write some of this kind of tutorial and I will link back to you.

    Here is my blog I'm working: http://www.wordblogtemp.com/

    ReplyDelete
  10. well after following the steps exactly as said above, I'm not getting my "labels" as "menu tabs" rather I'm getting labels in a list list form with dotted line at the top where actually "menu tabs" were suppose to come :( plz help me out..

    ReplyDelete
  11. dosn't work.... please help me it said like this

    More than one widget was found with id: Label1. Widget IDs should be unique.

    Error 500

    reply me at http://dzuldin.blogspot.com/

    ReplyDelete
  12. its realy working visit http://computerseed.blogspot.com

    ReplyDelete
  13. NIce
    visit site to see see demo and learn hacking live tv live chat , flash games books and other education blog

    http://minuteeng.blogspot.com/

    ReplyDelete
  14. Hi, How would I go about adding these labels to one of my page?
    I've added the code to the HTML of my page but it doesnt seem to recognize the label counts. Thanks :)

    ReplyDelete
  15. Hi There,
    I got this message too...

    More than one widget was found with id: Label1. Widget IDs should be unique.
    What do I do?

    Thanks
    Claire

    ReplyDelete
  16. How to improve my blog to PR3
    http://makeyourwon.blogspot.com

    ReplyDelete
  17. More than one widget was found with id: Label1. Widget IDs should be unique. what i get :/

    ReplyDelete
  18. sir how to post newpost in purtucular label

    ReplyDelete