Cara Membuat Animasi Over Light Pada Blog

Posted by SonyGumilar on 3/17/2014 in Blogger | Comments : 0

Seperti biasa terlebih dahulu :
1. Login blogger.
2. Rancangan, Edit Html, Cari kode ]]></b:skin>
3. Dan Letakkan kode berikut diatasnya : 

/* Animasi Over Light aka */

@keyframes "hover" {

0% {background:#ffffff;}

100% {background:#111111;color:#000;}}

@-moz-keyframes hover {

0% {background:#ffffff;}

100% {background:#111111;color:#000;}}

@-webkit-keyframes "hover" {

0% {background:#ffffff;}

100% {background:#111111;color:#000;}}

@-ms-keyframes "hover" {

0% {background:#ffffff;}

100% {background:#111111;color:#000;}}

@-o-keyframes "hover" {

0% {background:#ffffff;}

100% {background:#111111;color:#000;}}

#subscribe:hover, #blog-pager-newer-link:hover, #blog-pager-older-link:hover, .comments:hover, .cm_entry p:hover, .comment-body-author:hover, .comment-form:hover, .sidebar .widget-content:hover, .tabdiv .widget:hover, .creditutta:hover, .post-body:hover, #searchform input[type="text"]:hover {

-webkit-animation: hover 0.2s 100ms;

-moz-animation: hover 0.2s 100ms;

-ms-animation: hover 0.2s 100ms;

animation: hover 0.2s 100ms;}

-Kode warna MERAH adalah warna pada saat hover, Anda bisa ganti dan sesuaikan dengan keinginan sobat.

- Kode warna KUNING adlah warna teks pada saat hover terjadi.

- Sedangkan warna HIJAU adlah kode css yang akan kita berikan efek animasi over light.

4. Langkah terakhir save template. dan lihat hasilnya

Cukup sekian smoga Berguna ,,