Live Demo desain ini dapat lihat dengan klik link demo di bawah ini.
DEMODemo yang tentu saja terlihat mengagumkan sehingga untuk menambahkan latar belakang animasi ini ke blog ikuti langkah-langkah di bawah ini.
Menghapus Kode Yang Ada
Pertama-tama anda harus menghapus kode latar belakang yang ada untuk menghindari konflik di antara keduanya dan meminimalkan kode yang berlebihan. Untuk ini cari kode body pada kode CSS dalam template blog. Hapus kode di bawah kode body yang menyangkut dengan kode background. Ingat ! Jangan sampai salah hapus.
Menambahkan Kode Animasi
Sekarang anda harus menambahkan kode animasi di template blog. Untuk ini paste kode di bawah ini dan letakkan tepat di atas ]]></b:skin> <
body {Sumber Kode : Imman Vel
animation: colorBackground 20s infinite; /* Chrome, Firefox 16+, IE 10+, Opera 12.10+ */
-webkit-animation: colorBackground 20s infinite; /* Chrome, Safari 5+ */
-moz-animation: colorBackground 20s infinite; /* Firefox 5-15 */
-o-animation: colorBackground 20s infinite; /* Opera 12.00 */
}
@keyframes colorBackground {
0% { background-color: #fbcf61; color: #fbcf61; }
20% { background-color: #6bd57e; color: #6bd57e; }
40% { background-color: #ff6f6f; color: #ff6f6f; }
60% { background-color: #57cff4; color: #57cff4; }
80% { background-color: #0ed4c8; color: #0ed4c8; }
100% { background-color: #fbcf61; color: #fbcf61; }
}
@-webkit-keyframes colorBackground {
0% { background-color: #fbcf61; color: #fbcf61; }
20% { background-color: #6bd57e; color: #6bd57e; }
40% { background-color: #ff6f6f; color: #ff6f6f; }
60% { background-color: #57cff4; color: #57cff4; }
80% { background-color: #0ed4c8; color: #0ed4c8; }
100% { background-color: #fbcf61; color: #fbcf61; }
}
@-moz-keyframes colorBackground {
0% { background-color: #fbcf61; color: #fbcf61; }
20% { background-color: #6bd57e; color: #6bd57e; }
40% { background-color: #ff6f6f; color: #ff6f6f; }
60% { background-color: #57cff4; color: #57cff4; }
80% { background-color: #0ed4c8; color: #0ed4c8; }
100% { background-color: #fbcf61; color: #fbcf61; }
}
@-o-keyframes colorBackground {
0% { background-color: #fbcf61; color: #fbcf61; }
20% { background-color: #6bd57e; color: #6bd57e; }
40% { background-color: #ff6f6f; color: #ff6f6f; }
60% { background-color: #57cff4; color: #57cff4; }
80% { background-color: #0ed4c8; color: #0ed4c8; }
100% { background-color: #fbcf61; color: #fbcf61; }
}
Setelah menambahkan kode tersebut, simpan template anda dan selesai. Sekarang anda dan pengunjung blog anda dapat melihat animasi keren pada blog anda.
Semoga Bermanfaat.
3 comments
terima kasih atas tutorialnya.. sangat membantu sekali sekali untuk para blogger newbie..
Replykayaknya bikin tambah berat blog gan :D
ReplyTerimakasih atas informasinya min, sangat bermanfaat!
ReplyJangan lupa kunjungi website kampusku yukk walisongo.ac.id
Post a Comment