Widget Multi Tab Sidebar Blogger

Manfaat dari widget multi tab sidebar ini adalah anda akan menghemat penempatan beberapa widget di bagian sidebar yang biasanya memanjang ke bawah menjadi sejajar dalam 1 widget yang akan membuat blog anda menjadi lebih terlihat rapi dan menarik.

Widget multi tab pada sidebar ini sudah banyak digunakan di beberapa web maupun blog dan jika anda tertarik ingin memasangnya pada blog anda khususnya blog di blogger silahkan ikuti caranya dibawah ini :

Login ke Blogger kemudian pada dashbor pilih Tema > Edit HTML

Langkah 1: Menambahkan kode CSS Widget Multi Tab Sidebar

a. Salin kode CSS di bawah ini tepat di atas  ]]></b:skin>

b. Untuk custom template letakan kode css dibawah ini diatas </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}

Langkah 2: Menambahkan kode Script JQuery Widget Multi Tab Sidebar

Selanjutnya salin kode di bawah ini tepat 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>

Langkah 3: Menambahkan kode HTML Widget Multi Tab Sidebar

a. Letakan kode di bawah ini tepat di bawah <div class="post-sidebar"> khusus tema official blogger seperti Terkemuka (Notable), Soho dan Emporio

b. Untuk tema pihak ke 3, custom template letakan kode di bawah ini tepat 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'>Terbaru</a></li>
<li class='multitab-tab'><a href='#multicolumn-widget-id2'>Unggulan</a></li>
<li class='multitab-tab'><a href='#multicolumn-widget-id3'>Arsip</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 warna kuning pada kode di atas sesuai dengan judul widget yang anda pasang.

Terakhir simpan template dan lihat hasilnya

Share this post