Cara Mudah Membuat Widget Multi Tab View Pada Blog 2

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.

Catatan :

• Kode yang berwarna Merah adalah kode warna untuk Tab.
• Kode yang berwarna Biru adalah kode warna untuk Border dan background Main Body Widget.
• Kode yang berwarna Orange adalah kode warna untuk Border Tab.
• Kode yang berwarna Ungu adalah kode warna untuk Tulisan.

Sekian info yang dapat saya sampaikan untuk sobat mengenai Cara Mudah Membuat Widget Multi Tab View Pada Blog. Semoga Artikel yang saya buat ini dapat bermanfaat untuk sobat. Jika sobat mengalami kesusahan dalam pemasangan, jangan sungkan-sungkan untuk bertanya di kolom komentar. Salam Blogger.