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 :

#mbahGRtab{
        background:#777 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1MJyL4QfAaJFMG64Rppl99dz409nr29foKz0T4CyXC9vdrQ4Eqo_9vM9wohdwuaLiTfiiDowG9FckShAzUS5AXPYvXWIEC2dYUCMMIhakZrPNfBhjcPkZRCFh9IYFpEUiq_1VbgMvYTU/s340/img_gubhugreyot_gadisku-06.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;
}
#mbahGRtab .mbahGRselector{
        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;
}
.mbahGRkonten a:link{
        color:#F90;
        margin-left:0;
        text-decoration:none;
}
.mbahGRkonten a:hover,#mbahGRtabA .mbahGRselector:hover,#mbahGRtabB .mbahGRselector:hover,#mbahGRtab .mbahGRselector:hover{ 
        color:#6F0;
}
#mbahGRtabB .mbahGRkonten{
        z-index:1;
        opacity:0;
        filter:alpha(opacity=0);
}
#mbahGRtabA .mbahGRselector{
        z-index:3;
        left:0;
        background:#30F url(https://lh4.googleusercontent.com/-Qgnehm31W-E/T2RPdyOU76I/AAAAAAAAAcA/ULIWGJNUhUM/h120/grad-blue-transp-4x100.png) left -16px repeat-x;
}
#mbahGRtabB .mbahGRselector{
        background:#fff url(https://lh4.googleusercontent.com/-Qgnehm31W-E/T2RPdyOU76I/AAAAAAAAAcA/ULIWGJNUhUM/h120/grad-blue-transp-4x100.png) left -50px repeat-x;
        left:180px;
}
#mbahGRtabA .mbahGRselector,#mbahGRtabB .mbahGRselector,#mbahGRtab .mbahGRselector{
        position:absolute;
        cursor:pointer;
        top:0;
        color:#fff;
        font-family:Verdana;
        font-size:14px;
        text-shadow:1px 1px 1px #000;
        line-height:25px;
}
.mbahGRkonten a,#mbahGRtabA .mbahGRselector,#mbahGRtabB .mbahGRselector,#mbahGRtab .mbahGRselector{
        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;
}
#mbahGRtab:hover .mbahGRselector, #mbahGRtabs:focus .mbahGRselector, #mbahGRtabs:active .mbahGRselector{
        background:#fff url(https://lh3.googleusercontent.com/-tONv3Oew8_8/T2bbmxS1cxI/AAAAAAAAAco/uy2Lqhozn7Q/h120/bgGradRedBlackV41H8.png) top right repeat-x;
        z-index:0;
}
#mbahGRtabA:hover .mbahGRselector,#mbahGRtabA:focus .mbahGRselector,#mbahGRtabA:active .mbahGRselector{
        z-index:4;
        background:#060 url(https://lh4.googleusercontent.com/-Tk55wbQOL_s/T2XGvQfF2WI/AAAAAAAAAcY/1_THN4F2g7A/h120/gradOrangeBlackV45H2.gif) bottom left repeat-x;
}
#mbahGRtabB:hover .mbahGRselector,#mbahGRtabB:focus .mbahGRselector,#mbahGRtabB:active .mbahGRselector{
        z-index:4;
        background:#000066 url(https://lh4.googleusercontent.com/-Qgnehm31W-E/T2RPdyOU76I/AAAAAAAAAcA/ULIWGJNUhUM/h120/grad-blue-transp-4x100.png) left -55px repeat-x;
}
#mbahGRtab:hover .mbahGRkonten, #mbahGRtabs:focus .mbahGRkonten, #mbahGRtabs:active .mbahGRkonten{
        z-index:0;
        opacity:0;
        filter:alpha(opacity=0);
}
#mbahGRtabA:hover .mbahGRkonten,#mbahGRtabA:focus .mbahGRkonten,#mbahGRtabA:active .mbahGRkonten,#mbahGRtabB:hover .mbahGRkonten,#mbahGRtabB:focus .mbahGRkonten,#mbahGRtabB:active .mbahGRkonten{
        z-index:3;
        opacity:1.0;
        filter:alpha(opacity=100);
        overflow:auto;
        background:rgba(27,1,0,0.85);
}
#mbahGRtabB:hover .mbahGRkonten,#mbahGRtabB:focus .mbahGRkonten,#mbahGRtabB:active .mbahGRkonten{
        color:#D0ECF9;
        background:rgba(2,0,27,0.85);
        overflow:auto;
}
.mbahGRkonten{
        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;
}
.mbahGRkonten li{
        margin-left:20px;
}
.mbahGRkonten li:hover a{
        margin-left:10px;
}
#mbahGRtabA .mbahGRkonten{
        z-index:2;
        color:#ddd;
}

<div id="mbahGRtab">
<div id="mbahGRtabA">
    <h3 class="mbahGRselector">First Tab</h3>
    <ul class="mbahGRkonten"><p><span style="color:red;">Tuliskan teks di sini !</span> Urip mono sing jelas kudu metu kringete! Ora sah sok ngondho tanggane, lan ora kakehan ngomong ning diakehi le tumindak! Eman-eman idune wong dudu idu geni koyo idune sing podho nganggo dasi lan sepatonan kinclong!!!</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://tantytm.blogspot.com' target='_blank' title='Mengapa harus belajar hipnotis? Bukankan mendingan ngeblog saja?!'>Trik Belajar Hipnotis</a></li>
        <li><a class="tipz" href='http://gubhugreyot.blogdetik.com' target='_blank' title='Panduan lengkap ngeblog di blogdetik'>Tutorial Blogdetik</a></li>
        <li><a class="tipz" href='http://gubhugreyot.blogdetik.com' target='_blank' title='Panduan sederhana menggynakan Adobe'>Adobe Photoshop</a></li>
        <li><a class="tipz" href='http://lightbox-demo-tutorial.blogspot.com' target='_blank' title='Cara mudah membuat berbagai lightbox'>Lightbox</a></li>
        <li><a class="tipz" href='http://gubhugreyot-demo-tutorial-blogger-1.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>Urip mono sing jelas kudu metu kringete! Ora sah sok ngondho tanggane, lan ora kakehan ngomong ning diakehi le tumindak! Eman-eman idune wong dudu idu geni koyo idune sing podho nganggo dasi lan sepatonan kinclong!!!</p><p>
Urip mono sing jelas kudu metu kringete! Ora sah sok ngondho tanggane, lan ora kakehan ngomong ning diakehi le tumindak! Eman-eman idune wong dudu idu geni koyo idune sing podho nganggo dasi lan sepatonan kinclong!!!</p>
    </ul>
</div>
<div id="mbahGRtabB">
    <h3 class="mbahGRselector">Second Tab</h3>
    <ul class="mbahGRkonten"><p>Urip mono sing jelas kudu metu kringete! Ora sah sok ngondho tanggane, lan ora kakehan ngomong ning diakehi le tumindak! Eman-eman idune wong dudu idu geni koyo idune sing podho nganggo dasi lan sepatonan kinclong!!!</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>Urip mono sing jelas kudu metu kringete! Ora sah sok ngondho tanggane, lan ora kakehan ngomong ning diakehi le tumindak! Eman-eman idune wong dudu idu geni koyo idune sing podho nganggo dasi lan sepatonan kinclong!!!</p><p>Urip mono sing jelas kudu metu kringete! Ora sah sok ngondho tanggane, lan ora kakehan ngomong ning diakehi le tumindak! Eman-eman idune wong dudu idu geni koyo idune sing podho nganggo dasi lan sepatonan kinclong!!!</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 - gubhugreyot «