Animasi warna gradient akan membuat tampilan blogmu terlihat lebih colorfull, perpaduan warna yang ditampilkan tidak akan membuat pembaca bosan untuk melihatnya.
Kamu juga dapat menerapkannya di manapun di dalam blog, dari header sampai footer sesuai keperluan dan selera. Untuk cara pemasangannya silahkan ikuti langkah dibawah ini.
Buka Blogger - pilih menu Tema lalu klik Edit HTML. Selanjutnya letakan kode berikut ini di dalam kode class pilihan (class dimana kamu ingin meletakan animasi warna gradient)
background:linear-gradient(to right)
Kode yang ditandai merah untuk menentukan arah gerak animasi
Misalnya saya ingin meletakannya pada class .header-top-menu maka akan menjadi seperti berikut
.header-top-menu{background:linear-gradient(to right);display:block;height:52px;line-height:52px}
Selanjutnya salin dan letakan kode berikut tepat sebelum </head>
<style type='text/css'>
.header-top-menu{background:linear-gradient(-50deg,#ee5952,#ea3a7e,#20aadb,#23e0b3);background-size:320% 200%;-webkit-animation:Gradient 15s ease infinite;-moz-animation:Gradient 15s ease infinite;animation:Gradient 15s ease infinite}@-webkit-keyframes
Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@-moz-keyframes
Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@keyframes
Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}
</style>Ganti kode yang ditandai merah dengan kode class pilihan. Kode yang ditandai biru dapat diubah untuk membuat komposisi warna yang sesuai selera
Setelah itu klik simpan dan lihat hasilnya. Sebagai contoh blog ini sendiri sudah menggunakan animasi warna gradient pada menu navigasi halaman dan sidebar.
