Tutorial Blogger by Shannenpio

Sabtu, 23 Januari 2010

Rainbow Tab »Tabs content CSS3 Cantik & Antik

"Rainbow tabs" hanyalah sebuah istilah sekedar untuk memberi nama tab konten yang kita buat menggunakan css3. Perpindahan tab menggunakan fungsi hover effect. Anda bisa melihat bagimana rainbow tab bekerja. Tabs content ini tak hanya bisa digunakan melalui "Add a Gadget", namun bisa juga anda gunakan di halaman posting.

Raibow tabs merupakan tab dengan efek transparansi dimana untuk menciptakan efek ini digunakan background rgba. Adapun tujuannya selain membuat "warna terlihat lebih mengkilat" juga agar dalam tab bisa ditampilkan sebuah background image yang terlihat secara samar-samar.

D E M O

Kode CSS dan xHTML
Kode CSS :
#mitraBRtab{
        background:#777 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiloo67826g9oqkrjg9EbF7r156V83M7emB8qp4znfFChPM_yEOP4Q3oaZdONxIUsMQOt8b-3Dvixo5LTHerff4_4qbyKD4E1bpO_dkLXCgkG7O73YvKlb4ToFHgJo-C7O4uluTRm6v7mxA/s340/img_mitrabaraya-cabecabean-1.jpg) center 95% no-repeat;
        background-size:322px 350px;
        border:8px double #666666;
        font-size:12px;
        color: #FF9900;
        position:relative;
        width:322px;
        height:402px;
        margin:20px auto;
}
#mitraBRtab .mitraBRselector{
        width:130px;
        padding:5px;
        height:30px;
        text-align:center;
        display:block;
        font-size:14px;
        font-weight:bold;
        text-transform:uppercase;
        margin:0;
        border:1px solid #000;
}
.mitraBRkonten a:link{
        color:#F90;
        margin-left:0;
        text-decoration:none;
}
.mitraBRkonten a:hover,#mitraBRtabA .mitraBRselector:hover,#mitraBRtabB .mitraBRselector:hover,#mitraBRtab .mitraBRselector:hover{ 
        color:#6F0;
}
#mitraBRtabB .mitraBRkonten{
        z-index:1;
        opacity:0;
        filter:alpha(opacity=0);
}
#mitraBRtabA .mitraBRselector{
        z-index:3;
        left:0;
        background:#30F url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4SCQN_CXIaT0PAzizcPvDQF2PE_oMvfV_u24VAhyphenhyphenaRDLftpdJusyRi4Kb4QoVvBbYfO4_BQKCN0Vztk9cJAvnHlcGm5bAsMWAGxTbAJSQ4SLwHDWUv9h8UYeCapwl0nBGOLN-REEeXBJd/h120/mitrabaraya_biru-4x100.png) left -16px repeat-x;
}
#mitraBRtabB .mitraBRselector{
        background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4SCQN_CXIaT0PAzizcPvDQF2PE_oMvfV_u24VAhyphenhyphenaRDLftpdJusyRi4Kb4QoVvBbYfO4_BQKCN0Vztk9cJAvnHlcGm5bAsMWAGxTbAJSQ4SLwHDWUv9h8UYeCapwl0nBGOLN-REEeXBJd/h120/mitrabaraya_biru-4x100.png) left -50px repeat-x;
        left:180px;
}
#mitraBRtabA .mitraBRselector,#mitraBRtabB .mitraBRselector,#mitraBRtab .mitraBRselector{
        position:absolute;
        cursor:pointer;
        top:0;
        color:#fff;
        font-family:Verdana;
        font-size:14px;
        text-shadow:1px 1px 1px #000;
        line-height:25px;
}
.mitraBRkonten a,#mitraBRtabA .mitraBRselector,#mitraBRtabB .mitraBRselector,#mitraBRtab .mitraBRselector{
        transition:0.6s ease-in;
        -o-transition:0.6s ease-in;
        -moz-transition:0.6s ease-in;
        -webkit-transition:0.6s ease-in;
        -ms-transition:0.6s ease-in;
}
#mitraBRtab:hover .mitraBRselector, #mitraBRtabs:focus .mitraBRselector, #mitraBRtabs:active .mitraBRselector{
        background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWF8ZefvvImgd051U-bcAHELNSeFB2Poj99fUgLyt8dKJq4roS9OjCJ2z_CVNCpAwnJNwq0DgR1BkflbfhLnSIs9xcUG0IJk-D5fgqhGv8hfoGEA6zshKep8_KGKuUladBHkwLF1ge4eT0/h120/mitrabaraya_bg-8x41.png) top right repeat-x;
        z-index:0;
}
#mitraBRtabA:hover .mitraBRselector,#mitraBRtabA:focus .mitraBRselector,#mitraBRtabA:active .mitraBRselector{
        z-index:4;
        background:#060 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3QEoq0zilpSDH5r4v6UotLX4qHCyMOcHX4Wct5-2FJa3uw1L3HWP2CuPWkW7zUGbVUDgeOmSEjSvnkIfvFimjPQrWkPnicYQ33jExCYrQfmtIUIWk0wfOR-WsipCffggJRjMyiqFgpFPX/h120/mitrabaraya_bg-koneng-2x45.gif) bottom left repeat-x;
}
#mitraBRtabB:hover .mitraBRselector,#mitraBRtabB:focus .mitraBRselector,#mitraBRtabB:active .mitraBRselector{
        z-index:4;
        background:#000066 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4SCQN_CXIaT0PAzizcPvDQF2PE_oMvfV_u24VAhyphenhyphenaRDLftpdJusyRi4Kb4QoVvBbYfO4_BQKCN0Vztk9cJAvnHlcGm5bAsMWAGxTbAJSQ4SLwHDWUv9h8UYeCapwl0nBGOLN-REEeXBJd/h120/mitrabaraya_biru-4x100.png) left -55px repeat-x;
}
#mitraBRtab:hover .mitraBRkonten, #mitraBRtabs:focus .mitraBRkonten, #mitraBRtabs:active .mitraBRkonten{
        z-index:0;
        opacity:0;
        filter:alpha(opacity=0);
}
#mitraBRtabA:hover .mitraBRkonten,#mitraBRtabA:focus .mitraBRkonten,#mitraBRtabA:active .mitraBRkonten,#mitraBRtabB:hover .mitraBRkonten,#mitraBRtabB:focus .mitraBRkonten,#mitraBRtabB:active .mitraBRkonten{
        z-index:3;
        opacity:1.0;
        filter:alpha(opacity=100);
        overflow:auto;
        background:rgba(27,1,0,0.85);
}
#mitraBRtabB:hover .mitraBRkonten,#mitraBRtabB:focus .mitraBRkonten,#mitraBRtabB:active .mitraBRkonten{
        color:#D0ECF9;
        background:rgba(2,0,27,0.85);
        overflow:auto;
}
.mitraBRkonten{
        margin:0 !important;
        padding:20px 5px 15px 15px !important;
        background:#fff;
        border:1px solid #000;
        position:absolute;
        left:0;
        top:40px;
        width:300px;
        height:325px;
        display:block;
        margin:0;
        font-family:Arial;
        transition:1s;
        -o-transition:1s;
        -moz-transition:1s;
        -webkit-transition:1s;
        -ms-transition:1s;
        line-height:18px;
        overflow:hidden;
        background:rgba(0,0,0,0.6);
        list-style-type:square;
}
.mitraBRkonten li{
        margin-left:20px;
}
.mitraBRkonten li:hover a{
        margin-left:10px;
}
#mitraBRtabA .mitraBRkonten{
        z-index:2;
        color:#ddd;
}

<div id="mitraBRtab">
<div id="mitraBRtabA">
    <h3 class="mitraBRselector">First Tab</h3>
    <ul class="mitraBRkonten"><p><span style="color:red;">Tuliskan teks di sini !</span> Hujan nu ngaririncik mawa lamunan nu lawas katukang Katembong lebah tanjakan tutuwuhan arajeg mapay ngajajar Gunung nangtung bangun taya kasuwung Sawah ngeplak lir ibarat permadani nungampar ngagelar Breh ka beh kidul.. Walungan matak waas tetempoan!!!</p>
        <li><a class="tipz" href='http://bloggerstuars.blogspot.com' target='_blank' title='Dapatkan menu masakan dari berbagai daerah di seluruh penjuru nusantara'>Menu Masakan Indonesia</a></li>
        <li><a class="tipz" href='http://mitrabarayaonline.blogspot.com' target='_blank' title='Puisi Basa Sunda?!'>Trik Belajar Hipnotis</a></li>
        <li><a class="tipz" href='http://mitrabarayaonline.blogspot.com' target='_blank' title='Panduan lengkap ngeblog di blogdetik'>Tutorial Blogdetik</a></li>
        <li><a class="tipz" href='http://mitrabarayaonline.blogspot.com' target='_blank' title='Panduan sederhana menggynakan Adobe'>Adobe Photoshop</a></li>
        <li><a class="tipz" href='http://mitrabarayaonline.blogspot.com' target='_blank' title='Cara mudah membuat berbagai lightbox'>Lightbox</a></li>
        <li><a class="tipz" href='http://mitrabarayaonline.blogspot.com' target='_blank' title='Cara membuat wanita bertekuk lutut'>Trik Tundukkan Wanita</a></li><p><span style="color:red;">Tuliskan teks di sini ! </span>Hujan nu ngaririncik mawa lamunan nu lawas katukang Katembong lebah tanjakan tutuwuhan arajeg mapay ngajajar Gunung nangtung bangun taya kasuwung Sawah ngeplak lir ibarat permadani nungampar ngagelar Breh ka beh kidul.. Walungan matak waas tetempoan!!!</p><p>
Hujan nu ngaririncik mawa lamunan nu lawas katukang Katembong lebah tanjakan tutuwuhan arajeg mapay ngajajar Gunung nangtung bangun taya kasuwung Sawah ngeplak lir ibarat permadani nungampar ngagelar Breh ka beh kidul.. Walungan matak waas tetempoan!!!</p>
    </ul>
</div>
<div id="mitraBRtabB">
    <h3 class="mitraBRselector">Second Tab</h3>
    <ul class="mitraBRkonten"><p>Hujan nu ngaririncik mawa lamunan nu lawas katukang Katembong lebah tanjakan tutuwuhan arajeg mapay ngajajar Gunung nangtung bangun taya kasuwung Sawah ngeplak lir ibarat permadani nungampar ngagelar Breh ka beh kidul.. Walungan matak waas tetempoan!!!</p>
        <li><a href='Link2a' title='2A'>Nama Link2a</a></li>
        <li><a href='Link2b' title='2A'>Nama Link2b</a></li>
        <li><a href='Link2c' title='2A'>Nama Link2c</a></li>
        <li><a href='Link2d' title='2A'>Nama Link2d</a></li>
        <li><a href='Link2e' title='2A'>Nama Link2e</a></li>
        <li><a href='Link2f' title='2A'>Nama Link2f</a></li>
        <li><a href='Link2g' title='2A'>Nama Link2g</a></li>
        <li><a href='Link2h' title='2A'>Nama Link2h</a></li>
        <li><a href='Link2i' title='2A'>Nama Link2i</a></li>
        <li><a href='Link2j' title='2A'>Nama Link2j</a></li><p>Hujan nu ngaririncik mawa lamunan nu lawas katukang Katembong lebah tanjakan tutuwuhan arajeg mapay ngajajar Gunung nangtung bangun taya kasuwung Sawah ngeplak lir ibarat permadani nungampar ngagelar Breh ka beh kidul.. Walungan matak waas tetempoan!!!</p><p>Hujan nu ngaririncik mawa lamunan nu lawas katukang Katembong lebah tanjakan tutuwuhan arajeg mapay ngajajar Gunung nangtung bangun taya kasuwung Sawah ngeplak lir ibarat permadani nungampar ngagelar Breh ka beh kidul.. Walungan matak waas tetempoan!!!</p>
    </ul>
</div>
<div class="clearboth"></div>
</div>

Cara membuat :
  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. Klik "Simpan Template (Save Template)".
  8. Klik "Rancangan (Design)".
  9. Klik "Add a Gadget".
  10. Klik "HTML/Javascript".
  11. Copy xHTML dan pastekan salam "box HTML/Javascript".
  12. Klik "SIMPAN/SAVE"

Catatan/Keterangan :
  1. Jika membutuhkan panduan cara backup template, cara cari kode dan berbagai cara simpan kode, buka Special Tutorials yang terletak di kolom sebelah kiri.
  2. Selain disimpan di atas kode ]]></b:skin>, kode CSS dapat juga disimpan bersama xHTML melalui "Add a Gadget". Agar bisa disimpan disini tambah tag style pada kode css.
    Kode CSS :
    <style type="text/css">
    Letakkan kode CSS di sini!
    </style>
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 09.13 0 komentar  

Label: , ,

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 0 komentar  

Label: , , ,

Subscribe to: Postingan (Atom)