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

35 komentar

tab yg di maksud kya menu di atas y mas ?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Info yang sangat bermanfaat. Terima kasih

Teruskan berkarya anak bangsa. Nice info gan,..

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

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

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


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


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


Thank you friend for the information very helpful at all .. !!
Obat Polip kandung Empedu Yang Alami


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

Stop SPAM Comments
EmoticonEmoticon