Hover Link Warna Pelangi - Rainbow Color Effect with 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.

View Demo:

Journey Of Destiny ----> We learn together to increase knowledge we share knowledge and strengthen the friendship

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).

Code CSS:

@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) yang terdapat di kode css.
2. Jika menghendaki data warna, sampeyan bisa melihat tabel lengkap data setiap warna berikut namanya dengan klik di sini

Semoga berhasil ya........