Cara Membuat Widget Multi Tab Di Sidebar Blog

 Print This Page

Setiap pengunjung blog mengharapkan blog yang dikunjungi menyenangkan dimana menu-menu yang tersedia mudah dijangkau. Dalam kesempatan ini mari kita bersama-sama belajar membuat Widget Multi Tab di sidebar blog. Keuntungan memasang widget 3 kolom ini bisa mengurangi jumlah widget agar tidak memanjang kebawah dan terlihat simpel.

Widget multitab yang biasa kita temui biasanya berisi artikel Popular Post, Label dan Archive, sehingga saat kita membuka kolom pertama, kolom kedua dan kolom ketiga akan tersembunyi. Tidak berlama-lama kita langsung saja praktek:

Berikut langkah-langkahnya:

• Login ke akun blog
• Masuk ke Theme dan pilih Edit HTML (sebelumnya emplate kita backupa dulu untuk berjaga-jaga)
• Tekan CTRL + F dan cari kode ]]></b:skin> atau </style>
• Copy dan pastekan kode script berikut diatas atau sebelum kode tadi:

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

• Copy dan pastekan kode script berikut diatas atau sebelum 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>

• Copy dan pastekan kode script berikut 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>

• Simpan Template

Selanjutnya kita tinggal mengisi widget tadi dengan widget seperti Populat Post, Label, Archive

Caranya:

• Masuk ke Layout ==> Tambahkan Widget di kolom yang bertulisan Multitabsidebar1, Multitab-sidebar2, Multitab-sidebar3
• Tinggal pilih, widget apa yang mau di pakai
• Selesai

Demikian artikel mengenai , mudah-mudahan bermanfaat bagi Sobat semua. Selamat mencoba.

Berbagi :