Cara Merubah Default Sidebar Widget Menjadi Triple Tab

Pada kesempatan kali ini saya akan berbagi sedikit pengalaman pribadi tentang cara merubah sidebar standard blog menjadi Triple Tab Sidebar. Keuntungan dari merubah Sidebar ini menjadi triple tab sidebar adalah akan menghemat ruang penempatan untuk sidebar lain. Jadi sangat bagus untuk bisa menempatkan lebih banyak sidebar yag akan ditampilkan dalam blog atau website.

Agar sesuai dengan apa yang diharapkan, maka perhatikan langkah demi langkah penempatan kode script, style atau CSS dibawa ini dengan seksama. Langkah yang harus dilakukan adalah:

Masuk ke akun blogger.
Masuk ke menu tab Template > Edit HTML.
Letakkan kode dibawah ini tepat diatas kode]]></b:skin> atau </style>.

/* Skin Design Triple 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 #e8641b;font-size:14px;text-transform:capitalize}

Letakkan kode dibawah ini 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>

Letakkan kode dibawah ini tepat 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>

Kemudian ganti yang di tag merah diatas sesuai dengan selera dan keinginan. Kemudian SAVE dan dan silahkan lihat hasilnya.

Result

Demikian tutorial yang bisa kami sampaikan, jika kurang dipahami silahkan tinggalkan pesan.