Cara Membuat Widget Multi Tab View di Blog

Cara Membuat Widget Multi Tab View di Blog - Widget multi tab adalah gabungan dari beberapa widget yang terdiri dari 3 kolom atau lebih. Multi tab widget ini sangat berguna dan bermanfaat bagi blog Anda yang terlalu banyak memiliki widget blog, sehingga terlihat lebih berantakan. Dengan menggunakan multi tab di blog maka Anda bisa memasukkan beberapa widget sehingga menjadi satu dalam widget multi tab.

Selain itu, banyak fungsi dari widget multi tab view ini, Anda tidak perlu banyak menyediakan kolom untuk widget-widget yang Anda pasang pada blog Anda, dengan widget multi tab view Anda hanya perlu 1 area kosong untuk membuat widget multi tab view. Sebuah desain Template blog memang harus di buat semenarik mungkin, namun tidak harus ramai dengan widget-widget karena itu bisa Memperlambat Loading Blog Anda, maka dari itu manfaat widget multi tab view untuk meminimalisirkan widget-widget yang terlalu banyak di blog hanya dalam satu kotak saja. Bagi Anda yang ingin membuat atau memasang widget multi tab view di blog silahkan baca tutorialnya dibawah ini :

DEMO

1. Masuk ke Blogger.com
2. Klik Template => Edit HTML
3. Cari kode </head> atau </header> atau /head
4. Copy kode JavaScript dibawah ini, lalu Paste diatas kode </head> atau </header> atau /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>

5. Klik Simpan Template
6. Klik Tata Letak => Tambahkan Gadget => HTML/JavaScript
7. Masukkan kode berikut

<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 #bbb; overflow:hidden; background-color:#fff} 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 #bbb; border-right:1px solid #bbb; border-top:1px solid #bbb; border-bottom:1px solid #bbb; float:left; display:block; width:98px; text-align:center; vertical-align: middle; height: 25px; padding-top:5px; text-decoration:none; font-family:sans-serif; font-size:11px; font-weight:900; color: #000} </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:298px; height:300px" class="Halamans"> <div class="Halaman"> <div class="Alas"> <br/>
Masukkan Kode Widget Tab 1</div> </div> <div class="Halaman"> <div class="Alas"> <br/>
Masukkan Kode Widget Tab 2</div> </div> <div class="Halaman"> <div class="Alas"> <br/>
Masukkan Kode Widget Tab 3</div> </div> </div> </div> </form> <script type="text/javascript">tabtampil_inisial('TabTampil');</script>

8. Klik Simpan

Catatan :
- Silahkan ganti tulisan Masukkan Kode Widget Tab 1, 2, dan 3 dengan kode widget yang ingin Anda masukkan.
- Setelah menambahkan widget baru harap untuk menghapus kode quickedit pada bagian Edit HTML atau Anda bisa membacanya disini Cara Membuat Blog Valid HTML5.

Sekian artikel mengenai Cara Membuat Widget Multi Tab View di Blog. Kurang lebihnya mohon maaf.
Semoga Bermanfaat...

Ficri Pebriyana

Blogger yang jarang nulis artikel :D

Bagikan Artikel ini