Tips Membuat Tab View Menu Pada Blogspot

Salam blogger,,.akhirnya menemukan tips blog lagi setelah sekian lama saya mencari . masalahnya saya tidak mengetahui nama widgetnya itu apa,,,owt teryata Tab View Menu tohh??hehe...baru tau ane,,,(maklum pemula gan). Nah bicara tentang kelebihan tips ini mungkin dari sisi tempatnya, karena kita lebih menghemat tempat di blog kita  dan tentunya tampilannya membuat blog kita kelihatan lebih profesional,..oke gan

walaupun Kode HTML nya sangat panjang tapi masih cepet untuk dimegerti kok sob jadi tenang aja, hanya perlu sedikit waktu untuk mempelajari trik Tab View Menu ini. oke gan sekian dulu intermedzonya kita langsung aja,,,tapi jangan lupa backup dulu templatenya "download lengkap dulu" biar tidak terjadi kesalahan yang tidak diinginkan.

Jika setelah jadi nanti lebar atau tinggi menu tidak sesuai, silahkan sobat sesuaikan sendiri dengan isi dari menu yang sobat gunakan. Karena jika tidak mengerti akan jadi berantakan atau terlihat jelek. Oke sob, sudah mengerti toh…mantaabbbbb kita langsung ke TKP.

1.    Silahkan login ke blogger dengan ID sobat tentunya.

2.    Tuju Tata Letak.

3.    Klik Edit HTML.

4.    Jangan lupa backup template sobat terlebih dahulu dengan mengklik Download Template Lengkap.

5.    Kemudian letakkan kode javascript berikut sebelum kode </head>

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

6.    Setelah itu letakkan kode berikut 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; 
}

7.    Kemudian Simpan Template.

8.    Langkah selanjutnya, silahkan sobat klik Tata Letak.

9.    Klik Elemen Halaman dan tambahkan Gadget.

10. Pilih yang HTML / Javascript, dan tambahkan kode berikut kedalamnya.

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

11. Kemudian Simpan.

Keterangan :

·         Untuk kode yang berwarna merah adalah lebar dan tinggi menu, silahkan sobat sesuaikan dengan isi.

·         Kode yang berwarna biru silahkan sobat isi dengan judul - judul dari menu.

·         Dan yang berwarna ungu, adalah isi dari menu. Sobat bisa menambahkan link, gambar, banner, dll.

Tweet