How to Install Multi Tab Sidebar Widget in Blogger.
One benefit of this widget is that you had added too many
widgets in the sidebar, then by installing multi tab is going to save the
placement of widgets in the sidebar column..It will create your blog becomes
more look neat and attractive.
Here is how to add this Widget….
1.Log in to Blogger> Click
Template> Edit HTML> Copy the code below just above]]> </ b:
skin> or </ style>.
CSS#
/ * Multi Tab Widget * /
.multitab-section {background: # fff; text-transform: uppercase; width: 100%}
.multitab-widget {list-style: none; margin: 0 0 10px; padding: 0}
.multitab-widget li {list-style: none; padding: 0; margin: 0; float: left}
.multitab-widget li a {background: # 22a1c4; color: # fff; display: block; padding: 15px; font-size: 13px; text-decoration: none}
.multitab-tab {border: 0; width: 33.3%; text-align: center}
.multitab-section h2, h3 .multitab-section, .multitab-section h4, h5 .multitab-section, .multitab-section h6 {display: none;}
.multitab-li widget solid # 22a1c4; font-size: 14px; text-transform: capitalize}
2.copy the code below just above the
</ body>
jQuery#
jQuery#
<Script type = 'text / javascript'>
// <! [CDATA [
// Multi tab widget
jQuery (document) .ready (function ($) {$ (". multitab-widget-content-widget-id"). hide (); $ ("ul.multitab-widget-content-tabs-id li: first a ") .addClass (" multitab-widget-current "). show (); $ (". multitab-widget-widget-content-id: first '). show (); $ ("ul.multitab-widget-content -tabs-id li a "). click (function () {$ (" ul.multitab-widget-content-tabs-id li a "). removeClass (" multitab-current widget-a "); $ (this) .addClass ("multitab-widget-current"); $ (". multitab-widget-content-widget-id"). hide (); var activeTab = $ (this) .attr ("href"); $ (activeTab ) .fadeIn (); return false;});});
//]]>
</ Script>
3.Then apply the following code just
below <div id = 'sidebar-wrapper'>
HTML#
HTML#
<Div class = 'multitab-section'> <Ul class = 'multitab multitab-widget-widget-content-tabs-id'> <Li class = 'multitab-tab'> <a href='#multicolumn-widget-id1'>Latest</a> </ li> <Li class = 'multitab-tab'> <a href='#multicolumn-widget-id2'>Tags</a> </ li> <Li class = 'multitab-tab'> <a href='#multicolumn-widget-id3'>Archive</a> </ li> </ Ul> <Div class = 'multitab-widget-content multitab-widget-widget-content-id' id = 'multicolumn-widget-ID1'> <B: section class = 'sidebar' id = 'sidebartab1' preferred = 'yes' /> </ Div> <Div class = 'multitab-widget-content multitab-widget-widget-content-id' id = 'multicolumn-widget-ID2'> <B: section class = 'sidebar' id = 'sidebartab2' preferred = 'yes' /> </ Div> <Div class = 'multitab-widget-content multitab-widget-widget-content-id' id = 'multicolumn-widget-id3'> <B: section class = 'sidebar' id = 'sidebartab3' preferred = 'yes' /> </ Div> </ Div>
4.Change the name of the widget
title that I put a mark on the code above in accordance with the title of the
widget that you want. Last save template and see the results.
