Membuat Tab Di Sidebar

Widget merupakan sebuah elemen pendukung dalam blog yang dapat menambah keleluasaan akses bagi pengunjung, tapi jika elemen ini tidak didesain maksimal bisa menjadi sebuah hal yang merusak tampilan blog. Tidak bisa dipungkiri lagi jika memasang terlalu banyak widget akan memberi kesan blog seperti sebuah kerumunan menu yang semerawut, disamping bisa membuat beban blog menjadi tambah berat. Membuat sebuah tab di sidebar bisa menjadi alternatif agar blog kamu terkesan lebih rapi, jika kamu memang membutuhkan banyak widget maka tidak ada salahnya loh untuk mencoba menambahkan sebuah tab pada sidebar. Mau coba? yuk kita langsung saja praktekan.







DEMO MENU TAB

Copy kode berikut ini

/*----- Menu Tab Sidebar----*/
.tabs-widget{list-style:none;list-style-type:none;margin:0 0 10px 0;padding:0;height:40px}
.tabs-widget li{list-style:none;list-style-type:none;margin:0 0 0 4px;padding:0;float:left}
.tabs-widget li:first-child{margin:0}
.tabs-widget li a{color:#ffffff;padding:12px 14px;display:block;text-decoration:none;font:bold 11px Arial,Helvetica,Sans-serif;text-transform:uppercase; background: #999999; -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px; -webkit-border-top-left-radius:10px; -webkit-border-top-right-radius:10px; -khtml-border-top-left-radius:10px; -khtml-border-top-right-radius:10px; border-radius:10px 10px 0 0;
}
.tabs-widget li a:hover,.tabs-widget li a.tabs-widget-current{background: #999999 left -140px ;color:#EE5D06;text-decoration:none; -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px; -webkit-border-top-left-radius:10px; -webkit-border-top-right-radius:10px; -khtml-border-top-left-radius:10px; -khtml-border-top-right-radius:10px; border-radius:10px 10px 0 0;
}
.tabs-widget-content{}
.tabviewsection{margin-top:10px;margin-bottom:10px;}

Buka rancangan template sobat di blogger, lalu cari kode ]]></b:skin> , taruh kode yang dicopy tadi tepat diatasnya.
JIka sudah, sekarang saatnya kamu menambahkan kode HTML, cari kode <div id='sidebar-wrapper'>
lalu copy kode dibawah ini dan simpan tepat dibawahnya

<div class='tabviewsection'>

<script type='text/javascript'>
            jQuery(document).ready(function($){
                $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();
                $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a&quot;).addClass(&quot;tabs-widget-current&quot;).show();
                $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id:first&quot;).show();
     
                $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).click(function() {
                    $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).removeClass(&quot;tabs-widget-current a&quot;);
                    $(this).addClass(&quot;tabs-widget-current&quot;);
                    $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();
                    var activeTab = $(this).attr(&quot;href&quot;);
                    $(activeTab).fadeIn();
                    return false;
                });
            });
        </script>

<ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'>
<li><a href='#widget-themater_tabs-1432447472-id1'>About</a></li>
<li><a href='#widget-themater_tabs-1432447472-id2'>Tags</a></li>
<li><a href='#widget-themater_tabs-1432447472-id3'>Archives</a></li>
</ul>

<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'>
<b:widget id='PopularPosts1' locked='false' title='Entri Populer' type='PopularPosts'/>
</b:section>                                     
</div>                          
                              
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/>
</b:section>                                       
</div>                          
                              
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'>
<b:widget id='Followers1' locked='false' title='Pengikut' type='Followers'/>
</b:section>                                      
</div>

</div>

<div style='height:5px;clear:both;'/>

Klik save, sekarang kamu sudah memiliki sebuah menu tab sidebar dalam template kamu, jika ada kesulitan silahkan tinggalkan pertanyaan di kolom komentar.
Note: untuk tulisan berwarna biru bisa sobat ganti sesuai judul isi widget sobat

Description: Membuat Tab di Sidebar Rating: 4.5