How To Add Multi Tabbed Navigation Widget To Blogger

The Multi Tabbed Navigation Widget enables you to Group all the Blog Gadgets in a single container,which can easily be selected via tabs.The main benefit of this widget is to save the Space of your blog,and you will get rid of scattered gadgets,however it also helps you to navigate the blog gadgets easily.Any one can see blog gadgets in a single container just by Clicking the Tab of the specific Gadget.There are several ways of creating tab-views for blogger like jQuery, or with the help of tools,or any script.

How To Add Tabbed Navigation Widget To Blogger

• Go To Blogger Dashboard,Click On Template and Then Click On Edit HTML

• Now Expand the Style Section of the Template,just by Clicking the arrow near  ...  at line 14.
• Now Search for this Tag ]]>

• Now just above ]]> tag add the below script

/* ThatsBlogging Tabview for Blogger
----------------------------------------------- */
.tabviewcont{
margin:15px 0;
padding:0;
clear:both;
}
.tabviewnav {
margin: 0 0 0 14px;
padding:3px 0; /* If you are using a Blogger Template change 0 with 15px */
font-size:12px; /* Font size of text inside tabs */
font-weight:bold;
}
.tabviewnav li {
list-style:none;
margin:0;
display:inline;
}
.tabviewnav li a {
padding:3px 6px;
margin-right:1px;
background:#F6F6F6; /* The background color of the tabs */
border-radius:5px 5px 0 0;
-moz-border-radius:5px 5px 0 0;
-webkit-border-radius:5px 5px 0 0;
text-decoration:none;
color:#222222;
}
.tabviewnav li a:hover {
color:#222222;
background:#EBEBEB; /* Background color of the tab on mouseover */
text-decoration:none;
}
.tabviewnav li.tabviewactive a,
.tabviewnav li.tabviewactive a:hover {
background:#EBEBEB; /* Background color of the active tab */
color:#222222;
}
.tabviewcont .tabviewtab {
padding:5px;
border:1px solid #EEEEEE; /* Border around the container */
background:#fff; /* The background color of the gadget */
}
.tabviewcont .tabviewtab h2,
.tabviewcont .tabviewtabhide {
display:none;
}
.tabviewtab .widget-content ul{
list-style:none;
margin:0 0 10px 0;
padding:0;
}
.tabviewtab .widget-content li {
border-bottom:1px solid #ccc;
margin:0 5px;
padding:2px 0 5px 0;
}

• Now find Tag

• Now Copy The Below Script and paste it above Tag

• Now Search for 
  or 

  (it will look like the below screenshot)

• Now Paste The Following Script Just above this Script 

 

  

 

•  And That's it,Now Go To Layout Section,you will see there 3 New Areas for adding Gadgets.

Changes and Implementation 

If you want to add any Gadget to the list of single Container,just Click On Add a Gadget,and Drag the Gadget to that section.Now if you are interested in adding more Tabs,then follow the below steps.

• In the Above last one step we have highlighted 

 ,now if you want to add new tab just add the below script before 

 Tag,and that's it.

• Note : If you are adding new tab,then use different ID for each tab,e.g for tab 6 use "Tab6" in the script.
• Next Important Point is that if your Template sidebar is too short they don't add long and high width Gadget to this Widget.
• ! important ! : This Widget may slow your Blog Loading Speed, because this widget is lil bit heavy.
• Note:- If your Blog Sidebars is too short it will not work perfect,either it will just show title or nothing 

So What's Up :- How Was the Widget?You will Like it to Add into your Blog?Share your Beautiful ideas with us.Stay Blessed,Happy Blogging.