Membuat Efek Link Hover Pelangi

Efek link hover pelangi adalah salah satu cara untuk membuat penampilan blog lebih menarik. Yaitu apabila mouse di arahkan ke sebuah link akan menghasilkan efek warna pelangi secara bergantian.

Pada artikel sebelumnya saya pernah membahas cara membuat efek link blog berwarna, yaitu sebuah efek link hover yang apabila mouse di arahkan akan mengahasilkan efek warna-warni pelangi seperti kembang api.

Kali ini saya akan kembali membahas tentang cara membuat efek link hover pelangi namun dengan efek yang berbeda, yaitu efek link yang apabila mouse di arahkan akan menghasilkan efek warna-warni secara bergantian (tidak seperti kembang api).

Saya akan menggunakan kode CSS3 animation yang menurut para blogger senior memiliki banyak kelebihan di antaranya memudahkan para blogger (khususnya pemula) untuk mengganti variasi warna sesuai keinginan, kode lebih ringkas sehingga tidak terlalu berpengaruh pada loading blog, dan yang terpenting adalah semua browser telah support terhadap CSS3 animation.

Nah berikut cara-cara yang bisa sobat ikuti untuk membuat efek link hover pelangi pada blog :

1. Login ke akun blogger sobat
2. Masuk ke pengaturan Template
3. Klik Edit HTML
4. Cari kode ]]></b:skin> (gunakan Ctrl+F untuk mempercepat pencarian)
5. Letakkan kode berikut tepat di atas kode ]]></b:skin>

@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{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 */ }

     6.  Lihat secara Pratinjau, jika tidak ada kesalahan silahkan sobat Save Template

Warna pada kode di atas bisa sobat sesuaikan dengan keinginan dan selera.