Cara Membuat Multi Tab di Sidebar Blog

Cara Membuat Multi Tab di Sidebar Blog - Multi Tab Widget pada blogger sebenarnya sudah banyak yang menggunakannya terlebih pada template-template yang baru dan update pasti telah dilengkapi dengan Multi Tab Widget ini dibagian Sidebar blognya. Namun, bagi anda yang masih belum memiliki Multi Tab widget ini diblog anda atau sekedar ingin merubah tampilan Multi Tab yang telah ada, anda bisa mencoba Multi Tab yang akan saya bagikan pada kesempatan kali ini.

Salah satu manfaat dari widget ini yaitu jika anda ingin menambahkan terlalu banyak widget disidebar, maka dengan memasang multi tab ini akan menghemat penempatan widget dikolom sidebar yang biasanya akan memanjang kebawah. Penempatan setiap widget pada sidebar ini bisa anda bagi menjadi beberapa kolom yang akan membuat tampilan blog anda menjadi terlihat lebih rapi dan menarik.

Baiklah, untuk anda yang ingin tahu Cara Membuat Multi Tab di Sidebar Blog, berikut cara penerapannya:
1. Masuk ke Akun Blogger
2. Pilih Template > Edit HTML
3. Lalu cari kode ]]></b:skin> atau </style> dan paste kode barikut tepat diatasnya

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

4. Selanjutnya paste kode berikut tepat diatas 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>

5. Terakhir paste kode Multi Tab Widget berikut setelah 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>

Jangan lupa untuk mengganti Nama Judul Widget yang telah ditandai diatas, dengan judul widget yang ingin anda pasang. Selanjutnya Simpan Template anda dan lihat hasilnya. Sekian tips kali ini, Semoga bermanfaat!