Bikin Icon Sosmed CMS Sekolahku Mu Jadi Blink Blink

Assalamualaikum Warohmatullah

setelah sekian lama ga nyentuh blog, akhirnya ada waktu buat nulis lagi sob

untuk kali ini saya akan coba bagikan tips untuk bikin ikon sosial media di CMS Sekolahku jadi berubah ubah warnanya.

sebelum dilanjut ke tutorialnya, saya kasih info dikit ya sob

CMS Sekolahku adalah salah satu CMS keren yang di peruntukan untuk dunia pendidikan, khususnya web profil sekolah/Universitas sob, CMS sekolahku ini dibuat oleh mas Anton Sopyan,.

untuk yang belum tau langsung aja klik link ii sob CMS SEKOLAHKU.

sampai sekarang CMS ini sudah di versi 2 loh.

dah dulu ya info CMS Sekolahkunya

Sekarang masuk ke Tutorial sesuai judul.

Warna Ikon Sosmed sebelum di bikin blink blink

kila lakukan Perubahan pada Scriptnya
1. masuk ke View/themes/pilih tema yang diinginkan/css/style.css
2. cari kode .social-circle li a


Kode awal sebelum diubah

.social-circle li a {
background-color: #f44336;
display:inline-block;
position:relative;
margin:0 auto 0 auto;
-moz-border-radius:50%;
-webkit-border-radius:50%;
border-radius:50%;
text-align:center;
width: 40px;
height: 40px;
font-size:18px;
}


Ubah menjadi
.social-circle li a {
display:inline-block;
position:relative;
margin:0 auto 0 auto;
-moz-border-radius:50%;
-webkit-border-radius:50%;
border-radius:50%;
text-align:center;
width: 40px;
height: 40px;
font-size:18px;
background-color: #f1c40f;
-webkit-animation: color 5s ease-in  0s infinite alternate running;
-moz-animation: color 5s linear  0s infinite alternate running;
animation: color 5s linear  0s infinite alternate running;
}

/* Animasi + Prefix untuk browser */
@-webkit-keyframes color {
    0% { background-color: #f1c40f; }
    32% { background-color: #e74c3c; }
    55% { background-color: #9b59b6; }
    76% { background-color: #16a085; }
    100% { background-color: #2ecc71; }
}
@-moz-keyframes color {
     0% { background-color: #f1c40f; }
    32% { background-color: #e74c3c; }
    55% { background-color: #9b59b6; }
    76% { background-color: #16a085; }
    100% { background-color: #2ecc71; }
}
@keyframes color {
  0% { background-color: #f1c40f; }
    32% { background-color: #e74c3c; }
    55% { background-color: #9b59b6; }
    76% { background-color: #16a085; }
    100% { background-color: #2ecc71; }
}


Hasil dari kode tersebut adalah akan membuat ikon sosmed anda berubah warna tiap 5 detik, dah hasil dari script diatas nanti seperti dibawah ini sob

Kode merubah warna ini saya dapet dari

http://www.tutorial-webdesign.com/membuat-animasi-backround-website-barubah-ubah-warna/