Pasang Widget Multi Tab View Menggunakan Javascript

Pasang Widget Multi Tab View Menggunakan Javascript - Pada kesmpatan kali ini saya akan membagikan artikel yang berkaitan tentang Tutorial blog yakni Memasang Multi tab view pada blog. Ingin widget sobat terlihat rapi ? nah artikel ini cocok sekali buat sobat :D. Widget ini berfungsi untuk menata agar widget yang berada di blog kita terlihat rapi

Cara Membuat Widget Multi Tab view menggunakan javascript

1. Login blogger sobat

2. Pilih Template >> Edit HTML

3. Cari kode </head>

4. letakkan kode dibawah ini diatas </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>

5. Jangan lupa diSimpan Template :D
6. Sekarang pilih Tata Letak >> Tambahkan Gadget >> pilih HTML/Javascript
7. Masukan kode

<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 #bbb; overflow:hidden; background-color:#fff} 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 #bbb; border-right:1px solid #bbb; border-top:1px solid #bbb; border-bottom:1px solid #bbb; float:left; display:block; width:98px; text-align:center; vertical-align: middle; height: 25px; padding-top:5px; text-decoration:none; font-family:sans-serif; font-size:11px; font-weight:900; color: #000} </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:298px; height:300px" class="Halamans"> <div class="Halaman"> <div class="Alas"> <br/>
KODE SCRIPT TAB 1</div> </div> <div class="Halaman"> <div class="Alas"> <br/>
KODE SCRIPT TAB 2</div> </div> <div class="Halaman"> <div class="Alas"> <br/>
KODE SCRIPT TAB 3</div> </div> </div> </div> </form> <script type="text/javascript">tabtampil_inisial('TabTampil');</script>

8. jangan Lupa disimpan :D