Cara Mudah Membuat Tab View Menu

Sebelumnya saya terima kasih kepada Muzzymusthofa(salah satu guru blog saya secara tidak langsung) yang telah share di blognya entang cara buat menu yang diatas buku tamu yaitu penggabungan daftar isi, komentar terakhir dan top komentator gimana caranya?, tapi baru kali ini saya baru bisa mempostingnya. Cara ini dibuat agar dapat menghemat space yang ada di blog kita. Dengan cara ini, kita dapat menggabungkan beberapa widget hanya dalam 1 tempat.

Untuk membuatnya, silahkan ikuti beberapa langkah berikut :
1. Login di akun Blogger Sobat
2. Klik "Rancangan" (Dulunya "Tata Letak") => "Elemen Laman"
3. Klik "Tambah Gadget"
4. Selanjutnya, copas kode di bawah ini : 

<style type="text/css">
div.TabView div.Tabs
{height: 40px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 85px; /* Lebar Menu Utama Atas */
text-align:center ; height: 100px; /* Tinggi Menu Utama Atas */
padding-top:1px; vertical-align:left; border:1px solid #BDBDBD; /* Warna border Menu Atas */
border-bottom-width:0; text-decoration: none; font-family: "Verdana", Serif; /* Font Menu Utama Atas */
font-weight:; color:#000; /* Warna Font Menu Utama Atas */ -moz-border-radius-topleft:0px; -moz-border-radius-topright:0px}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color: #E6E6E6; /* Warna background Menu Utama Atas */ }
div.TabView div.Pages {clear:both; border:1px solid #BDBDBD; /* Warna border Kotak Utama */ overflow:hidden; background-color:#E6E6E6; /* Warna background Kotak Utama */ }
div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden}
div.TabView div.Pages div.Page div.Pad {padding: 1px 1px}
</style>
<script type='text/javascript'>
//<![CDATA[
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
//]]>
</script>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 270px;" class="Tabs">
<a>Judul Gadget 1 (Misal Daftar Isi)</a>
<a>Judul Gadget 2 (Misal Komentar Terakhir)</a>
<a>Judul Gadget 3 (Misal Top Komentator)</a>
</div>
<div style="width:260px; height:250px; " class="Pages">
<div class="Page">
<div class="Pad">
ISI TAB VIEW MENU 1 ( Misal : Script Daftar Isi)
</div>
</div>
<div class="Page">
<div class="Pad">
ISI TAB VIEW MENU 2 ( Misal : Script Komentar Terakhir)
</div>
</div>
<div class="Page">
<div class="Pad">
ISI TAB VIEW MENU 3 ( Misal : Script Top Komentator)
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

5. Klik "Simpan"

Keterangan :
Sobat bisa mengubah Lebar Menu Utama Atas, Tinggi Menu Utama Atas, Warna border Menu Atas, Font Menu Utama Atas, Warna Font Menu Utama Atas, Warna background Menu Utama Atas, Warna border Kotak Utama dan Warna background Kotak Utama

Referensi : http://muzzymusthofa.blogspot.com

---

Terima Kasih Telah Berkunjung dan Meluangkan Waktu Anda untuk Membaca Artikel Di Atas. Semoga Bermanfaat Untuk Anda. Jangan Lupa Kasih Komentar Ya!

---