Cara membuat menu tab view pada blog


Cara membuat menu tab view pada blog, Apakah fungsi menu tab view pada blog ?? Fungsinya dapat meminimalisir tampilan pada template yang anda pergunakan sehingga tampilan blog anda terlihat rapi. Misalkan pada menu tab view anda dapat menampilkan menu daftar isi, recent komentar, link sahabat, atau widget yang lain. Selain itu menu tab view juga dapat mengurangi berat loading blog karena widget yang anda tampilkan tersembunyi dibalik menu tab view. Seperti apakah menu tab view ?? Bisa anda lihat gambarnya dibawah ini.
Gambar diatas merupakan menu tab view yang memiliki lima (5) kolom. Untuk Cara membuat menu tab view di blog langkahnya sebagai berikut:
1. Silahkan login blog anda kemudian menuju menu edit HTML
2. Beri tanda centang pada Expand widget template
3. Cari kode dibawah ini dengan menekan F3 atau CTRL+F pada keyboard anda
]]></b:skin>

4. Setelah kode ditemukan letakan kode berikut diatasnya
/* 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: 100px; /*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: #000000; /*warna latar menu*/
color: #FFFFFF; /*warna hurup menu*/
-moz-border-radius-topleft:0px;
-moz-border-radius-topright:00px;
-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: #000000;
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*/

5. Sekarang Copy kode berikut ini
<script src="http://madiuncool.googlecode.com/files/menutabview.js" type="text/javascript">
Dan letakan dibawah kode
]]></b:skin>
Setelah selesai klik simpan

6. Langkah selanjutnya
Buka menu edit tata letak dan pilih menu HTML/javascript
Letakan kode berikut pada menu tersebut.
<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>

Ket:
Warna kuning = Judul menu tab view silahkan dirubah
Warna hijau = Merupakan isi konten silahkan ganti dengan kode widget yang ingin anda tampilkan
Bila sudah selesai silahkan simpan template. Semoga bermanfaat tips tutorial blog hari ini.

4 Responses to "Cara membuat menu tab view pada blog"

  1. sy br download template blog di situ designnya ud ada tab menu home, contact us, about. tapi ga bisa di klik! krn templatenya ud ada menu itu, laman home, contact, about yg sy buat ga bs d tampilin! gmn ya?

    BalasHapus
  2. @Kadek agus : Link gmn maksudnya mas..untuk menambahkan link tinggal anda ganti tulisan wrna hijau dengan kode link

    @Wimpy : untuk menu home, about us tidak bkrja dg baik coba anda cek scripnya di menu html mungkin ada kode yg rusak, untuk saran saya anda bisa mnggunakan Menu navigasi slide out tampilannya g klah keren

    @Rudy hartono : terimas kasih mas atas kunjungannya lagi, jangan bosen ya hehehe...

    BalasHapus

Silahkan memberi komentar, Komentar dilarang mengandung spam, sara, menghujat atau merugikan orang lain serta yang berbau lendir...
Insyallah blog anda saya kunjungi balik...

Jangan sampai komentar anda masuk kotak spam