Cara Mudah Membuat Tab View Menu

Sebelumnya saya mohon maaf yang sebesar-besarnya kepada Kang Etam Grecek yang berkali-kali bertanya tentang 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. Tips ini saya dapat dari salah satu guru saya yaitu Mas Dody Farial.

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

Cara Mudah Membuat Tab View Menu 2010-06-28T11:37:00+07:00 Rating: 4.5 Diposkan Oleh: muzzy musthofa