Background Blog Berganti Warna Secara Otomatis

Kelas Math - Mungkin Anda pernah berkunjung kesebuah blog dengan berubah-ubah warna backgroundnya, bagaimana kira-kira menurut Anda? Menarik bukan? Menggonta-ganti warna secara otomatis ini dapat dilakukan para pembaca blog lebih merasa nyaman dan tidak merasa jenuh ataupun bosan. Namun bagaimanakah cara membuatnya? Apakah susah? Tenang, disini akan saya bantu cara membuatnya. Mudah aja koq sebenarnya hanya butuh tambahan kode css sedikit saja.

Baiklah Trik kali ini akan membantu Anda dalam mengubah warna latar belakang secara otomatis. sehingga saya kasih aja judul tulisannya Background Blog Berganti Warna 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 membuat Background Blog Berganti Warna Secara Otomatis?

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 untuk mempermudah dalam mencarinya. Maka Anda akan langsung menemukan kode ]]> </ b: skin>. 
2. Copy kode berikut ini, dan pastekan tepat diatas kode ]]> </ b: skin> yang 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 disesuaikan saja. Dan untuk demo silahkan anda bisa melihatnya di blog ini. https://lab-myarcive.blogspot.com/2019/11/coba-posting-youtube-di-blog.html