Selamat Datang
blognyaipank

Cara buat tab menu (versi 2)

tab menu pada blog, jenisnya sangat beragam. tergantung bagaimana memodifikasinya. biasanya yang dimodifikasi adalah kode CSS nya karena mempengaruhi tampilan tab menu itu sendiri. tab menu dapat digunakan untuk diisi berbagai macam objek. selain itu, tab menu dapat menghemat tempat pada blog.

cara buat 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. kali ini, di blognyaipank akan mebagi sedikit tips cara membuat tab menu versi yang kedua, karena cara membuat tab menu versi yang pertama sudah pernah di posting.
kalau ingin 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 :)


7 komentar:

wawan_bali mengatakan...

wAHHH thanks la infona membantu banget niiii

aan mengatakan...

perlu di coba,,
thanks udah mampir di blogku...jang bosen ya
hehe

-Qyu- mengatakan...

Aku lum ngerti tu "kode yang berwarna biru adalah isi konten dari setiap judul tab."
Maksudnya apa yah?

*ps: maklum oon nya Queen :D

-Qyu- mengatakan...

-kode yang berwarna biru adalah isi konten dari setiap judul tab.

Belom ngertiiii :(
Tu diisi apaan

-Qyu- mengatakan...

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


>>> Punyaku kok jadi aneh begitu yah? wkwkw

blognyaipank mengatakan...

@ Qyu : kode yg warna biru itu adalah isi (konten) dari setiap tab (yang warna hijau).

kode yang warana hijau adalah judul tab..

misal, tab pertama judulnya statistik,,
maka, bisa diisi konten mengenai statistik blog kamu sob (isinya di bagian kode yang warna biru)..

dst sob.. :D

alfazil muhammad mengatakan...

nice blog . .
izin copas ya . . .

Posting Komentar

Silahkan meninggalkan komentar Anda, apabila Anda tidak ingin diketahui identitasnya, Anda bisa memberi komentar sebagai Anonim. komentar yang mengandung SARA tidak akan ditampilkan.