Bagaimana Membuat Background Blog Berganti Warna Secara Otomatis?

Berganti warna secara otomatis

Kalau Anda perhatikan, background pada blog saya ini terlihat selalu bergonta-ganti warna secara otomatis. Menggonta-ganti warna secara otomatis ini saya lakukan agar Anda dan para pembaca blog ini merasa nyaman dan tidak merasa jenuh ataupun bosan mengingat template blog yang saya gunakan merupakan template yang sangat sederhana.

Trik ini akan membantu Anda dalam mengubah warna latar belakang secara otomatis.

Memberikan tampilan segar untuk pengunjung blog Anda setiap kali mereka mengunjunginya dengan menunjukkan warna latar belakang yang keren agar mereka tidak cepat bosan. 

Apakah Berpengaruh pada Kecepatan blog?

Tidak. Karena Cara yang saya pakai untuk membuat warna background blog ini berubah secara otomatis tidak menggunakan Scripts ataupun kode yang memberatkan loading blog. Cara yang saya gunakan hanya menggunakan css yang tentunya tidak akan menjadikan loading blog Anda menjadi lambat.

Trik ini tidak akan mempengaruhi kecepatan halaman blog Anda. Itu hanya menambahkan kode warna setiap kali pengunjung menyegarkan blog Anda dan warna yang dipilih secara acak sebagai warna latar belakang.

Bagaimana cara membuatnya?

Caranya cukup mudah. Namun, Anda terlebih dahulu harus login ke akun blogger anda dan buka edit html template Anda. Jika sudah berada di halaman edit template,

1. Cari kode ]]> </ b: skin>. Gunakan saja ctrl + F secara bersamaan pada area edit html. maka pastekan  kode ]]> </ b: skin> kemudian enter. Maka Anda akan langsung menemukan kode ]]> </ b: skin>. 
2. Copy kode berikut ini, dan pastekan tepat diatas kode ]]> </ b: skin> tadi.

body {
 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; }
 }

3. Selanjutnya save template Anda, dan lihat hasilnya.

Pada kode diatas, warna tulisan akan sama dengan warna background. Jika Anda tidak menginginkannya, setiap tulisan color: #kodewarna; diakhir setiap baris kode, Silahkan dihapus saja. Seperti pada blog ini saya juga menghapusnya, karena menurut saya jika tulisannya ikut berubah, maka akan sedikit mengganggu pandangan.