Cara Memasang Multi Tab Sidebar di Blogger

Dipostingan kali ini akan membahas seputar Widget yang sering dipasang pada sidebar blog. Widget ini sangat membantu pengunjung untuk dapat mengetahui isi dari Blog yang disajikan dan merupakan salah satu yang diwajibkan juga oleh Webmaster Google sebagai menu navigasi dalam blog.

Ada banyak ragam dan cara para blogger menampilkan Widget di Sidebar, yang biasa umumnya adalah widget Popular post, Recent Post dan Iframe Facebook fans page. Masalah muncul jika space yang ada di dalam sidebar tersebut terbatas untuk pemasangan widget pada sidebar.

Dipostingan kali ini akan kita bahas bersama Memasang Multi Tab Sidebar di Blogger yang mungkin bisa menjadi solusi atas permasalahan keterbatasan space pada sidebar blog sobat, disini akan dibahas cara membuat Multi Tab pada sidebar yang akan ditampilkan memanjang ke bawah dan dibagi menjadi tiga bagian tentunya akan membuat lebih rapih tampilan di sidebar. nah  bagi sobat yang mau mencoba memasangnya silahkan ikuti berikut ini Cara Memasang Multi Tab Sidebar di Blogger.

Langkah Pertama

Silahkan sobat salin kode CSS dibawah ini lalu letakkan kode ini tepat diatas ]]></b:skin> atau </style>.

/* 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}

Langkah Ke Dua
Silahkan salin kode Jquery dibawah ini lalu letakkan diatas kode </body>.

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

Langkah Ketiga
Silahkan salin kode HTML dibawah ini lalu letakkan tepat dibawah kode <div id='sidebar-wrapper'>

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

Perhatikan kode yang ditandai Popular, Tags, Archive silahkan sesuaikan dengan yang mau ditampilkan.

Result

Perhatikan setiap langkah yang diberikan jika sudah sesuai silahkan SAVE dan selesai selamat mencoba semoga bermanfaat.