Membuat TAB Menu 2 Kolom Untuk Blog

Cara membuat 2 tab menu pada blog tidak begitu sulit. apabila kalian mengerti pemrograman CSS, kalian bisa memodifikasi tampilannya hingga sedemikian rupa. tab menu pada blog juga dapat digunakan untuk mempercantik blog. banyak cara yang bisa dilakukan untuk mempercantik blog, salah satunya adalah memasang tab menu.
Contohnya, kalian bisa lihat di sidebar blognyaipank ini atau gambarnya di bawah ini :

berikut ini tutorial cara membuat tab menu (versi 2) :
1. Menu Dashboard, klik Tata Letak, klik Edit HTML.
2. Copy Paste kode berikut di atas kode ]]></b:skin> :

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 103px;
text-align: center;
height: 24px;
padding-top: 3px;
vertical-align: middle;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
border-top: 1px solid #999999;
border-left: 1px solid #999999;
border-right: 1px solid #999999;
border-bottom: 1px solid #999999;
font-family: "verdana", Serif;
font-weight: 900;
color: #1E62B6;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #E2EAF0;
}
div.TabView div.Pages
{
clear: both;
border-left: 1px solid #999999;
border-right: 1px solid #999999;
border-bottom: 1px solid #999999;
overflow: hidden;
background-color: #E2EAF0;
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

3. Copy Paste script tab menu di bawah ini di atas </head> :

<script>
//<![CDATA[
/******************************************
menu tab script
********************************************/
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>

4. Klik Simpan.

Untuk menambahkan tab menu pada sidebar, caranya adalah sebagai berikut :

1. klik tata Letak, Tambah Gadget, Tambah Html/Javascript.

2. Copy paste kode berikut ini :

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 320px;" class="Tabs">
<a>Judul 1</a>
<a>Judul 2</a>
<a>Judul 3</a>
</div>
<div style="width: 315px; height: 270px;" class="Pages">

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

(isi konten judul 1)

</div>
</div>


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

(isi konten judul 2)

</div>
</div>


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

(isi konten judul 3)

</div>
</div>

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

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

3. Klik Simpan.

Penjelasan kodenya adalah sebagai berikut :

• -kode yang berwarna hijau adalah judul tab.
• -kode yang berwarna biru adalah isi konten dari setiap judul tab.
• -kode yang berwarna merah adalah untuk mengatur lebar dan tinggi widget tab menu.

Sekian cara membuat tab menu pada blog. semoga artikel ini bermanfaat  Ya... Salam, salam.........:)

ADVERTISMENT