This time I will share about
How to Install Multi Tab Sidebar Widget that you may have seen on some web
use.
One benefit of this widget
is that if you've added too many widgets in the sidebar, then by installing a multi-tab
will save the placement of widgets in the sidebar column which usually extends
downward. The placement of each widget in the sidebar you can
divided into several columns
that will make your blog become more look neat and attractive.
Immediately, the way it is applied as follows:
1. Log in to Blogger >> Click Template >> Edit HTML >> Copy the code below just above ]]></ b:skin> or </style>
CSS - Go Widget
/* 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,.multitab-section h3,.multitab-section h4,.multitab-section
h5,.multitab-section h6 {display:none;}
.multitab-widget li
a.multitab-widget-current{padding-bottom:20px;margin-top:-10px;background:#fff;color:#444;text-decoration:none;border-top:5px
solid #22a1c4;font-size:14px;text-transform:capitalize}
2.
Next, copy the code below just above the </body>
jQuery - Go Widget
<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-content-widget-id:first").show();
$("ul.multitab-widget-content-tabs-id li a").click(function() {
$("ul.multitab-widget-content-tabs-id li
a").removeClass("multitab-widget-current 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 code below
just below <div
id = 'sidebar-wrapper'>
HTML - Go Widget
<div
class='multitab-section'>
<ul
class='multitab-widget multitab-widget-content-tabs-id'>
<li
class='multitab-tab'><a
href='#multicolumn-widget-id1'>Popular</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-content-widget-id'
id='multicolumn-widget-id1'>
<b:section
class='sidebar' id='sidebartab1' preferred='yes'/>
</div>
<div class='multitab-widget-content
multitab-widget-content-widget-id' id='multicolumn-widget-id2'>
<b:section
class='sidebar' id='sidebartab2' preferred='yes'/>
</div>
<div
class='multitab-widget-content multitab-widget-content-widget-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 you want.
Finally save the template
and see the results. A few tips How to Install Multi Tab Sidebar Widget…. good
luck.