Cara Membuat Menu Tab View

10.16.2012

Kembali lagi besama saya,kali ini saya coba share cara membuat menu tab view.tanpa berpanjang lebar tentang apa itu menu tab view sobat bisa lihat screen shotnya dibawah ini :

Screenshot menu tab view

Nah kira kira seperti itu menu tab view,bagaimana cara membuatnya ? ini dia langkah langkahnya :

1. Buka editor template dengan cara mengeklik menu ‘Template’ > ‘Edit HTML’ > ‘Lanjutkan’.

2. Cari kode <head> dan kemudian sisipkan kode berikut ini dibawah kode <head>.

<script src='http://abitalita.googlecode.com/files/tabview.js' type="text/javascript"/>

3. Cari kode ]]></b:skin> dan kemudian sisipkan kode di bawah ini tepat di atasnya.

/* Menu Tab View
----------------------------------------------- */
div.TabView div.Tabs {widht:100%;
padding-top: 0px;
height: 24px;
overflow: hidden;
}
/* Menu Utama */
div.TabView div.Tabs a {
float: left;
display: block;
width: 110px; /* ukuran lebar menu */
text-align: center;
height: 30px; /* ukuran tinggi menu */
padding-top: 7px;
margin-right:4px; /* jarak antarmenu */
vertical-align: middle;
border: 1px solid #ccc; /* warna border menu */
border-bottom-width: 0;
margin:0px;
padding: 5px 0;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;; /* besar hurup menu */
background-color: #4c4c4c; /* warna latar menu */
color: #FFFFFF; /* warna hurup menu */
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-webkit-border-top-left-radius:15px;
-webkit-border-top-right-radius:15px;
}
div.TabView div.Tabs a.Active {
background-color: #FFFFFF; /* warna background menu aktif */
color: #000000;
}
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:#FFFFFF; /* background kotak utama */
}
div.TabView div.Pages div.Page {
height: 100%;
padding: 7px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad {
padding: 5px 0px;
font-size: 12px; /* besar hurup kotak utama */
}

4.Simpan template sobat.

5. Selanjutnya klik elemen halaman=> tambah gadget=> HTML/JavaSript=> copi dan paste code berikut dalam content:

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 100%;" class="Tabs">
Disini letakkan kode untuk menu tab 1
</div>
<div style="width: 99%; height: 200px;" class="Pages">

<div class="Page"><div class="Pad">
Disini letakkan kode untuk menu tab 2 </div></div>


<div class="Page"><div class="Pad">
Disini letakkan kode untuk menu tab 3 </div></div>


<div class="Page"><div class="Pad">
Disini letakkan kode untuk menu tab 4 </div></div>

</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://amatullah83.blogspot.com/2009/11/cara-membuat-menu-tab-view.html" target="_blank" title="Tabview Widget">Widget by Indahnya Berbagi</a></div>

6. Klik Simpan dan sobat bisa lihat hasilnya,
Untuk warna sobat bisa sesuaikan menurut selera sobat dengan melihat kodenya disini

Demikian Cara membuat Menu tab view semoga bermanfaat.Happy Bloging ..