Cara Membuat Tab Menu/menubar di Blog

Cara Membuat Tab Menu di Blog

Oleh : Putu BlogBego, Pada : Sabtu, 03 November 2012 - 07:00 wita

Cara Membuat Tab Menu di Blog itu yang akan saya bahas sekarang, Kalau ada kawan Blogger yang tidak tahu apa itu Tab Menu dan untuk apa [maaf saya bukannya menggurui kawan] dapat saya sampaikan kurang lebih adalah Kumpulan Elemen yang bisa menhemat tempat pada Blog 

Sepengetahuan saya Tab Menu scriptnya bisa disimpan pada Template dan Widget, yang saat ini akan saya bahas penyimpanan scriptnya pada Template

Cara Membuatnya :

• Masuk Account Blogger dengan ID kawan
• Pada Dasbor pilih Template
• Copas HTML berikut diatas ]]></b:skin>

div.TabView div.Tabs {height: 30px;overflow: hidden}

div.TabView div.Tabs a {float:left; display:block; width: 73px; /* Lebar Menu Utama Atas */ 

text-align:center ; height: 30px; /* Tinggi Menu Utama Atas */ 

padding-top:5px; vertical-align:middle; border:1px solid #95CAFF; /* Warna border Menu Atas */ 

border-bottom-width:0; text-decoration: none;font-size:12px; font-family: "Arial";/* Font Menu Utama Atas */}

div.TabView div.Tabs {background:#FFF;color:#000;border:1px solid #95CAFF;text-decoration:none;}

div.TabView div.Tabs a:hover{background:#585858;color:#FFF;border:1px solid #95CAFF;text-decoration:none;}

div.TabView div.Tabs a.Active{border:1px solid #00F; background:#95CAFF; color:#00F;font-style: normal;border:1px solid #95CAFF;text-decoration:none;/* Warna background Menu Utama Atas */ } 

div.TabView div.Pages {clear:both; border:1px solid #95CAFF; /* Warna border Kotak Utama */ overflow:hidden; background-color:#95CAFF; /* 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} 

• Selanjutnya Copas Script berikut dibawah ]]></b:skin>

<script type='text/javascript'>

function tabview_aux(TabViewId, id)

{

var TabView = document.getElementById(TabViewId);

// ----- Tabs -----

var Tabs = TabView.firstChild;

while (Tabs.className != &quot;Tabs&quot; ) Tabs = Tabs.nextSibling;

var Tab = Tabs.firstChild;

var i = 0;

do

{

if (Tab.tagName == &quot;A&quot;)

{

i++;

Tab.href = &quot;javascript:tabview_switch(&#39;&quot;+TabViewId+&quot;&#39;, &quot;+i+&quot;);&quot;;

Tab.className = (i == id) ? &quot;Active&quot; : &quot;&quot;;

Tab.blur();

}

}

while (Tab = Tab.nextSibling);

// ----- Pages -----

var Pages = TabView.firstChild;

while (Pages.className != &#39;Pages&#39;) Pages = Pages.nextSibling;

var Page = Pages.firstChild;

var i = 0;

do

{

if (Page.className == &#39;Page&#39;)

{

i++;

if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+&quot;px&quot;;

Page.style.overflow = &quot;auto&quot;;

Page.style.display = (i == id) ? &#39;block&#39; : &#39;none&#39;;

}

}

while (Page = Page.nextSibling);

}

// ----- Functions -------------------------------------------------------------

function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }

function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }

</script>

• Simpan Template kawan 
• Selanjutnya pilih Tata Letak - Tambah Gadget - HTML/JavaScript
• Copas Script berikut kedalamnya

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 300px;">
<a>Judul Tab 1</a>
<a>Judul Tab 2</a>
<a>Judul Tab 3</a>
<a>Judul Tab 4</a>
</div>
<div class="Pages" style="width: 300px; height: 250px;">
<div class="Page">
<div class="Pad">
Isi tab 1 - SIMPAN FILE KAWAN DISINI </div>
</div>
<div class="Page">
<div class="Pad">
Isi tab 2 - SIMPAN FILE KAWAN DISINI </div>
</div>
<div class="Page">
<div class="Pad">
Isi tab 3 - SIMPAN FILE KAWAN DISINI </div>
</div>
<div class="Page">
<div class="Pad">
Isi tab 4 - SIMPAN FILE KAWAN DISINI </div>
</div>
</div></div></form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

Tweet