Cara Memasang Multi Tab Sidebar Widget

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

Salah satu manfaat dari widget ini yaitu bila 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 isyarat 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 isyarat 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 isyarat 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 isyarat 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.

Tweet

Subscribe to receive free email updates: