Cara Membuat Widget Multi Tab View Untuk Blog

Caralukman - Selamat Malam sobat blogger, kali ini saya mau Ngeshare "Cara Mudah Membuat Widget Multi Tab View Untuk Blog"

Apasih pengertian Widget Multi Tab??

Multi tab widget adalah suatu keharusan widget untuk setiap blog. Ini membantu untuk mengurangi loading blog dengan menggabungkan tiga atau lebih dari tiga widget menjadi satu. Sobat mungkin telah melihat widget ini pada setiap blog yang sobat kunjungi dan bahkan di blog saya (lihat sidebar) tetapi pertanyaannya adalah bagaimana cara menambahkannya?

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

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.

NB : Ini Hanya HTML biasa

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