Cara Membuat Widget Multi Tab Pada Sidebar Blogspot

Tidak terasa sudah 2 tahun lebih saya tidak pernah posting di blog ini, tidak kebayang waktu yang begitu lama, karena saya terlalu sibuk dengan pekerjaan dunia nyata. Ok, tanpa basa-basi saya akan membagikan sedikit tutorial tentang bagaimana Cara Membuat Widget Multi Tab Pada Sidebar Blogspot. Seperti gambar dibawah ini.

Apabila anda memiliki widget di blog yang cukup banyak, maka dengan memasang multi tab ini akan menghemat ruang yang ada di sidebar blog kalian. Jadi widget yang ada di sidebar blog anda akan terlihat lebih rapi, menarik, dan tidak terlalu memanjang kebawah. Tutorial ini saya dapatkan dari pengalaman saya selama bermain di dunia blogging. Cara ini mungkin sudah banyak yang membahasnya, Tapi jika anda belum mengetahuinya silahkan ikuti langkah-langkah di bawah ini.

Cara Membuat Widget Multi Tab Pada Sidebar Blogspot :

1. Login ke blogger
2. Pilih Template
3. Klik Edit HTML
4. Letakkan kode di bawah ini tepat di atas kode ]]></b:skin>

/* Multi Tab Widget */
.multitab-section {width:100%}
.multitab-widget {list-style:none;margin:0;padding:0}
.multitab-widget li {float:left;margin:0;padding:0;list-style:none;cursor:pointer}
.multitab-widget li a {background:-moz-linear-gradient(top,#bbbbbb,#cccccc);font-family: 'Cabin', sans-serif;font-weight:normal;font-size:14px;font-style:italic;color:#000000;margin:0;padding:5px 0;display:block;text-decoration:none}
.multitab-tab {width:33.334%;text-align:center;border:0}
.multitab-section h2,.multitab-section h3,.multitab-section h4,.multitab-section h5,.multitab-section h6 {display:none}
.multitab-widget li a.multitab-widget-current {background:-moz-linear-gradient(top,#356ba4,#3a76b4);color:#ffffff;padding:5px 0;margin:0;text-decoration:none}
.multitab-widget-content {margin:0;padding:26px 0 0 0}

5. Selanjutnya letakkan kode di bawah ini tepat di atas 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>

6. Selanjutnya letakkan kode di bawah ini tepat di bawah 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>

7. Terakhir Simpan Template kalian

Perhatian :

• Ganti tulisan yang berwarna biru sesuai dengan judul widget yang akan anda pasang.

Mungkin hanya Cara Membuat Widget Multi Tab Pada Sidebar Blogspot yang dapat saya bagikan kali ini. Semoga bermanfaat.