Cara Membuat Tab View Widget Pada Sidebar

Tab view adalah cara untuk menghemat sidebar kita dari tampilan sedibar yang banyak memakan tempat. Tips ini telah banyak dilakukan oleh orang-orang untuk memperindah blognya, termasuk blog ini. Untuk lebih jelasnya anda juga dapat membaca artikel saya yang ini
Cara Membuat Menu Tab View pada Blog
Nah kalau sudah membaca artikel saya yang diatas, pasti sobat blogger sudah mengerti apa itu Menu Tab View. Pada artikel saya yang pertama itu beda tampilan tab Viewnya, kalau yang ini bisa teman lihat setelah anda memasanganya pada blog anda.
Oke langsung saja, kita ke langkah-langkah untuk membuatnya.


1. Pertama sekali Login dulu ke blogger.com
2. Pada Dasbor anda, silahkan pilih Rancangan
3. Kemudian pilih Edit HTML
4. Cari kode seperti ini ]]></b:skin>
5. Letakkan kode berikut diatas kode ]]></b:skin>

/* Menu Tab View
----------------------------------------------- */
div.TabView div.Tabs {
padding-top: 0px;
height: 24px;
overflow: hidden;
}

/* Menu Utama */
div.TabView div.Tabs a {
float: left;
display: block;
width: 80px; /*ukuran lebar tabmenu*/
text-align: center;
height: 24px; /*ukuran tinggi tabmenu*/
padding-top: 3px;
margin-right:4px; /*jarak antartabmenu*/
vertical-align: middle;
border: 1px solid #CCC; /*warna border menu*/
border-bottom-width: 0;
font-family: "Arial", Times New Roman, Serif; /*jenis hurup menu*/
font-size: 12px; /*besar hurup menu*/
letter-spacing: -1px;
background-color: #A4A4A4; /*warna latar menu*/
color: #FFFFFF; /*warna hurup menu*/
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
}

div.TabView div.Tabs a.Active {
background-color: #888888; /*warna background menu aktif*/
color: #FFFFFF;
}

div.TabView div.Tabs a:hover {
background-color: #999999; /*warna background menu hover*/
color: #FFFFCC;
font-weight: bold;
}

/* Kotak Utama */
div.TabView div.Pages {
clear: both;
border: 1px solid #CCC; /*warna border kotak utama*/
overflow: hidden;
background:url("http://sites.google.com/site/ruangsc/image/bgtabview.gif"); /*background kotak utama*/
}

div.TabView div.Pages div.Page {
height: 100%;
padding: 0px;
overflow: hidden;
}

div.TabView div.Pages div.Page div.Pad {
padding: 3px 5px;
font-size: 12px; /*besar hurup kotak utama*/
}

Tulisan yang berwana merah, dapat anda edit dendiri kode-kodenya.

6. Kemudian letakkan kode berikut di bawah ]]></b:skin>

<script src="http://enes-sc.googlecode.com/files/tabview.js" type="text/javascript"/>

7. Simpan Template
Setelah anda melakukan Simpan Template, Kemudian Pilih Elemen Laman>>>>Tambah Gadget>>>>Pilih HTML/JavaScript
Kemudian Letakkan Kode Berikut:

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 100%;" class="Tabs">
<a title="Keterangan Menu 1">Menu 1</a>
<a title="Keterangan Menu 2">Menu 2</a>
<a title="Keterangan Menu 3">Menu 3</a>
<a title="Keterangan Menu 4">Menu 4</a>
</div>
<div style="width: 100%; height: 200px;" class="Pages">

<!--Awal Menu 1-->
<div class="Page"><div class="Pad">
Isi Menu 1.1<br/>
Isi Menu 1.2<br/>
Isi Menu 1.dst<br/>
</div></div>
<!--Akhir Menu 1-->

<!--Awal Menu 2-->
<div class="Page"><div class="Pad">
Isi Menu 2.1<br/>
si Menu 2.2<br/>
Isi Menu 2.dst<br/>
</div></div>
<!--Akhir Menu 2-->

<!--Awal Menu 3-->
<div class="Page"><div class="Pad">
Isi Menu 3.1<br/>
Isi Menu 3.2<br/>
Isi Menu 3.dst<br/>
</div></div>
<!--Akhir Menu 3-->

<!--Awal Menu 4-->
<div class="Page"><div class="Pad">
Isi Menu 4.1<br/>
Isi Menu 4.2<br/>
Isi Menu 4.dst<br/>
</div></div>
<!--Akhir Menu 4-->

</div></div></form>

<script type="text/javascript" src="http://enes-sc.googlecode.com/files/tabview-tab.js"></script>

Silahkan Anda Edit tulisan yang berwarna merah dan hijau di atas. Sesuai keperluan anda.
8. Kemudian Silahkan anda SAVE