Panduan BloGGeR Cara Membuat DIV Tab View

Tab view sangat tepat digunakan blog yang mempunyai materi posting bervariasi. Tab view tak ubahnya sebuah box menu yang dibagi dalam beberapa tab. Masing-masing tab mempunyai lebar sama dengan box yang digunakan dan hal seperti ini sangat berguna karena setiap tab bisa memanfaatkan lebar kolom secara maksimal. Banyak cara bisa digunakan untuk membuat tab view, namun kali ini kita coba membuat dengan bantuan sebuah javascript yang sangat sederhana namun mampu melakukan dungsinya secara sempurna.

Tab view ini terhitung sangat irit dalam penggunaan KODE CSS ataupun script namun demikian mampu memberikan penampilan yang sangat istimewa. Tentu saja dengan iritnya penggunaan CSS dan script ini akan sangat menguntungkan terhadap stabilitas loading blog.

D E M O

Kode CSS Tab View :

.GRtab_view{
        margin:20px auto;
        text-align:center;
        float:none;
        background:#888;
        width:356px;
}
div.GRtab_view div.tabs{
        cursor:pointer;
        height:30px;
        overflow:hidden;
        border:4px solid #999;
        float:left;
        width:350px;
        background:#666;
}
div.GRtab_view div.tabs a{
        float: left;
        display: block;
        text-align:center;
        padding:8px;
        vertical-align: middle;
        border: 1px solid #444;
        font-family:Arial;
        font-weight:700;
        font-size:11px;
        text-transform:uppercase;
        color:#eee;
        background:#666;
}
div.GRtab_view div.tabs a:hover{
        background:#900;
        color:#fff;
} 
div.GRtab_view div.tabs a.Active{
        background:#444;
        color:#FF0000;
}
div.GRtab_view div.tabs a.Active:hover{
        background:#555;
        color:#ffff99;
} 
div.GRtab_view div.FTs{
        clear:both;
        text-align:left;
        border:3px solid #888;
        border-bottom-width:10px;
        overflow: hidden;
        background:#888;
        width:350px;
        height:250px;
        margin-top:0;
        font-size:11px;
        font-family:verdana;
        color:#CCC;
        line-height:18px;
        padding:1px;
        background:rgba(0,0,0,0.1);
}
div.GRtab_view div.FTs ul{
        list-style-type:square;
        margin:0;
        padding:0;
        padding-left:15px;
}
div.GRtab_view div.FTs li p{
        margin:0 0 0 4px;
}
div.GRtab_view div.FTs div.FT{
        background:rgba(0,0,0,0.6);
        height:100%;
        padding:10px;
        overflow:hidden;
}
div.GRtab_view div.FTs div.FT div.Fs{}
div.GRtab_view a{
        cursor:pointer;
        color:#F90;
        text-decoration:none;
        padding:2px 4px;
        margin:0;
        text-shadow:1px 1px 1px #000;
}
div.GRtab_view a:hover{
        color:#6FF;
        text-decoration:none;
        background:#F90;
}
div.GRtab_view a.GRview_img img{padding:2px;background:#777;}
div.GRtab_view a.GRview_img:hover{background:none;}
div.GRtab_view a.GRview_img img:hover{
        background:#F90;
}

Javascript-1 :

<script type="text/javascript">
//<[CDATA[
function GRtab_view_aux(m, k) {
    var l = document.getElementById(m);
    var n = l.firstChild;
    while (n.className != "tabs") {
        n = n.nextSibling
    }
    var i = n.firstChild;
    var o = 0;
    do {
        if (i.tagName == "A") {
            o++;
            i.href = "javascript:GRtab_view_switch('" + m + "', " + o + ");";
            i.className = (o == k) ? "Active": "";
            i.blur()
        }
    } while (i = i.nextSibling);
    var p = l.firstChild;
    while (p.className != "FTs") {
        p = p.nextSibling
    }
    var j = p.firstChild;
    var o = 0;
    do {
        if (j.className == "FT") {
            o++;
            if (p.offsetHeight) {
                j.style.height = (p.offsetHeight - 2) + "px"
            }
            j.style.overflow = "auto";
            j.style.display = (o == k) ? "block": "none"
        }
    } while (j = j.nextSibling)
}
function GRtab_view_switch(d, c) {
    GRtab_view_aux(d, c)
}
function GRtab_view_initialize(b) {
    GRtab_view_aux(b, 1)
};
//]]>
</script>

Javascript-2 :

<script type="text/javascript">
GRtab_view_initialize('GRtab_view');
</script>

xHTML :

<div class="GRtab_view" id="GRtab_view">
    <div class="tabs">
        <a>CSS</a>
        <a>Javascript</a>
        <a>Animasi gif</a>
        <a>Music</a>
        <a>Gallery</a>
    </div>             
<!-- ======== Start content ========== -->
<div class="FTs">
    <div class="FT">
        <ul>
            <li><a href="http://gubhugreyot.blogspot.com/2010/01/tab-view.html" target="_blank">Drop Down Menu</a><p>Dropdown menu css3 ...</p></li>
            <li><a href="http://gubhugreyot.blogdetik.com" target="_blank">Tab View Script</a></li>
            <li><a href="http://tantytm.blogspot.com" target="_blank">Hoizontal Menu</a></li>
            <li><a href="http://lightbox-demo-tutorial.blogspot.com" target="_blank">Opacity Effect Script</a></li><a class="GRview_img" href="http://bgsgr.blogspot.com" target="_blank"><img class="opa" src="https://lh6.googleusercontent.com/-KBlhOxwhO24/T14I_GP8XvE/AAAAAAAAAXY/eMUM3EBaEBs/s144-c/12Maret2012.jpg" style="width:50px;margin:5px 0 5px 0;" /></a>
        </ul>
    </div>
    <div class="FT">
        <ul>
            <li><a href="http://gubhugreyot-demo-tutorial-blogger-2.blogspot.com/2012/03/hidden-text-sizer.htmlhtml" target="_blank">Hidden Tex Sizer</a></li>
            <li><a href="Link Text Animation.html" target="_blank">Text Animation</a></li>
            <li><a href="Link Top Bar Script.html" target="_blank">Top Bar Script</a></li>
        </ul>
    </div>
    <div class="FT">
        <ul>
            <li><a href="Link Memotong Gambar.html" target="_blank">Memotong Gambar</a></li>
            <li><a href="Link Photo dari Layar PC.html" target="_blank">Photo dari Layar PC</a></li>
        </ul>
    </div>
    <div class="FT">
        <ul>
            <li><a href="Link Mp3 Barat.html" target="_blank">Mp3 Barat</a></li>
            <li><a href="Link Mp3 Indonesia.html" target="_blank">Mp3 Indonesia</a></li>
            <li><a href="LinkReggae.html" target="_blank">Reggae</a></li>
        </ul>
    </div>
    <div class="FT">
        <ul>
            <li><a href="Link Photo Artis.html" target="_blank">Photo Artis Telanjang</a></li>
<a class="GRview_img" href="Link Photo Artis.html" target="_blank"><img src="https://lh6.googleusercontent.com/-KBlhOxwhO24/T14I_GP8XvE/AAAAAAAAAXY/eMUM3EBaEBs/s144-c/12Maret2012.jpg" style="width:50px;margin:5px 0 5px 0;" /></a>
            <li><a href="Link Photo Pemandangan.html" target="_blank">Photo Pemandangan </a></li>
            <li><a href="Link Pakaian Adat Afrika.html" target="_blank">3.Pakaian Adat Afrika</a></li>
        </ul>
    </div>
</div>
<!-- ======== End content ========== -->
</div>

Cara membuat DIV Tab View :

1. Login ke Blogger.
   
   • Tuliskan "User Name" (gmail) atau tuliskan "Email Address" (non gmail).
   • Tuliskan Password.
   • Klik "Sign in"
2. Beberapa saat setelah klik sign in anda akan menjumpai halaman "Dasbor (Dasboard)".
   Klik "Rancangan (Design)".
3. Kembali halaman baru akan terbuka, klik "Edit HTML".
4. Sebuah halaman baru kembali kita jumpai. Halaman ini berisi 3 (tiga) bagian:
   
   • Backup/Restore Template » berisi fitur untuk melakukan backup template.
   • Edit Template » berisi sebuah box besar yang di dalamnya berisikan kode html penyusun blog.
   • Old Templates » berisi template lama blogger (Template Tata Letak & Template Klasik.
5. Cari kode ]]></b:skin> pada "Box Edit Template".
6. Copy kode CSS dan letakkan di atas ]]></b:skin>
7. Copy Javascript-1 dan letakkan di bawah ]]></b:skin>
8. Cari kode </body> kemudian letakkan javascript-2 di atasnya.
9. Klik "Simpan Template (Save Template)".
10. Klik "Rancangan (Design)".
11. Klik "Add a Gadget". Pilih elemen yang mempunyai lebar sekitar 380px.
12. Klik "HTML/Javascript".
13. Copy xHTML dan pastekan salam "box HTML/Javascript".
14. Klik "SIMPAN/SAVE"

Catatan/Keterangan :

• Setelah tab view berhasil dibuat, ganti variable isi tab view dengan yang ingin anda tampilkan.
• Merubah ukuran lebar tab view dilakukan dengan merubah width pada beberapa syntax. Perubahan juga akan berpengaruh terhadap jumlah tab.
• Gunakan title setiap tab sependek mungkin agar bisa lebih banyak tab termuat.
• Tab view selain untuk memmuat daftar link juga dapat digunakan untuk berbagai hal lain seperti memuat artikel pendek atau image.
• Jika membutuhkan panduan backup template, cara mencari kode dan berbagai cara menyimpan kode di template, silahkan buka Special Tutorials di kolom sebelah kiri halaman.
• Tab view dapat digunakan juga di halaman posting.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Update » Ngahad   LEGI,Maret,17,2012

» Happy Blogging - gubhugreyot «