Membuat Widget Multi Tab View Pada Blog

Jika sobat ingin menambahkan widget multi tab ini pada blog sobat, silahkan ikuti langkah-langkah dibawah ini :

• Sobat login ke akun blog sobat.
• Pilih Template =>> Edit HTML.
• 
  
• Cari kode </head> dengan menekan Ctrl+F pada keyboard sobat di kotak Edit HTML.
• Jika sudah menemukannya sobat Copy kode dibawah ini, kemudian Paste tepat diatas kode </head>.

<script type='text/javascript'>

//<![CDATA[

function tabtampil_oom(TPID, id)

{

  var Tabtampil = document.getElementById(TPID);

  var TTs = Tabtampil.firstChild;

  while (TTs.className != "TTs" ) TTs = TTs.nextSibling;

  var TT = TTs.firstChild;

  var i   = 0;

  do

  {

    if (TT.tagName == "A")

    {

      i++;

      TT.href      = "javascript:tabtampil_ubah('"+TPID+"', "+i+");";

      TT.className = (i == id) ? "Active" : "";

      TT.blur();

    }

  }

  while (TT = TT.nextSibling);

  var Halamans = Tabtampil.firstChild;

  while (Halamans.className != 'Halamans') Halamans = Halamans.nextSibling;

  var Halaman = Halamans.firstChild;

  var i    = 0;

  do

  {

    if (Halaman.className == 'Halaman')

    {

      i++;

      if (Halamans.offsetHeight) Halaman.style.height = (Halamans.offsetHeight-2)+"px";

      Halaman.style.overflow = "auto";

      Halaman.style.display  = (i == id) ? 'block' : 'none';

    }

  }

  while (Halaman = Halaman.nextSibling);

}

function tabtampil_ubah(TPID, id) { tabtampil_oom(TPID, id);

}

function tabtampil_inisial(TPID) { tabtampil_oom(TPID,  1);

document.write('');}

//]]>

</script>

• Simpan Template.
• Kemudian pilih Tata Letak =>> Tambahkan Gedget.
• Pilih HTML/Javascript.
• Kemudian Copy kode dibawah ini dan Paste di kolom HTML/Javascript.

<style type="text/css">

div.TabTampil div.TTs

{height: 24px; overflow: hidden; }

div.TabTampil div.TTs a:hover, div.TabTampil div.TTs a.Active

{ background-color: #eee; }

div.TabTampil div.Halamans

{ clear: both; border: 1px solid #fff; overflow: hidden; background-color: #ffffff;}

div.TabTampil div.Halamans div.Halaman

{ height: 100%; padding: 0px; overflow: hidden; }

div.TabTampil div.Halamans div.Halaman div.Alas

{ padding: 3px 5px; }

div.TabTampil div.TTs a

{ border-left:1px solid #eee; border-right:1px solid #eee; border-top:1px solid #eee; border-bottom:0px solid #eee; float: left;

display: block; width: 95px; text-align: center; vertical-align: middle; height: 24px; padding-top: 3px; text-decoration: none; font-family: "Arial", Serif;

font-size: 11px; font-weight: 900; color: #000000}

</style>

<form action="tabtampil.html" method="get">

<div id="TabTampil" class="TabTampil">

<div style="width: 300px;" class="TTs"> <a>Tab 1</a> <a>Tab 2</a> <a>Tab 3</a></div>

<div style="width: 300px; height: 300px;" class="Halamans">

<div class="Halaman">

<div class="Alas">

<br/>

Taruh content Tab 1 disini

</div>

</div>

<div class="Halaman">

<div class="Alas">

<br/>

Taruh content Tab 2 disini

</div>

</div>

<div class="Halaman">

<div class="Alas">

<br/>

Taruh content Tab 3 disini

</div>

</div>

</div>

</div>

</div></form>

<script type="text/javascript">tabtampil_inisial('TabTampil');</script>

• Simpan  HTML/Javascript.