MENU TAB PADA BLOG ANDA

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...!!!