Cara membuat Background Blog berubah-ubah Warna dengan Keyframe

HaiSob apa kabar? Berikut ini saya akan membagikan tutorial bagaimana cara membuat animasi background berubah-ubah warnaBackground blog yang berubah-ubah bisa menarik perhatian pengunjung, tentunya bisa digunakan untuk menunjang tampilan blog jika digunakan pada blog yang tepat dan dengan penggunaan / penempatan animasi yang menarik.

Untuk membuatnya kita akan menggunakan CSS @ keyframe, jika kamu tertarik dengan animasi keyframe coba cek juga artikel tentang membuat animasi loading blog dengan keyframe. Nah, berikut ini adalah cara membuat background blog berubah-ubah warna dengan waktu yang di tentukan menggunakan animasi CSS keyframe.

Background berubah-ubah Warna


Background berubah-ubah Warna
Background berubah-ubah Warna


Baca juga artikel sebelumnya yang juga membahas bagaimana cara membuat background blog tidak bergerak / menempel ketika halaman di scroll.



Cara membuat background berubah-ubah warna di Blogger


1. Di Blog Blogger 😊
2. Pilih menu Template ➔ Edit HTML
Cara membuat Background Blog berubah-ubah Warna dengan Keyframe
Template ➜ Edit HTML

3. Letakan kode dibawah ini di atas kode ]]></b:skin> atau di atas </style>
@-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; }
}
Kode sesudah background-color adalah kode warna, jika kamu ingin mengganti warna-warna dengan warna yang kamu inginkan coba pilih warnamu di generator warna .

4. Letakan kode di bawah ini di atas kode </body> dan save Template
<style>
body{
  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;
 }
 </style>
Kode berwarna biru adalah kode yang di tambahkan pada body untuk membuatnya berganti-ganti warna dan kamu juga dapat menerpakannya pada bagian lain di blog.

Disitu juga terlihat bahwa animasi akan dilakukan selama 5 detik dengan membuat perubahan background dalam 5 tahap dan akan diulang terus dengan perintah infinite.

Sekian cara membuat background blog berubah-ubah warna. Selamat mencoba.