Adsense

Cara Membuat Tabs di Blogspot


Cara membuat tabs di blogspot atau di blogger adalah hal yang sangat perlu di terapkan. karena hal ini akan memberikan daya tarik sendiri untuk penampilan blog kita, yang kelihatannya lebih simpel dan menarik untuk di lihat. nah tentunya akan menjadi daya pikat bagi pengunjung, agar pengunjung betah berlama-lamaan di blog kita. Seperti kebanyakan blog lain, dimana kita lihat di sidebar mau pun di fotter atau di header blog mereka banyak terdapat widget - widget, yang memungkin kan akan lama nya proses loading suatu blog tersebut. Nah untuk mengatasi terjadi nya kelamaan loading adalah dengan cara menambah Tabs. kita hanya cukup memerlukan satu widget untuk menempat kan isi content yang terdapat di widget-widget yang banyak tadi.

Nah untuk anda yang ingin blog nya kelihatan simple dan menarik untuk di lihat anda bisa menambahkan Aplikasi ini untuk blog anda. Berikut langkah-langkah cara menambah tabs ke dalam blog anda :

Langkah Pertama :

  • Login ke blogger
  • Klik Template >> Edit HTML
  • Cari kode ]]></b:skin>
  • Kemudian letakkan kode di bawah ini tepat di bawah ]]></b:skin>

    <!-- Tab Halaman Start -->
    <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>

    <!-- Tab Halaman End -->

  • Kemudian klik Simpan Tamplate
Langkah Kedua :
  • Klik Tata Letak >> Tambahkan Gadget
  • Pilih HTML/JavaScript

  • Copy paste kode dibawah ini ke dalamnya

    <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 #dcc9ba; overflow: hidden; background-color: #dcc9ba;}
    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: 120px; 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: 480px;" class="TTs"> <a>Judul Tab 1</a> <a>Judul Tab 2</a> <a>Judul Tab 3</a></div>
    <div style="width: 480px; 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>
    </form>
    <script type="text/javascript">tabtampil_inisial('TabTampil');</script>


  • Untuk Tulisan berwarna merah letakkan kode konten yang ingin Anda tampilkan
  • Kemudian simpan dan lihat hasilnya

Silahkan Anda berkreasi mengganti besar kecilnya tampilan tab serta warna yang pasti menyesuaikan dengan warna default blog Anda. Pengaturannya ada di style CSS kode script diatas.

Semoga Bermanfaat

Posting Komentar

32 Komentar

  1. tab yg di maksud kya menu di atas y mas ?

    BalasHapus
  2. bukan..., contoh tabnya lihat di sini, pada bagian bawahnya

    BalasHapus
  3. Blog sama artikelnya bagus, komentar juga ke web blog saya juga ya www.when-who-what.com

    BalasHapus
  4. Manteb gan udah lama gue nyari info ini akhirnya ketemu jg... trima kasih..

    BalasHapus
  5. Blog dan artikelnya bagus, komentar juga ya di web saya www.when-who-what.com

    BalasHapus
  6. i feel very lucky can find this page..
    finally i find something that i want to know..
    thank you for this usefull informations..

    BalasHapus
  7. i feel very lucky can find this page..
    finally i find something that i want to know..
    thank you for this usefull informations..

    BalasHapus
  8. i feel very lucky can find this page..
    finally i find something that i want to know..
    thank you for this usefull informations..

    BalasHapus
  9. i feel very lucky can find this page..
    finally i find something that i want to know..
    thank you for this usefull informations..

    BalasHapus
  10. i feel very lucky can find this page..
    finally i find something that i want to know..
    thank you for this usefull informations..

    BalasHapus
  11. i feel very lucky can find this page..
    finally i find something that i want to know..
    thank you for this usefull informations..

    BalasHapus
  12. i feel very lucky can find this page..
    finally i find something that i want to know..
    thank you for this usefull informations..

    BalasHapus
  13. i feel very lucky can find this page..
    finally i find something that i want to know..
    thank you for this usefull informations..

    BalasHapus
  14. i feel very lucky can find this page..
    finally i find something that i want to know..
    thank you for this usefull informations..

    BalasHapus
  15. i feel very lucky can find this page..
    finally i find something that i want to know..
    thank you for this usefull informations..

    BalasHapus
  16. Waw.. ini sangat berguna buat blogger pemula seperti saya.. terimakasih gan infonya

    BalasHapus
  17. thanks ya..
    uudah lama ngga mampir ke sini. apa kabar?

    BalasHapus
  18. blog yang menarik fast loading dan enak dibaca *_^
    makasai informasinya sob http://chapila.com

    BalasHapus
  19. i feel very lucky can find this page..
    finally i find something that i want to know..
    thank you for this usefull informations..

    BalasHapus
  20. Very good information. This is a good and nice blog. keep the good job.

    BalasHapus
  21. Info yang sangat bermanfaat. Terima kasih

    BalasHapus
  22. Teruskan berkarya anak bangsa. Nice info gan,..

    BalasHapus
  23. i feel very lucky can find this page..
    finally i find something that i want to know..
    thank you for this usefull informations..

    BalasHapus
  24. i feel very lucky can find this page..
    finally i find something that i want to know..
    thank you for this usefull informations..

    BalasHapus
  25. koq aku bikin malah box tabelnya keluar yah? apa emang kygtu semuanya?
    trus untuk menulis di tab barunya caranya gmna?
    apa post dlu kemudian mengkategorisasi ke tab nya atau gmna? terimakasihh..

    BalasHapus

  26. thanks for all the bloggers for the advice may be useful especially for me personally, generally for all of us, I hope we all launched online business

    Amin .....................
    pengobatan gondok beracun alami

    BalasHapus

  27. Thank you so much for the info, very interesting information we wait for the next update ^^
    Obat polip kandung empedu tanpa operasi

    BalasHapus

  28. thank you very much gan on information that has been posted, I am personally very impressed with your article I wait for the next update ^^
    Obat Amandel Yang Sudah Bengkak Dan Parah

    BalasHapus

Stop Komentar SPAM
Berkomentarlah dengan Sopan
Salam Anak Bangsa