Cara Membuat Menu Tab View di Blog

Assalamualiakum sobat blogger semuanya, kali ini saya kembali membawakan sebuah tips dan trik blogger terbaru yang pastinya sangat sayang untuk sobat lewatkan. Hehe... yaitu Cara Membuat Menu Tab View di Blog. Menu tab view ini digunakan untuk menghemat tempat di blog karena menu ini merupakan gabungan dari beberapa menu lainnya. Selain itu juga bisa membuat tampilan blog kita lebih terkesan keren dan minimalis. Pastinya sobat sudah pernah lihat semua kan menu tab view ini? Jika belum, coba lihat salah satu contohnya dibawah:

Keren kan sobat blogger? Lalu, bagaimana cara membuatnya? Apakah sulit? jawabannya tentu tidak. Silahkan sobat ikuti langkah-langkah dibawah ini untuk membuat menu tab view di blog sobat:

• Login dulu ke akun blogger sobat.
• Langsung menuju ke menu Template
• Pilih Edit HTML
• Jangan lupa centang Expand Widget Template
• Cari kode ]]></b:skin> , kemudian letakkan kode dibawah ini tepat 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: 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 huruf 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;
}
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://i864.photobucket.com/albums/ab206/kibagus/th_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 huruf kotak utama */
}

Tulisan yang berwarna merah adalah bagian-bagian yang dapat sobat modifikasi sendiri.

• Kemudian letakkan lagi kode berikut ini tepat DIBAWAH kode  ]]></b:skin>

<script src="http://sites.google.com/site/kibagusnet/x-design/tabview.js" type="text/javascript"/>

• Kemudian simpan template sobat.
• Sekarang lanjut ke langkah berikutnya, langsung menuju ke menu Layout (tata letak)
• Klik Add Gadget dan pilih HTML/JavaScript.
• Lalu copy paste kode berikut di kotak yang disediakan:

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://kibagus-homedesign.blogspot.com/" target="_blank" title="Tabview Widget">HDesign-comm</a></div>

• Terakhir, simpan.

Nah, gampang bukan? Mungkin cukup sekian dulu postingan saya tentang Cara Membuat Menu Tab View di Blog. Semoga bermanfaat bagi sobat semua. Jika ada sesuatu yang ingin diutarakan, silahkan comment dibawah. 

Mungkin sobat juga tertarik untuk membaca tips dan trik blogger lannya dibawah ini:

1. Cara Memasang Widget Recent Comment pada Blog
2. Cara Membuat Related Post dengan Thumbnails pada Blog
3. Cara Memasang Emoticon pada Kotak Komentar
4. Cara Membuat Reply Comment pada Blog
5. Meta Tag Dinamis Terbaik
6. Cara Membuat Highlight pada Postingan
7. Cara Mempercepat Loading Halaman
8. Cara Mengubah Blog Nofollow menjadi Dofollow
9. Kelebihan dan Kekurangan Blog Dofollow
10. Cara Mengetahui Harga Suatu Blog
11. Cara Daftar Google Adsense via Docstoc