cara membuat tabview

Langkah Pertama

•  Login ke akun Blogger kamu.
•  Dari halaman dashboard, pilih Edit HTML.
•  Pada halaman Edit HTML, cari kode ]]></b:skin> pada script template blog kamu. Tekan Control F untuk mencarinya.
•  Kopikan kode CSS berikut (gunakan Control C) dan letakkan di atas kode ]]></b:skin> tersebut.                            /* 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 bagian yang diberi tanda keterangan, kamu dapat mengubahnya sesuai dengan yang diinginkan, seperti pada ukuran, warna maupun jenis hurup. 
• Setelah itu letakkan sumber script berikut di bawah ]]></b:skin>

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

    Simpanlah hasil editing tersebut.

Langkah Kedua

•  Pilih tab Elemen Halaman (Page Element).
•  Klik pada bagian Tambah Gadget dan pilih HTML/JavaScript.
•  Kopikan script berikut dan letakkan pada kotak Content yang tersedia:

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

• Simpan hasil kerjaan kamu dan lakukan pratinjau (preview) untuk melihat hasilnya.

Nah, cukup mudah kan? Ok coy, selamat mencoba....