Cara Membuat Widget Multi Tab View di Blog

Cara Membuat Widget Multi Tab View di Blog - Ficri Pebriyana
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 :


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

60 Komentar untuk "Cara Membuat Widget Multi Tab View di Blog"

  1. kalau yang tanpa java script ada nggak mas Fikri

    BalasHapus
    Balasan
    1. kalau tanpa javascript tombol tab1,2,3 tidak berfungsi mas,,,

      Hapus
    2. Jadi bagunya pilh yang mana coba Mas Ficri widget multi tab itu?

      Hapus
    3. Kemana nih Mas Ficrinya..? lagi sibuk apa yah?

      Hapus
  2. Kalo emang nggak bikin blog lelet sih bisa di coba nih mas.. Oiyaa, blog ini kok enteng yaa mas? Jadi betah

    BalasHapus
    Balasan
    1. hehehe, silahkan mas.
      kalau blog ini udah saya compress mas, penambahan widget juga hanya popular post saja. :D

      Hapus
    2. Mas, ijin OOT. Blog saya kok kebalik yaa? Mungkin ada cara buat mengatasinya?

      Hapus
  3. Baru nongol lagi nih, Bang.. Ke mana aja? :D

    BalasHapus
  4. datang lagi ke blog mas ficri ada tutor baru ne... izin lihat-lihat scriptnya mas... :)

    BalasHapus
    Balasan
    1. hehe iya nih baru update lagi :D

      Hapus
    2. pasti sibuk banget dah mas ficrinya ne... sampai-sampai baru update..

      Hapus
  5. Pusing deh mas kalau liat kode-kode seperti itu hihihi

    BalasHapus
  6. lebih simple kalo pasang multi tab, makasih mas

    BalasHapus
    Balasan
    1. Apalagi kalau sambil ngopi ya Mas Wong? pasti maknyosss hh =D

      Hapus
  7. bagus mas, multi tab buka tutup.. jadi pengen..

    BalasHapus
    Balasan
    1. avatarnya mas kayak gitu bagaimana hehe..

      Hapus
    2. fotonya mas, berubah kena mouse jd bulat hehe bagus..

      Hapus
    3. mbak santika mau tau apa mau tahu banget ? :D

      Hapus
  8. Kebetulan saya udah pasang sob di blogg games :D kalo di blogg yang artikel yang biasa biasa aja :D

    BalasHapus
  9. Oh gitu ya mas caranya mudah sekali sepertinya ya

    BalasHapus
  10. Keren nih Mas Ficri bisa saya langsung praktekan. pastinya sudah lolos dari validasi html5 kan Mas Kode js dan lainya..? makasih Mas Ficri sudah berbagi

    BalasHapus
  11. wah perlu dicoba nih mas
    agar blogku lebih simple

    BalasHapus
  12. Sepertinya perlu untuk di praktekan ini mas, selain memperindah tampilan juga dapat menghemat tempat ya Mas

    BalasHapus
  13. wuih ajib banget tabview nya, sederhana dan elegan, responsive dan valid HTML5 ngga kang tabview nya?

    BalasHapus
    Balasan
    1. iya pastinya, untuk valid html5 harap dibaca pada link yang di sediakan diatas :)

      Hapus
  14. Terimakasih atas infonya gan
    sungguh sangat menarik dan bermanfaat
    salam kenal..

    BalasHapus
  15. nyimak lagi cara membuat widget multi tab view...
    nanti kalau ada waktu akan saya terapin

    BalasHapus
  16. ininih solusi untuk menghemat sidebar kita, bisa muat 3 tab langsung :3

    BalasHapus
  17. keren juga ya widget nya bisa dibuat seperti itu, bisa dicoba nih bikin widget tab ;)

    BalasHapus
  18. hmm belum ngerti deh saya kalo liat kode" yang gitu mas :(

    BalasHapus
  19. makasih gan tipsnya .

    BalasHapus
  20. ijin simpan dulu mas.. trimss infonyaaaa...

    BalasHapus
  21. Terimakasih atas infonya gan
    sungguh sangat menarik dan bermanfaat
    salam kenal..

    BalasHapus
  22. Kunjungan Mlam Mas Ficri simak dan baca lagi buat saya belajar memasang widget multi ini. makasih ya Mas Sudah berbagi salam sukses :-bd

    BalasHapus
  23. kunjungan lagi di blog mas ficri....ingin melihat code yang hampir terlupakan...

    BalasHapus
  24. seandainya hidup nie tanpa da kode psti tdak mmbingungkan..
    :(
    but it's ok gan,, bgus kok artikel yg agan buat nie,, salam sukses gan !!! :D

    BalasHapus
  25. Sangan membantu mas, terima kasih dan salam kenal

    BalasHapus
  26. gan, apakah widget seperti ini tidak menurunkan kadar seo suatu blog

    BalasHapus
    Balasan
    1. sebenarnya dalam pemasangan widget, memang lebih baik terbuka atau langsung terlihat dalam 1 halaman saja, kalau multi tab seperti ini memiliki beberapa halaman jadi di khawatirkan tidak ada index ke google.

      Hapus
  27. Terimakasih atas infonya gan
    sungguh sangat menarik dan bermanfaat
    salam kenal..

    BalasHapus
  28. wiih keren, ini yang ane cari-cari, thx artikelnya

    BalasHapus
  29. Terimakasih atas infonya gan
    sungguh sangat menarik dan bermanfaat
    salam kenal..

    BalasHapus
  30. Sangat menarik ya dengan multitab widget blog kita. Bisa di coba nih biar blog saya semakin rapi dan tidak berantakan.. Terima kasih mas infonya.

    BalasHapus
  31. mas kalo masing-masing tab ukurannya di ganti gimana ya?? Thanks before :)

    BalasHapus
  32. Nice artikel bro..
    Widget di blog saya kepenuhan jadi kalau pakai multi tab view mungkin terlihat rapi :-)

    BalasHapus
  33. enak nih, biar blog saya tambah rapi

    BalasHapus
  34. Saya udah coba, tapi tampilannya malah memanjang ke bawah isi widgetnya, masalahnya dimana ya?

    BalasHapus
  35. Kalo buat agar tersusun berbaris kebawah gimana gan?

    BalasHapus
  36. sudah dicoba bro sangat bermanfaat

    BalasHapus
  37. thank om artikelnya keren.

    BalasHapus
  38. mas,, car membuat pintu gerbang kyk di review demo itu gimana ya?,
    bias gk di pasang di blog?

    BalasHapus
    Balasan
    1. Cara Membuat energy Saving Mode Dengan CSS di Blog
      http://www.ficripebriyana.com/2014/06/cara-membuat-energy-saving-mode-dengan-css.html

      silahkan di coba sob

      Hapus
  39. Tqz atas tutorilnya mas,numpang prakrek mas?...

    BalasHapus

Jika Ingin Memasukan Kode Script (CSS, HTML, JavaScript) Silahkan Gunakan Kode Dibawah ini :

1. Untuk Menyisipkan Kode Panjang Gunakan <i rel="pre">Kode Disini</i>
2. Untuk Menyisipkan Kode Pendek Gunakan <i rel="code">Kode Disini</i>
3. Untuk Menyisipkan Quote Gunakan <b rel="quote">Catatan Anda</b>
4. Untuk Menyisipkan Gambar Gunakan <i rel="image">URL Gambar</i>
5. Untuk Menyisipkan Video Gunakan <i rel="youtube">URL Video Youtube</i>

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Fast Hosting