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 ialah widget Popular post, Recent Post dan Iframe Facebook fans page. Masalah muncul bila 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 mampu 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 bab tentunya akan membuat lebih rapih tampilan di sidebar. nah  bagi sahabat yang mau mencoba memasangnya silahkan ikuti berikut ini Cara Memasang Multi Tab Sidebar di Blogger.

Langkah Pertama

Silahkan sahabat salin aba-aba CSS dibawah ini lalu letakkan aba-aba ini sempurna 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 aba-aba </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 aba-aba HTML dibawah ini lalu letakkan sempurna dibawah aba-aba <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 aba-aba yang ditandai Popular, Tags, Archive silahkan sesuaikan dengan yang mau ditampilkan.

Result

Perhatikan setiap langkah yang diberikan bila sudah sesuai silahkan SAVE dan simpulan selamat mencoba agar bermanfaat.