Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Arsip...

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

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://lh3.googleusercontent.com/-uLXCAnJg-Io/TxpaYP5sJlI/AAAAAAAAADg/0HD9TPc_GnM/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 «

4 komentar:

  1. Balasan
    1. saya ingin berbagi cerita kepada semua teman-teman bahwa saya yg dulunya orang yg paling tersusah,walaupun mau makan itu pun harus hutang dulu sama tetangga dan syukur kalau ada yg mau kasi,semakin aku berusaha semakin jauh juga pekerjaan dan selama aku ingin berbuat baik kepada orang lain semakin banyak pula yg membenci saya karna saya cuma dianggap rendah sama orang lain karna saya tidak punya apa-apa,dan akhirnya saya berencana untuk pergi mencari dukun yg bisa menembus nomor dan disuatu hari saya bertemu sama orang yg pernah dibantu sama MBAH KABOIRENG dan dia memberikan nomor MBAH KABOIRENG,dia bilan kepada saya kalau MBAH KABOIRENG bisa membantu orang yg lagi kesusahan dan tidak berpikir panjang lebar lagi saya langsun menghubungi MBAH KABOIRENG dan dengan senan hati MBAH KABOIRENG ingin membantu saya,,alhamdulillah saya sudah menang togel yg ke5 kalinya dan rencana saya bersama keluarga ingin membuka usaha dan para teman-teman diluar sana yg ingin seperti saya silahkan hubungi MBAH KABOIRENG di 085=260=482=111 saya sangat bersyukur kepada allah karna melalui bantuan MBAH KABOIRENG dan kini kehidupan saya sudah jauh lebih baik dari sebelumnya,ingat kesempatan tdk akan datan untuk yg kedua kalinya.. KLIK TOGEL 2D 3D 4D 6D DISINI













      saya ingin berbagi cerita kepada semua teman-teman bahwa saya yg dulunya orang yg paling tersusah,walaupun mau makan itu pun harus hutang dulu sama tetangga dan syukur kalau ada yg mau kasi,semakin aku berusaha semakin jauh juga pekerjaan dan selama aku ingin berbuat baik kepada orang lain semakin banyak pula yg membenci saya karna saya cuma dianggap rendah sama orang lain karna saya tidak punya apa-apa,dan akhirnya saya berencana untuk pergi mencari dukun yg bisa menembus nomor dan disuatu hari saya bertemu sama orang yg pernah dibantu sama MBAH KABOIRENG dan dia memberikan nomor MBAH KABOIRENG,dia bilan kepada saya kalau MBAH KABOIRENG bisa membantu orang yg lagi kesusahan dan tidak berpikir panjang lebar lagi saya langsun menghubungi MBAH KABOIRENG dan dengan senan hati MBAH KABOIRENG ingin membantu saya,,alhamdulillah saya sudah menang togel yg ke5 kalinya dan rencana saya bersama keluarga ingin membuka usaha dan para teman-teman diluar sana yg ingin seperti saya silahkan hubungi MBAH KABOIRENG di 085=260=482=111 saya sangat bersyukur kepada allah karna melalui bantuan MBAH KABOIRENG dan kini kehidupan saya sudah jauh lebih baik dari sebelumnya,ingat kesempatan tdk akan datan untuk yg kedua kalinya.. KLIK TOGEL 2D 3D 4D 6D DISINI



      Hapus

 
GR | Edited by | gubhug reyot