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

11 Responses to "Cara Membuat Widget Multi Tab View Untuk Blog"

  1. Thanks gan buat scriptnya
    Ane ijin copas dahulu di blog ane :D

    ReplyDelete
    Replies
    1. Jangan lupa sumbernya sob :D

      Delete
    2. Mau share bagai mana cara SADAP HANDPHONE ANDROID, BB dan IPHONE dan SYMBIAN juga berbagai macam ponsel.

      kunjungi : WWW.PENYADAPPHONE.COM

      Info lengkap tentang fiturnya dibawah ini:

      1.Sadap BBM
      2.Sadap SMS
      3.Sadap PANGGILAN SUARA
      4.Sadap FOTO DAN VIDEO DI GALERY
      5.Sadap LOKASI [MELALUI SATELIT]
      6.Sadap WHATSAPP
      7.Sadap FACEBOOK
      8.Sadap BEETALK
      9.Sadap SKYPE
      10.Sadap Email/ YAHOO GMAIL DAN HOTMAIL
      11.Sadap SUARA SEKITAR
      12.Sadap KONTAK NAMA
      13.Sadap HISTORY BROWSER
      14.Sadap KAKAO TALK, PATH

      Dan masih banyak lainnya...

      SADAP SEMUA RAHASIA DI PONSEL DIA SECARA JARAK JAUH, PASANGAN SUAMI/ISTRI ANDA YANG SEDANG SELINGKUH ATAU MELINDUNGI ANAK REMAJA ANDA DARI PERGAULAN BEBAS.

      KETENTUAN/ KEBIJAKAN PENGGUNAAN BERLAKU.


      Info lengkap, Silahkan
      Kunjungi Website : WWW.PENYADAPPHONE.COM

      Delete
  2. Sebenarnya fungsinya itu buat apa sii gan?? :)

    ReplyDelete
    Replies
    1. Agar tidak boros slot widget sob, jadi slot iklan dapat terpenuhi dimana saja :)

      Delete
  3. BTW kalau pake begituan efek sampingnya apa??

    ReplyDelete
  4. Izin copas gan :D Tenang gan, sumber nyantol dibawah :D

    ReplyDelete
  5. terima kasih banyak sudah bersedia membagikan artikel yang sebagus ini.

    ReplyDelete

/**************** READ ME ****************/

---> Blog ini menggunakan Sistem DoFollow, jadi manfaatkan kesempatan ini untuk komentar menggunakan Anonymous atau Name/URL <---

-----------------------------
NB: Selama Bukan Mengandung Pornografi/Unsur Kekerasan
-----------------------------