Inilah Cara Memasang Multi Tab Sidebar Widget - Fezarzone

Kali ini Saya akan membuatkan ihwal Cara Memasang Multi Tab Sidebar Widget yang mungkin pernah sahabat lihat di beberapa web yang menggunakannya.

Salah satu manfaat dari widget ini yakni jikalau sahabat sudah menambahkan terlalu banyak widget di sidebar, maka dengan memasang multi tab ini akan menghemat penempatan widget di kolom sidebar yang biasanya memanjang ke bawah. Penempatan setiap widget pada sidebar ini dapat sahabat bagi menjadi beberapa kolom yang akan menciptakan blog sahabat menjadi lebih terlihat rapi dan menarik.

Langsung saja, cara penerapannya sebagai berikut :

Login ke Blogger > Klik Template > Klik Edit HTML > Salin instruksi di bawah ini sempurna di atas  ]]></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}

Selanjutnya salin instruksi di bawah ini sempurna di atas </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>

Kemudian terapkan instruksi di bawah ini sempurna di bawah  <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>

Ganti nama judul widget yang Saya beri tanda pada instruksi di atas sesuai dengan judul widget yang sahabat pasang.

Terakhir simpat template dan lihat hasilnya

Result

Sekian tips Cara Memasang Multi Tab Sidebar Widget, selamat mencoba.