Cara Membuat Tab View Pada Blog

. Membuat Tab View Menu Pada Blog

Mau tau cara bikin Tab view widget seperti contoh yang ada diblog saya. Mudah sekali kalau sobat tertarik dan ingin mencoba, please..,lajulah..dak ape-ape ao tinggal ucap Bismillah 3x lalu tarik nafas dalam-dalam dan lakukan hal berikut :

Pertama login ke Akun blogger dan pilih Edit HTML lalu cari kode ]]></b:skin> kalu lah ketemu nti laju copy pulek kode yang dibawah ikak lepak ke dipucuk kode tadi ( kalo udah ketemu langsung aja copy kode dibawah ini dan letakan diatas ]]></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: 90px; /* ukuran lebar menu */
text-align: center;
height: 24px; /* ukuran tinggi menu */
padding-top: 3px;
margin-right:4px; /* jarak antarmenu */
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/gudangfathur/kode/talangbalaibaru.JPG"); /* 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 */
}

Kedua copy kode dibawah ini lalu letakan dibawah ]]></b:skin>

<script src="http://sites.google.com/site/gudangfathur/kode/tabview.js" type="text/javascript"/>

Oke sipp beres,.. mudah kan....?

Eh belum sob..., masih ada satu lagi nih.! langkah terakhir.
Masuk ke tab Elemen Halaman lalu pilih tambahkan widget dan pilih HTML masukan kode dibawah ini :

<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>
</div>
<div style="width: 99%; 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-->

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

<script type="text/javascript">tabview_initialize('TabView');</script>
<div style="font-size:90%; text-align:right; text-shadow:2px 2px 2px #adadad;"><a href="http://fathur-net.blogspot.com" target="_blank" title="Tabview Widget">Widget by Fathur rakhman</a></div>

Silakan Edit judul menu 1, 2, 3 dan isinya pada bagian yang bercetak tebal diatas
Selamat mencoba