Cara Mudah Membuat Widget Multi Tab View Pada Blog

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 : Rosby Pranajaya M. Nandjan ~ Mari Berbagi

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


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

Delivered by FeedBurner




37 komentar:

  1. trima kasih gan,, dah berhasil di blog sya, kunjungn balik gan,, http://zainelhasany.blogspot.com/

    BalasHapus
  2. Gan, klo ganti warna teks nya gmna?

    Visit back : http://mahografauzan.blogspot.com

    BalasHapus
  3. wah thanks ya sob ^^ membantu ane nih

    visit back : jordanvengeance.blogspot.com

    BalasHapus
  4. cara naruh content nya agar dapat masuk ke multi tab gimana bang ?

    BalasHapus
  5. memberatkan blog gak ya? coba dulu ah

    BalasHapus
  6. gan kok giniannya gk ada yah < /head>.

    BalasHapus
  7. tolong dong, cara naruh kontennya dimana dan bagaimana caranya?

    BalasHapus

  8. mas, tolong cara meletakkan kontennya bagaimana ?

    BalasHapus
  9. sebelumnya makasih nie untuk infonya tapi z masih bingung cara menganti warnanya nie mohon bantuannya .....

    http://www.bacore.blogspot.com
    http://bouya.co.nr

    BalasHapus
  10. apa sebenernya yang perlu kita paste ke dalam gegdet tambahan itu...??kok punya saya gak mau muncul..tolong infonya...

    BalasHapus
  11. >> HOKIMARKET.COM <<

    ( Jual Produk Kosmetik, Obat Kesehatan, Obat Kuat Dan Alat Bantu )

    Produk-Produk yang kami tawarkan merupakan produk bermutu dan berkualitas. Kami berpengalaman 10 tahun dan kami sudah banyak pelanggan, baik di indonesia maupun luar nengri.

    Bahkan meraka tidak ragu untuk ikut serta memasarkan produk kami dan menjadi Agen / reseller produk kami.

    Website : HOKIMARKET.COM

    ADULT SHOP PRIA ::
    * Vagina Senter / Menambah Kenikmatan Dalam Onani Anda
    * Boneka Full Body Asli Cantik
    * Vagina Getar Goyang Suara
    * Vagina Pinggul Getar Goyang Suara
    * Vagina Elektrik Bulu Getar
    * Alat Bantu Sex Vagina Getar

    ADULT SHOP WANITA ::
    * Penis Elektrik Telor Tempel
    * Penis Mutiara Maju Mundur
    * Penis Elektrik Ikan Pinggang
    * Penis Silikon Elektrik Getar Goyang
    * Alat Bantu Sex Penis Tekuk Silikon
    * Alat Bantu Vibrator Multi Use Scent

    PRODUK LAIN-LAIN
    * VIMAX Herbal (Pembesar Dan Perpanjang Penis Hingga 3-6cm)
    * Celana Hernia Magnetik
    * Obat Perangsang Sex Wanita_5 Manit
    * Pil Pembesar Payudara (Breast Lift-Up Beauty)
    * HAIR REMOVAL "Obat Perontok Bulu" Permanen
    * Obat Peninggi Badan USA No.1 (Obat Paten)
    * Pemutih Muka / Ketiak / Selakangan
    * Penghilang Tato / Bekas Luka
    * Obat Penghilang Jerawat, Komedo, Bopeng

    >> Dan Masih Banyak Produk Kami Yang Lainnya.....



    Jika anda berminat dengan produk-produk kami, Silahkan hubungi kami.

    Untuk Lebih Jelasnya Silahkan Kunjungi website Kami : HOKIMARKET.COM



    *** Salam by HOKIMARKET.COM ***

    BalasHapus
  12. Thx Artikelnya muatep, dan aku coba di terapin di blogku dan berhasil

    BalasHapus
  13. trims gan http://masteranang.blogspot.com/

    BalasHapus
  14. gan cara masukin contentnya pake apa? html apa langsung judul widgetnya?

    BalasHapus
  15. wkwkw, cuma modal copas. payah

    BalasHapus
  16. Thanks gan :)
    http://aniyosuke.blogspot.com

    BalasHapus
  17. Permisi gan, kalau mau nambahin Tab nya jadi 4 atau lebih bagaimana ya?
    Saya coba kok cuman bisa 3 Tab doang ya?
    Mohon pencerahannya, sebelumnya terima kasih

    BalasHapus
  18. thanks gan,.. udah ane pakek disini http://tulisan-kaktegar.blogspot.com/

    BalasHapus
  19. cara yg langsung bikin widget ada kan ya gak pakai oprek template? :)

    BalasHapus
  20. Langsung dipraktekkan, terima kasih ilmunya mas!!
    Jangan lupa kunjungan dan komentar balik di blog dofollow aku ya, aku tunggu...!!

    BalasHapus
  21. cara menambahkan menu nya gmn bos ? mau tambhin beberap menu lagi ga hanya 3 ?

    BalasHapus
    Balasan
    1. tinggal tambahkan saja,brp yang di inginkan,apa yg agan maksud spt py saya? coba cek di sini http://dewaselaluonline.blogspot.com/

      Hapus
  22. tap1 tab2 tab3 itu untuk nama labelnya ya gan..?

    BalasHapus
    Balasan
    1. cobba cek hasil nya py saya,klo suka ntar saya ajarin gan
      di sini http://dewaselaluonline.blogspot.com/

      Hapus
  23. Terimakasih banyak sob, sangat membantu sekali artikelnya..

    BalasHapus
  24. PROMO BESAR BESARAN GUNUNG MAS PONSEL TEMPAT BELANJA ONLINE AMAN DAN TERPERCAYA. 100% BEBAS PENIPUAN
    MINAT PIN BB: 582F8501 HUB/SMS:0851-4515-5828 klik web resmi kami di http://gunungmas-phone.blogspot.com/
    Ready Stock! Apple iPhone 5 32GB Rp.2.500.000
    Ready Stock! Apple iPhone 5S 32GB Rp.3.000.000
    Ready Stock! Samsung Galaxy A3 A300H Rp.1.500.000
    Ready Stock! Samsung Galaxy A5 A500F Rp.2.000.000
    Ready Stock! Samsung Galaxy E5 E500H Rp.1.500.000
    Ready Stock! Samsung Galaxy Grand Prime SM-530H Rp.800.000.
    Ready Stock! Asus Zenfone 2 ZE551ML RAM 4GB Rp.2.000.000
    Ready Stock! Samsung Galaxy S3 I9300 .Rp.1.500.000.
    Ready Stock! Samsung Galaxy S6 32GB Rp.3.300.000
    Ready Stock! Samsung Galaxy Note N7100.Rp.2.000.000.
    Ready Stock! Samsung Galaxy Note 4 SM-N910H Rp.3.500.000
    Ready Stock! Samsung Galaxy Note 3 Rp.2.000.000
    Ready Stock ! Samsung Galaxy S5 Rp.2.000.000,
    Ready Stock ! Samsung Galaxy S4 l9500 Rp.1.500.000

    BalasHapus
  25. maaf mau tanya, Taruh content Tab 3 disini maksudnya apa ya ?

    tuker link yuk di : http://nukeshopbekasi.blogspot.co.id/2014/09/tukar-link-alias-backlink-gratis-mau.html

    Terimakasih

    BalasHapus
  26. Terimakasih atas informasinya. Silahkan berkunjung ke blog saya Doa Ibu Blog

    BalasHapus
  27. Saya bingung meletakkan kontenya gmana???
    Cek : http://paijokun.blogspot.com/

    BalasHapus

Silahkan Sobat tinggalkan komentar dengan kata - kata yang Baik, Bijak dan Sopan.

Yang tidak diperbolehkan dalam berkomentar :
1. Komentar yang mengandung unsur SARA.
2. Komentar yang berbau PORNO.
3. Komentar Saling CACI MAKI.
4. Komentar yang Memasukan LINK IKLAN dan LINK AKTIF.

Saya harap Sobat dapat mematuhi aturan berkomentar yang saya buat. Jika ada komentar yang melanggar ketentuan tersebut diatas dan dianggap spam akan Saya Hapus. Atas kerjasama sobat sekalian saya ucapkan banyak Terima Kasih. Salam Sukses selalu untuk Sobat dan Salam Blogger.