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/
Posts
