Membuat Menu Tab View Sederhana

Sobat ingin membuat tab view yang sederhana. Tab view memiliki fungsi dan manfaat yang sangat penting. Tab view dapat menampilkan komentar, link, postingan dan lain sebagainya dalam sebuah kotak kecil. Tab view juga dapat menghemat space atau ruang dari blog sobat. Ingin tau bagaimana cara membuatnya ikuti langkah berikut:

1. Login ke blogger
2. Pilih Rancangan dan klik pada Edit HTML
3. Cari kode ]]></b:skin>
4. Kopi kode dibawah ini, letakkan 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*/
}

Keterangan:
- Sobat dapat merubah kode diatas yang pada keterangan berwarna merah
- Sobat dapat juga mengganti background tab view berwarna ungu.

5. Kopi kode dibawah ini, letakkan dibawah kode ]]></b:skin>

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

6. Kemudian simpan template tersebut
7. Masuk ke Rancangan -- Elemen Laman, tambah gadjet kemudian pilih HTML/JavaScript
8. Masukan kode dibawah ini:

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

<!--Awal Menu 1-->
<div class="Page"><div class="Pad">

Isi keterangan atau widget anda disini untuk Menu 1

</div></div>
<!--Akhir Menu 1-->

<!--Awal Menu 2-->
<div class="Page"><div class="Pad">

Isi keterangan atau widget anda disini untuk Menu 2

</div></div>
<!--Akhir Menu 2-->

<!--Awal Menu 3-->
<div class="Page"><div class="Pad">

Isi keterangan atau widget anda disini untuk Menu 3

</div></div>
<!--Akhir Menu 3-->

<!--Awal Menu 4-->
<div class="Page"><div class="Pad">

Isi keterangan atau widget anda disini untuk Menu 4

</div></div>
<!--Akhir Menu 4-->

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

<script src='http://blogtrikdantips-blogspot.googlecode.com/files/linkblog.js' type='text/javascript'/>

9. Edit Tabview (isi judul dan keterangan serta widget yang ingin ditambahkan)
10. Simpan gadjet lalu lihat hasilnya!!