Tutorial Blogger by Shannenpio

Minggu, 10 Januari 2010

Cara Membuat DIV Tab View

Untuk menghemat tempat, tab view menu sangat efisien. Ukuran yang relatif kecil tapi bisa memuat banyak space. Hal ini pernah ditanyakan oleh anda blogger pada kolom shout box beberapa minggu yang lalu tentang bagaimana cara membuat menu yang bisa memuat banyak judul, mungkin menu tab view ini yang dimaksud ya.

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 :
.MBtab_view{
        margin:20px auto;
        text-align:center;
        float:none;
        background:#888;
        width:356px;
}
div.MBtab_view div.tabs{
        cursor:pointer;
        height:30px;
        overflow:hidden;
        border:4px solid #999;
        float:left;
        width:350px;
        background:#666;
}
div.MBtab_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.MBtab_view div.tabs a:hover{
        background:#900;
        color:#fff;
} 
div.MBtab_view div.tabs a.Active{
        background:#444;
        color:#FF0000;
}
div.MBtab_view div.tabs a.Active:hover{
        background:#555;
        color:#ffff99;
} 
div.MBtab_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.MBtab_view div.FTs ul{
        list-style-type:square;
        margin:0;
        padding:0;
        padding-left:15px;
}
div.MBtab_view div.FTs li p{
        margin:0 0 0 4px;
}
div.MBtab_view div.FTs div.FT{
        background:rgba(0,0,0,0.6);
        height:100%;
        padding:10px;
        overflow:hidden;
}
div.MBtab_view div.FTs div.FT div.Fs{}
div.MBtab_view a{
        cursor:pointer;
        color:#F90;
        text-decoration:none;
        padding:2px 4px;
        margin:0;
        text-shadow:1px 1px 1px #000;
}
div.MBtab_view a:hover{
        color:#6FF;
        text-decoration:none;
        background:#F90;
}
div.MBtab_view a.MBview_img img{padding:2px;background:#777;}
div.MBtab_view a.MBview_img:hover{background:none;}
div.MBtab_view a.MBview_img img:hover{
        background:#F90;
}

Javascript-1 :
<script type="text/javascript">
//<[CDATA[
function MBtab_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:MBtab_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 MBtab_view_switch(d, c) {
    MBtab_view_aux(d, c)
}
function MBtab_view_initialize(b) {
    MBtab_view_aux(b, 1)
};
//]]>
</script>
Javascript-2 :
<script type="text/javascript">
MBtab_view_initialize('MBtab_view');
</script>
xHTML :
<div class="MBtab_view" id="MBtab_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://mitrabarayaonline.blogspot.com/2010/01/tab-view.html" target="_blank">Drop Down Menu</a><p>Dropdown menu css3 ...</p></li>
            <li><a href="http://mitrabarayaonline.blogspot.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="MBview_img" href="http://bgsgr.blogspot.com" target="_blank"><img class="opa" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihc2XTTZ-ClnZLOL08fztNA8idaXmRJaHusQW_6KIq2rAhOvHmCNi_drLZ52928TtnIIA5Ul1sqlZT_E8B3rldy0CdAJ9rXI_tUpI8nwAkdNIWJxlMeIq0IfS21eWXjxoix1TnFiGa52R2/s144-c/mitrabaraya_DIV-TabView-1.png" style="width:50px;margin:5px 0 5px 0;" /></a>
        </ul>
    </div>
    <div class="FT">
        <ul>
            <li><a href="http://mitrabarayaonline.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="MBview_img" href="Link Photo Artis.html" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihc2XTTZ-ClnZLOL08fztNA8idaXmRJaHusQW_6KIq2rAhOvHmCNi_drLZ52928TtnIIA5Ul1sqlZT_E8B3rldy0CdAJ9rXI_tUpI8nwAkdNIWJxlMeIq0IfS21eWXjxoix1TnFiGa52R2/s144-c/mitrabaraya_DIV-TabView-1.png" 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 - mitrabaraya «

Diposting oleh Shannenpio Cloning di 08.51  

Label: , , ,

0 Comments:

Posting Komentar

Subscribe to: Posting Komentar (Atom)