Merubah Warna Background Otomatis di Blog

info-gamepc.blogspot.com - Hari ini saya akan mengajarkan, bagaimana membuat perubahan warna latar belakang yang berbeda secara otomatis. Meskipun menggunakan gambar berukuran besar, kamu dapat menggunakan kode CSS dibawah ini.

Demo dapat dilihat dengan klik tombol di bawah.

Pertama-tama Anda harus menghapus kode latar belakang yang ada di template anda dulu untuk menghindari konflik di antara kode dan meminimalkan kode yang berlebihan.

Ayo Kita Praktekkan.

1. Seperti biasa buka blogger kamu.
2. Pilih Template -> Edit HTML.
3. Cari kode ]]></b:skin>, lalu pastekan kode dibawah ini, tepat diatas kode ]]></b:skin>.

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

4. Simpan template kamu, coba dibuka Blog kamu.. Jreng..!!!!!!!!!!!!