Cara Membuat Tab Multi Widget 3in1 Sederhana

Tab Multi Widget Sederhana Untuk Blogger, sangat berguna untuk mengurangi loading lama di blog sobat, selain pemasangan dan tampilannya sederhana Tab Multi Widget ini menggabungkan 3 widget dalam satu widget 3in1. Sobat juga bisa lihat di blog saya ini cuman dengan sentuhan kode CSS dan JavaScript jika sobat ingin tampilan tab widegt multi untuk blogger seperti punya saya (Kamis, 15 Maret 2012) sobat bisa lihat disini Tambahkan Wordpress Style Menu Tabs Widget Untuk Blogger jika belum puas dengan itu sobat bisa lihat yang satu ini Special Tab View Untuk Widget di Blogger Lama dan Blogger Baru, Oke jika sobat ingin memasang tab multi widget sederhana ini ikuti langkah di bawah ini.

Cara Membuat Tab Multi Widget 3in1 Sederhana

1. Masuk ke akun Blog sobat => Rancangan => Edit HTML
2. Cari kode </head> gunakan ctrl+f atau f3 untuk mempercepat pencarian.
3. Dan tepat di atasnya simpan kode di bawah 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>

• Simpan template dan beralih ke Elemen Laman
• Klik Tambah Gadget => HTML/Javascript
• Dan masukan 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/>
Tab 1 content goes here
</div>
</div>
<div class="Halaman">
<div class="Alas">
<br/>
Tab 2 content goes here
</div>
</div>
<div class="Halaman">
<div class="Alas">
<br/>
Tab 3 content goes here
</div>
</div>
</div>
</div>
</div></form>
<script type="text/javascript">tabtampil_inisial('TabTampil');</script>

Keterangan :
#Eee: Ini adalah warna latar belakang Tab. Warna Default adalah abu-abu. Jika sobat ingin mengubahnya ke warna yang berbeda pilihan sobat kemudian  Gunakan Kode Warna BUS

#Fff: Ini adalah warna perbatasan tab widget multi sobat. Warna default adalah putih sobat dapat menyesuaikannya dengan warna pilihan sobat menggunakan bagan warna yang sama disebutkan di atas.

#Ffffff: Ini adalah warna latar belakang tubuh utama widget sobat.  Yang standar adalah putih.Gunakan  Gunakan Kode Warna BUS  jika sobat ingin menggunakan warna yang berbeda.

#Eee: Ini adalah warna perbatasan di sekitar tab persegi panjang. Yang standar adalah abu-abu. Gunakan Kode Warna BUS jika sobat ingin menggunakan warna yang berbeda.

#000000: Ini adalah warna teks / font untuk nama tab. Dengan kata lain, itu warna judul tab. Yang standar adalah hitam.

Ganti ini dengan judul tab

Tab 1, Tab 2, Tab 3

Ganti ini dengan kode widget Anda.

Tab 1 konten goes here ,  Tab 2 konten goes here , Tab 3 konten goes here

Itulah yang dapat saya sampaikan pada postingan kali ini semoga bermanfaat.