Membuat Tab View Menu Pada Blog

Untuk menghemat tempat pada blog anda, tab view menu sangat efisien dan Ukuran yang relatif kecil tapi bisa memuat banyak space atau winget di dalamnya. dalam proses pembuatan Tab View Menu ini menggunakan code HTML yang cukup panjang dan sedikit menyusahkan. namun tidak jadi masalah sebab kali ini code HTMLnya suda di sediakan di posting kali ini.

Untuk itu di anjurkan agar sobat sebaiknya simak code-code HTML secara baik-baik cara membuatnya, dan yang paling penting adalah Backup Template sobat terlebih dahulu.

Mari kita lihat cara membuatnya:

1. Login dulu ke blog sobat

2. Masuk ke menu Perancangan

3. Pilih Edit HTML dan jangan lupa beri tanda centang pada Expand Template Widget

4. Cari code </head>

5. Kemudian letakkan kode javascript berikut ini 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 Save Template sobat

8. Kemudian langkah selanjutnya sobat klik Tata Letak

9. Tambahkan sebuah Badged

10. Pilih  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>Judul Winget 1</a>
<a>Judul Winget 2</a>
<a>Judul Winget 3</a>
</div>
<div class="Pages" style="width: 300px; height: 250px;">

<div class="Page">
<div class="Pad"> 

code winget 1 sobat di sini <br />
</div>
</div>

<div class="Page">
<div class="Pad"> 

code winget 2 sobat di sini <br />
</div>
</div>

<div class="Page">
<div class="Pad">
code winget 3 sobat di sini <br />
</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>

===================================================================================

11. Save Winget/badged Sobat

Keterangan :

• Untuk kode yang berwarna BIRU adalah lebar dan tinggi menu, silahkan sobat sesuaikan dengan isi.
• Kode yang berwarna HITAM silahkan sobat isi dengan judul - judul dari menu.
• Dan yang berwarna HIJAU, adalah isi dari menu. Sobat bisa menambahkan link, gambar, banner, dll. 

Semoga berhasil.!