Cara Mudah Membuat Widget Multi Tab View Pada Blog

Cara Mudah Membuat Widget Multi Tab View Pada Blog - Selamat malam sobat blogger. Gimana kabarnya? tentunya baik-baik saja kan. Kali ini saya akan membuat artikel mengenai Cara Mudah Membuat Widget Multi Tab View Pada Blog. 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 :

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

Ditulis Oleh : Unknown ~ Mari Berbagi

Sobat sedang membaca artikel tentang Cara Mudah Membuat Widget Multi Tab View Pada Blog. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya <a href="http://mari-berbagi244.blogspot.com/2013/04/cara-mudah-membuat-widget-multi-tab.html" target="_blank">Cara Mudah Membuat Widget Multi Tab View Pada Blog</a>

Silahkan masukan Email sobat untuk mendapatkan update artikel terbaru di blog ini :

Delivered by FeedBurner