Cara Membuat TabView di Sidebar

Setelah beberapa hari tidak posting karena disibukkan dengan aktivitas yang sangat melelahkan ingin posting malah jadi malas, huft beginilah sifat manusia kalo dah keenakan jadi lupa isi artikel di Blog, ya sudah langsung saja, kali ini kita bahas tentang cara buat TabView, selain berfungsi untuk mempercantik Blog kita TabView ini juga sangat berfungsi untuk memaksimalkan halaman Blog kita, kalo dah cantik Blog kita siapa sich yang gak betah berkunjung ke Blog kita, lagi pula kalo halaman blog kita masih menyisakan ruang banyak kan bisa digunakan tuk pasang gedget yang lain. Artikel ini saya dapat waktu jalan-jalan ke blog "SC Comunity's".Oke langsung saja kita mulai :

Pertama :

Silahkan Buka Blog anda menggunakan Open ID anda, kalau sudah Klik tata letak terus lanjutkan lagi dengan klik edit html, copy dan paste-kan code diatas ini dan letakan diatas code ]]></b:skin>; untuk memudahkan dalam pencarian code tersebut klik F3 atau ctrlF paste code tersebut di kotak cari terus klik berikutnya.

/* 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*/
}

Pada code yang diberi warna biru bisa shobat ganti sesuai selera shobat masing-masing.

Setlah itu copy paste code dibawah ini dan letakkan dibawah code ]]></b:skin> 

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

Langkah yang kedua, 
- Pilih tab Elemen Halaman (page element)  
- Pilih pada bagian Gadget dan pilih HTML/Java Scrip  
-  Copy-kan scrip berikut dan letakkan pada kotak yang telah tersedia di HTML/Java Secrip 

<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/>
Isi 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> 

Tulisan code yang berwarna biru tebal bisa shobat ganti sesuai dengan kebutuhan yang shobat sekalian inginkan. Misalnya,  width (lebar) dan height (tinggi) shobat sekalian dapat menggunakan satuan ukuran % atai pixel (px) yang disesuaikan dengan lebar sidebar shobat masing-masing. Begitu juga dengan Judul Menu dan Isi Menu  dabat shobat buat sendiri sesuai dengan keinginan shobat sekalian.
Shobat sekalian juga bisa membuat menu-menu lain (lebih dari 4) sesuai lebar sidebar blog shobat.
Langkah terakhir tinggal klik save, jadi dech Tab Vew-nya...!!!


Selamat mencoba shobat sekalian...!!! jangan lupa setelah berhasil ucapkan alhamdulillah...!!!