Cara Memasang Widget Multi Tab 3 Kolom Pada Sidebar

Pada beberapa hari lalu saya pernah mencoba mencari tahu Cara Memasang Widget Multi Tab 3 Kolom Pada Sidebar dari beberapa artikel blog lain, dengan tujuan agar tampilan blog saya ini terlihat rapi dan keren. Namun setelah saya terapkan tutorial dari blog tersebut tidak jalan di template saya, entah karna saya yg salah cara memasangnya atau ada perbedaan kode pada masing masing template.

Dan akhirnya saya menemukan artikel yang sama mengenai Multi Tab 3 Kolom ini dan tutorialnya berbeda dari tutorial tersebut saya coba terapkan dan saya coba pasang di blog zaputra.com ini akhirnya berhasil.

Barangkali ada sobat blogger yang mengalami permasalahan seperti saya dan sudah mencoba dari beberapa tutorial tapi tidak berhasil, tidak ada salahnya kalo sobat blogger mencoba dengan yang sudah saya terapkan pada blog saya ini.

Cara Memasang atau Membuat Multi Tab 3 Kolom Pada Sidebar widget

1. Backup dulu template anda untuk menghindari terjadinya error disaat ada pemasangan yang salah.
2. Login pada akun blogger.
3. Pilih menu Template > Klik Edit Html.
4. Silahkan anda letakan kode CSS di bawah ini tepat di atas kode ]]></b:skin>

/* Multi Tab Widget */
.multitab-section{background:transparent;text-transform:uppercase;width:100%;max-width:337px;z-index:-999}
.multitab-widget{list-style:none;margin:0 auto;background:#444;padding:10px 10px 40px;border-radius:4px 4px 0 0;border-bottom:4px solid #ff5050;width:100%}
.multitab-widget li{list-style:none;padding:0px;margin:0;float:left}
.multitab-widget li a{background:transparent;display:block;padding:10px 0;font:13px merriweather sans,sans-serif;font-weight:700;text-shadow:0 1px 1px #000;color:#999}
.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:12px 0;margin:0;background:#ff5050;text-decoration:none;text-transform:uppercase;border-radius:4px 4px 0 0;text-shadow:0 1px 1px #000;color:#fff}

5. Selanjutnya silahkan anda letakan kode di bawah ini tepat di bawah kode <div class='sidebar-inner'> Kalo tidak ketemu bisa di bawah kode <div id='sidebar-wrapper'> atau sejenisnya yang berhubungan dengan sidebar, Mempermudah pencarian tekan CTRL + Fdengan kata pencarian ='sidebar dan apabila masih tidak ketemu anda bisa komentar dibawah nanti saya coba bantu.


<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>
<div class='multitab-section'>
<ul class='multitab-widget multitab-widget-content-tabs-id'>
<li class='multitab-tab'><a href='#multicolumn-widget-id1' title='Popular'><i class='fa fa-star fa-fw'/>Popular</a></li>
<li class='multitab-tab'><a href='#multicolumn-widget-id2' title='Label'><i class='fa fa-tags fa-fw'/>Kategori</a></li>
<li class='multitab-tab'><a href='#multicolumn-widget-id3' title='Arsip'><i class='fa fa-tasks fa-fw'/>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'>
</b:section>
</div>
<div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'>
</b:section>
</div>
<div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'>
</b:section>
</div>
</div>