--> Create Automatic Tabs Menu From Labels Widget | Experience Lab - Online business creation and development guide for bloggers and startups

Create Automatic Tabs Menu From Labels Widget

Yes you heard it right! Thankfully now you can create a tabs menu using blogger's official labels widget. Tab links will be automatical...

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

COMMENTS

Name

Affiliate Marketing,12,Announcement,34,Bing,9,Bitcoin,38,blog,7,Blogger Resources,42,Blogger Templates,4,blogger tricks,156,Blogging ethics,70,Blogging tips,198,Bugs and Errors,34,Business,9,Copyright Violation,9,CSS and HTMLTricks,95,Designs,8,drop down menu,7,eBook,12,Email Marketing,7,Events,30,Facebook,30,Facebook tricks,49,Google,157,Google AdSense,42,Google Analytics,7,Google Plus,51,Google Plus Tricks,38,Guest Posts,112,home,2,How To,77,Internet,1,JSON Feeds,25,Kitchen Recipes,2,Label Based Sitemap Themes,1,Make Money Online,108,Marketing,16,MBT Blogger Templates,7,Menus,1,News,146,Pages,1,Posts,10,presentations,15,Responsive,10,Reviews,7,SEO,307,Settings,6,Shortcode,15,Sitemap Themes,1,Social Media,155,Technology,7,Templates,1,Tips,2,Tools,1,Traffic Tips,80,Video,19,Web Designing,62,web hosting,18,Webmaster Tools,97,Widgets,199,wordpress,26,
ltr
item
Experience Lab - Online business creation and development guide for bloggers and startups: Create Automatic Tabs Menu From Labels Widget
Create Automatic Tabs Menu From Labels Widget
http://lh5.ggpht.com/-Othny2iV--s/ToSvEH9QSLI/AAAAAAAAFLU/hqyJcdpIYGg/image%25255B48%25255D.png?imgmax=800
http://lh5.ggpht.com/-Othny2iV--s/ToSvEH9QSLI/AAAAAAAAFLU/hqyJcdpIYGg/s72-c/image%25255B48%25255D.png?imgmax=800
Experience Lab - Online business creation and development guide for bloggers and startups
https://www.experiencelab.info/2011/09/create-automatic-tabs-menu-from-labels.html
https://www.experiencelab.info/
https://www.experiencelab.info/
https://www.experiencelab.info/2011/09/create-automatic-tabs-menu-from-labels.html
true
2959477579779989044
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy