CARA MEMBUAT TABVIEW MENU DI BLOG BLOGGER

Bagi temen2 blogger yg mau menambahkan aplikasi tabview menu spt ini

berikut ini tahapan untuk membuatnya:

1) Login ke Akun blogger dan pilih Edit HTML

2) Lalu cari kode ]]></b:skin> 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;

3) Download dulu kode js nya disini ini lalu setelah didownload letakan kode yang didownload tadi dibawah
    ]]></b:skin>

4) 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://tesblog123blog.blogspot.com/cara-membuat-tabview-menu-pada-blog.html" target="_blank" title="Tabview Widget">Widget by Fathur rakhman</a></div>

5) Langkah Terakhir, silakan Edit judul menu 1, 2, 3 dan isinya pada bagian yang bercetak tebal diatas



Selamat mencoba!!!

link sumber