Cara Membuat Multi Tab Sidebar Blogger

KANGDAMAI.COM - Multi Tab Sidebar sudah bukan fitur baru dalam dunia blogging dengan menampilkan dua atau lebih widget dalam satu baris kolom pada sabar sehingga per kecil ruang yang digunakan untuk memasang Widget.


Multi Tab Side bar ini juga sangat cocok bagi yang blognya ayoritas dibuka di mobile. Saya pun juga menggunkan fitur ini di karenakan sangat responsive. oke berikut merupakan cara memasangnya. sumber script ini berasal dari blog Arlina Design.

Pertama-tama copy kode dibawah ini dan letakkan di atas code ]]></b:skin> atau </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}

Script by : Arlina Design

Selanjutnya pasang Juery ibawah ini dengan meletekan kode ini diatas code </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>

Script by : Arlina Design

Seteleah selesai dengan kedua script diatas selanjutnya memasang code pemanggil yang kita letakkan di <div id='sidebar-wrapper'> atau kadang <aside id='sidebar-wrapper' .

<div class='multitab-section'>
<ul class="multitab-widget multitab-widget-content-tabs-id">
<li class="multitab-tab"><a href="https://www.blogger.com/blogger.g?blogID=6025770914997706333#multicolumn-widget-id1">Popular
></li>
<li class="multitab-tab"><a href="https://www.blogger.com/blogger.g?blogID=6025770914997706333#multicolumn-widget-id2">Tags></li>
<li class="multitab-tab"><a href="https://www.blogger.com/blogger.g?blogID=6025770914997706333#multicolumn-widget-id3">Archive
></li>
<div class="multitab-widget-content multitab-widget-content-widget-id" id="multicolumn-widget-id1">
<b:section class="sidebar" id="sidebartab1" preferred="yes">
<div class="multitab-widget-content multitab-widget-content-widget-id" id="multicolumn-widget-id2">
<b:section class="sidebar" id="sidebartab2" preferred="yes">
<div class="multitab-widget-content multitab-widget-content-widget-id" id="multicolumn-widget-id3">
<b:section class="sidebar" id="sidebartab3" preferred="yes">
</div>

Script by : Arlina Design

Nah semoga sukses ya dalam Cara Membuat Multi Tab Sidebar Blogger. Semoga bermanfaat dan sukses dalam membangun blognya.