Trik membuat Tab Menu di Blog

Pada suatu hari ada teman saya yang bertanya bagai mana cara membuat Tab menu di blog , maka dari itulah saya akan menjelaskan bagai mana cara membuat Tab menu sederhana di suatu Blog.

1. Login ke Blog kamu
2. Masuk ke Tata Letak
3. Kemudian Klik Edit HTML
4. Untuk menghindari kesalahan dalam penulisan kode , saya rekomendasikan untuk menyimpan Template lebih dulu dengan cara klik Download Template 
5. Cari kode </head>  pada HTML Template Blog anda
6. Copy kode di bawah ini

<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>

        7. Letakkan kode tersebut tepat sebelum kode </head>
        8. Kemudian selanjutnya cari kode ]]></b:skin>
        9. Setelah ketemu Copy Pastekan kode di bawa ini tepat di atas Kode ]]></b:skin>

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: 3px; 

vertical-align: middle; 

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: bold; 

color: #000; /* 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: #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: 3px 5px; 

}

             10. Setelah semuanya selesai simpan semuanya dengan cara klik Save Template.

Tetapi jangan tergesah-gesah dulu masih ada tahap selanjutnya yaitu:
Klik Tata letak lagi kemudian klik Elemen Halaman kemudian tambahkan Gadget Pilih HTML / Javascript dan masukkan Kode di bawah ini ke dalam HTML / Javascript nya :

<form action="tabview.html" method="get"> 

<div class="TabView" id="TabView"> 

<div class="Tabs" style="width: 300px;"> 

<a>Tab 1</a> 

<a>Tab 2</a> 

<a>Tab 3</a> 

</div> 

<div class="Pages" style="width: 300px; height: 250px;">

<div class="Page"> 

<div class="Pad"> 

Tab 1.1 <br /> 

Tab 1.2 <br /> 

Tab 1.3 <br /> 

</div> 

</div>

<div class="Page"> 

<div class="Pad"> 

Tab 2.1 <br /> 

Tab 2.2 <br /> 

Tab 2.3 <br /> 

</div> 

</div>

<div class="Page"> 

<div class="Pad"> 

Tab 3.1 <br /> 

Tab 3.2 <br /> 

Tab 3.3 <br /> 

</div> 

</div>

</div> 

</div> 

</form>

<script type="text/javascript"> 

tabview_initialize('TabView'); 

</script>

Setelah selesai maka coba kalian lihat hasilnya di Blog kalian.

Sementara itu saja yang bisa saya Sharing unuk teman saya yang ingin tahu bagaimana membuat Tab menu di Blog .

Copyright by Rougerdeluffy