Cara Membuat Animasi Over Light Pada Blog ala akaUTta'

Kali Ini saya akan mencoba memberikan tutorial 'Cara Membuat Animasi Over Light Pada Blog', karena ada slah satu teman blogger kita yang menanyakan kepada saya 'bagaimana membuat efek hover seperti diblog ini', oleh karena it tdk ada slahnya saya memberikan tutorialnya seperti apa. krena berbagi it indah kan???heheee,..

Baiklah untuk sobat2 yang masih penasaran dengan tutorial yang saya maksud, sobat bisa arahkan cursor pada bagian widget diblog ini, dan lht hasilnya seperti apa.!! over light dgn cahaya sperti kilat.hehee,..
saya tidak akan panjang lebar untuk tutorial ini, silahkan ikuti lagkah berikut jika diantra klian ingin mencobanya diblog sobat:

/* 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.

Mungkin cukup sekian  Cara Membuat Animasi Over Light Pada Blog ala akaUTta'. jika ada yang perlu ditanyakan silahkan tinggalkan komentar sobat dikolom yang tersedia. mksih slmat berkreasi. :D
Please rate this article: