Cara Membuat Tabs 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.

Bila anda berminat silahkan anda ikuti langkah - langkah dibawah ini :

1. Login ke blogger dengan ID anda.

2. Klik Rancangan.

3. Dan KLik tab Edit HTML.

4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.

5. Jangan lupa Klik tombol "Expand Widget Templates"

6. Langkah selanjutnya cari lagi kode dibawah ini atau yang mirip dengan kode ini :

]]></b:skin>

7. Copy kode dibawah ini dan taruh sebelum kode

/*----- 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;l
ist-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:10px 14px;
display:block;
text-decoration:none;
font:bold 12px Arial,Helvetica,Sans-serif;
text-transform:uppercase;
background: #e32dcb;
-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 0px 0 0;
}
.tabs-widget-content{}
.tabviewsection{
margin-top:10px;
margin-bottom:0px;}

8. Langkah selanjutnya cari lagi kode di bawah ini atau yang mirip dengan kode ini :

<div id='sidebar-wrapper'>

9. Copy kode di bawah ini dan taruh tepat setelah kode <div id='sidebar-wrapper'> :

<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;'/>

Catatan : Silahkan anda bisa mengganti Judul tab yang berwarna merah diatas.

Klik save, sekarang kamu sudah memiliki sebuah menu tab sidebar dalam template kamu, jika ada kesulitan silahkan tinggalkan pertanyaan di kolom komentar.