Cara Mudah Membuat Tab Menu

Cara Mudah Membuat Tab Menu

Add Comment

tab menu
Kali ini ane share cara membuat tab menu. Sebenarnya cara ini hanya tab view yang tadinya harus meletakkan kode pada Edit HTML sekarang scriptnya hanya menjadi xHTML yang dijadikan tampilan widget. Yah mungkin posting kali ini hanya untuk mensiasati kemudahan aja, karena ane yakin kawan-kawan sekalian mau yang mudah bukan?...kalau begitu sama dengan ane gan!!! Ok gak usah banyak ngomongnya...ikuti langkah berikut.

Login ke blogger, kemudian pada Elemen Halaman sobat klik Tambah Gadget, lalu pilih yang  HTML/Javascript. Setelah itu tambahkan kode script menu tab view dibawah ini :

<style type="text/css">
div.TabView div.Tabs
{height: 30px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 98px; /* Lebar Menu Utama Atas */
text-align:center ; height: 30px; /* Tinggi Menu Utama Atas */
padding-top:8px; vertical-align:middle; border:1px solid #610B0B; /* Warna border Menu Atas */
border-bottom-width:0; text-decoration: none; font-family: "Verdana", Serif; /* Font Menu Utama Atas */
font-weight:bold; color:#610B0B; /* Warna Font Menu Utama Atas */ -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color:
rgb(164,199,144)); /* Warna background Menu Utama Atas */ }
div.TabView div.Pages {clear:both; border:1px solid #610B0B; /* Warna border Kotak Utama */ overflow:hidden; background-color:
rgb(164,199,144)); /* 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: 5px 5px}
</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: 300px;" class="Tabs">
<a>Judul 1</a> /* Judul pada tab 1, ganti dengan judul anda */
<a>Judul 2</a> /* Judul pada tab 2, ganti dengan judul anda */
<a>Judul 3</a> /* Judul pada tab 3, ganti dengan judul anda */
</div>
<div style="width:300px; height:250px; " class="Pages">
<div class="Page">
<div class="Pad">
Isi menu tab view 1  /* isi pada tab 1, isi sesuai kebutuhan anda */
</div>
</div>
<div class="Page">
<div class="Pad">
Isi menu tab view 2  /* isi pada tab 2, isi sesuai kebutuhan anda */
</div>
</div>
<div class="Page">
<div class="Pad">
Isi menu tab view 3 /* isi pada tab 3, isi sesuai kebutuhan anda */
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

Letakkan widget dimana anda suka karena ane juga pasti suka, heheheee....Simpan template dan lihat hasilnya. Selamat mencoba dan sukses selalu.


''keep spirits and do the best''
Mau belajar trick dan tips blogging lengkap dan mudah?... BACA DI SINI

About the Author

Blogonol adalah Blog - 0 atau blog kosong dengan konten tutorial blog, seo, widget, template gratis, dan blog info yang dikonsep secara sederhana untuk belajar membangun blog yang lebih baik.