Multy Wigadget

Pertama-tama saya mengucapkan puja dan puji syukur kehadirat allah swt, karena telah memberikan saya kesempatan memposting kali ini. Kali ini saya share cara membuat widget Multi tabs pada blog.
Cara ini telah saya pakai untuk membuat widget baru saya, liat bagian bawah blog ini... jreng2x bagus kan??
Sobat blogger mau?
Ikuti langkah" dibawah ini ya:

1.Pertama kita login ke Blogger
2.Kemudian pilih Template, kemudian pilih Edit HTML
3.Jika sudah, Copy kode script dibawah ini :

<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>

4.kemudian Paste tepat diatas kode </head>.. kalian bisa cari kode </head> dengan Ctrl+F pada kotak Edit HTML.
5.Simpan Template sobat.
6. Pilih Tata letak => Tambahkan Gadget => HTML/javascript atau Pihak ketiga
7. Copy kode di bawah ini:

<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/>

Letakan Konten gambar/HTML Script/Tulisan di Tab 1

</div>
</div>
<div class="Halaman">
<div class="Alas">
<br/>

Letakan Konten gambar/HTML Script/Tulisan di Tab 2

</div>
</div>
<div class="Halaman">
<div class="Alas">
<br/>

Letakan Konten gambar/HTML Script/Tulisan di Tab 3

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

8.Kemudian Paste kan ke dalam HTML/Javascript tadi
9.Simpan

Lihat Widget sobat akan berubah menjadi Multi Tabs

Keterangan:

• Kode warna merah untuk kode warna Tab-nya
• Kode warna biru untuk kode warna Borders dan Background-nya
• Kode warna hijau untuk kode warna Border Tab-nya
• Kode warna kuning untuk kode warna Tulisan