MEMBUAT TAB VIEW SEDERHANA

Langsung saja ya..., soalnya aku lagi males banget nih...,
contohnya bisa lihat di blogku, di sebelah kanan niih di bawahnya Adv... hehe...
hehehehe..., jadi langsung materi saja..., hahahaha... (sok guru nih)

Gini..., :
1. Login akun blog kalian
2. Masuk menu rancangan >>> elemen laman >>> tambah gadget
3. langsung saja Copy paste kode dibawah ini :

<style type="text/css">
div.TabView div.Tabs
{height: 30px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 126px; /* Lebar Menu Utama Atas */
text-align:center ; height: 30px; /* Tinggi Menu Utama Atas */
padding-top:8px; 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: 5px 5px}
</style>
<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>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 385px;" class="Tabs">
<a>JUDUL TAB VIEW</a>
<a>JUDUL TAB VIEW</a>
<a>JUDUL TAB VIEW</a>
</div>
<div style="width:385px; height:275px; " class="Pages">
<div class="Page">
<div class="Pad">
SCRIPT GADGET KAMU
</div>
</div>
<div class="Page">
<div class="Pad">
SCRIPT GADGET KAMU
</div>
</div>
<div class="Page">
<div class="Pad">
SCRIPT GADGET KAMU
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

4. Simpan

:: GANTI KODE WARNA BIRU DENGAN JUDUL TAB ::
:: GANTI KODE WARNA MERAH DENGAN SCRIPT GADGET yang AKAN DIBUAT TAB ::