Cumulus swf - flash

Bru masuk angin!

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

Hover Link Warna Pelangi - Rainbow Color Effect with css3 Animation

Dalam bulan-bulan terakhir ini Opera telah mulai support terhadap css3. Sebuah kemajuan yang sangat menggembirakan yang mampu menggugah semangat baru untuk kembali berkarya. Yah...., selama ini gubhugreyot sama sekali memang belum mempostingkan desain atau tutorial yang berkaitan dengan css3 animation, dimana penundaan posting tentang css3 ini karena belum semua browser besar mendukung secara penuh. Kini setelah Opera juga sudah support penuh (hanya tinggal IE yg belum mendukung css3), maka tak ada lagi kendala & hambatan untuk membuat tutorial ataupun desain yang melibatkan penggunaan css3 animation. Untuk mengawali posting tentang css3 animation, kita akan membuat sebuah efek warna pelangi pada hover teks link yang hanya menggunaakan kode css. tentu saja dalam hal ini adalah css3 animation. Bagi sobat-sobat blogger yang selama ini menggunakan javascript dan ingin merubahnya menjadi dalam kode css, silahkan ikuti tutorial berikut.

D E M O

Pertimbangan menggunakan css3 animation untuk efek pelangi pada hover teks link :

  1. Semua browser telah support terhadap css3 animation.
    Bagi anda yg masih menggunakan browser lama, silahkan segera download browser terbaru yang telah mendukung css3 animation. Anda bisa membuka link download melalui menu disebelah kiri halaman blog.
  2. Penggunaan css3 animation membuat kode menjadi lebih irit & ringkas, sehingga loading blog menjadi tak banyak terpengaruh.
  3. Penggunaan kode css3 memudahkan blogger untuk membuat berbagai variasi warna pada efek pelangi yang ditimbulkan.
  4. Penggunaan kode css3 animation lebih memudahkan blogger untuk mengembangkan berbagai efek baru (efek tambahan).
Kode CSS Hover Pelangi:
@keyframes GRhoverpelangi{0%{color:black;}19%{color:red;}25%{color:brown;}40%{color:blue;}55%{color:green;}70%{color:orange;}85%{color:magenta;}100%{color:black;}}
@-o-keyframes GRhoverpelangi{0%{color:black;}19%{color:red;}25%{color:brown;}40%{color:blue;}55%{color:green;}70%{color:orange;}85%{color:magenta;}100%{color:black;}}
@-ms-keyframes GRhoverpelangi{0%{color:black;}19%{color:red;}25%{color:brown;}40%{color:blue;}55%{color:green;}70%{color:orange;}85%{color:magenta;}100%{color:black;}}
@-moz-keyframes GRhoverpelangi{0%{color:black;}19%{color:red;}25%{color:brown;}40%{color:blue;}55%{color:green;}70%{color:orange;}85%{color:magenta;}100%{color:black;}}
@-webkit-keyframes GRhoverpelangi{0%{color:black;}19%{color:red;}25%{color:brown;}40%{color:blue;}55%{color:green;}70%{color:orange;}85%{color:magenta;}100%{color:black;}}
a:hover{ /* original code by : gubhugreyot.blogspot.com 30 Juni 2012 */ 
 animation:GRhoverpelangi 4s infinite; /* Standart */
 -o-animation:GRhoverpelangi 4s infinite; /* Opera */
 -ms-animation:GRhoverpelangi 4s infinite; /* IE */
 -moz-animation:GRhoverpelangi 4s infinite; /* Firefox */
 -webkit-animation:GRhoverpelangi 4s infinite; /* Safari and Chrome */  
}

Cara menyimpan Kode CSS Efek pelangi pada Hover Teks Link:

  1. Login ke Blogger.
  2. Dasbor (Dasboard).
  3. Design (Rancangan).
  4. Edit HTML.
  5. Backup Template.
  6. Cari Kode ]]></b:skin>, kemudian letakkan kode css tepat di atasnya.
  7. Klik Simpan Template (Save Template)

Catatan/keterangan:

  1. Untuk merubah variasi warna hover link dapat dilakukan dengan merubah warna (black, red, brown, blue, green, orange, magenta, black) yang terdapat di kode css.
  2. Jika menghendaki data warna, sampeyan bisa melihat tabel lengkap data setiap warna berikut namanya dengan klik di sini.
  3. Panduan cara Backup Template, cara cari kode dan berbagai cara menyimpan kode css, javascript dan xHTML dapat dibuka pada Special Tutorials di menu sebelah kiri halaman.
  4. Jika anda menggunakan template blogger baru (New Blogger Interface), anda dapat mengikuti panduan cara menyimpan kode css-nya melalui link berikut:
    Cara simpan kode html di New Blogger Interface

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




Posting » Setu Kliwon, Juni, 30, 2012

» Happy Blogging - gubhugreyot «

8 komentar:

  1. bisa ngga tuh di buat untuk beckground blog? tanks buat pelajarannya......
    mampir di blog ane bro...

    BalasHapus
  2. bermanfaat banget nih gan,makasih ya,.

    BalasHapus
  3. ijin nyoba gan,, maklum newbie..

    BalasHapus
  4. Wah, artikelnya bagus… jangan lupa visit balik disini

    BalasHapus
  5. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  6. Do you want to send and withdrawal XRP from your Binance account? If yes, you can approach the experts instantly and get instant solutions from the experts. The experts can be avail by dialing Binance support number [+1877-330-7540] which is functional round the clock without any halt. The experts not only fix your error but also provide spleen did and germane solutions so that you can easily memorize your issue on your own in near future.

    BalasHapus
  7. Permainan Sabung Ayam Online di Agen BOLAVITA , dengan minimal deposit hanya Rp 25.000 saja , dan minimal betting hanya Rp 10.000 saja sudah bisa mainkan permainan Sabung Ayam

    http://agensabungayam.logdown.com/post/7917623-cara-membuat-badan-ayam-bangkok-aduan-merah-semua

    Produk Kami Judi Sabung Ayam Online S128, SV388.

    https://www.sateayam.biz/
    https://m1.hj128.pw
    Daftar Sabung Ayam sv388
    Daftar Sabung Ayam Online S128

    Agen Sabung Ayam Online Bolavita Banyak Bonus dan Promo Mari Bergabung :

    Promo Sabung Ayam Terbaru 8x Win Beruntun.
    Bolavita Bisa Deposit Via OVO & GO-Pay.
    Sabung Ayam Deposit Via Pulsa XL & TSEL 25rb.

    Promo Promo BOLAVITA

    Telegram : +62812-2222-995
    Wechat : Bolavita
    WA : +62812-2222-995
    Line : cs_bolavita

    BalasHapus

 
GR | Edited by | gubhug reyot