September 29, 2011

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,


    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;
box-shadow: 5px 5px 5px #CCCCCC;
    margin: 0 auto;
    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'/>
<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! :)

Need Quick Help within 24 Hours? ASK NOW

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 »

24 comments : Post Yours! Read Comment Policy ▼
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

    Please help thanks

  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

    Please help thanks

  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 :-

  4. hello sir,

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

  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.


  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: (

  7. nice...

    go here

    for free Hd movies,mediafire downloads,games,software

  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.

  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:

  10. hi is it possible to add pages into the label widget. i badly needed this feature. please help. (

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

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

  13. how do we make it a drop down, kind, like her blog she explained it but i have no clue what she talking about.

  14. its realy working visit

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

  16. 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 :)

  17. 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?


  18. How to improve my blog to PR3

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

  20. sir how to post newpost in purtucular label

  21. You've made some good points there. I looked on the web for more information about the issue and found most people will go along with your views on this web site. Best of Tricks

    Thanks For The Help...

  22. help me i cant find and do


  • choosing webhost for a blog

    Blogger Shortcodes

    Blogger Shortcode Plugin lets you redesign your blog with a simple one line code! It was once a dream!

  • MBT Icons and buttons

    Icons and Buttons

    Our resources have been successfully downloaded over 10K times and found almost every where. Get yours!

  • SEO Settings for blogger


    Learn every single SEO tip that will boost your blog's ranking and organic traffic. We got them all!

  • Blogger widgets and plugins

    Visit Our Blogger LAB

    Why not take a tour of all great Blogger widgets published so far? You Name it we have it!

  • become a six figure blogger!


    Learn what it takes to become a successful entrepreneur and build a living online!