Membuat Animasi Gradien Warna Background Blogger dengan CSS

Warna merupakan elemen yang memberi kesan terhadap suasana atau suatu benda, tak heran biasa dalam dekorasi selalu terutama adalah komposisi warna yang selalu ikut setelah penataan benda-benda dalam suatu tempat. Tak terkecuali dalam mendekorasi atau menghiasi sebuah laman web/blog perlu juga kombinasi warna yang cocok, terlepas dari SEO dan fast loading dan segala macam optimisasi laman, elemen warna tentu perlu juga diperhatikan. Untuk blog bacaan, entah itu bacaan berita, tutor, atau sebagainya, umumnya menggunakan warna dasar putih dengan berbagai bentuk kode hex dan bebrapa aksen warna merah atau biru, kuning, oranye, dan sebagainya untuk memberi kesan khas.

Nah, kali ini saya akan membagikan cara merubah aksen-aksen warna yang memperindah tampilan laman kamu agar tidak terkesan monoton menjadi lebih bervariasi lagi, yaitu dengan warna gradien yang aktif bergerak atau animasi dengan menggunakan CSS. Sehingga warna gradien dapat dirubah-rubah kombinasinya sesuka hati menyesuaikan selera masing-masing. Untuk cara merubahnya adalah sebagai berikut.

1. Masuk ke halaman edit HTML template kamu, atau bisa dengan menggunakan aplikasi editor template lain agar pengeditan lebih nyaman.
2. Letakan kode CSS gradien animasi berikut di antara
   <b:skin>
   …
   </b:skin>

   /* Gradient */
   {background: linear-gradient(-45deg, #00C46F, #3CE790, #0BA9F4, #23D5AB);background-size: 400% 400%;-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%}}

3. Cari elemen yang akan dirubah warnanya dengan mengunjungi lamanmu dan lakukan inspect element seperti gambar di bawah ini, atau jika sudah tahu nama elemennya bisa di skip saja.

4. Kemudian bisa ketik kode CSS elemen yang dimaksud dengan diawali titik (.) atau pagar (#) (tapi tidak selalu sih, contohnya Pre dan Blockquote), pengetikan kode CSS elemen tepat di depan kode CSS Gradien yang tadi dimasukan di atas sehingga, misal pada blog saya akan terlihat seperti ini.

5. Jika akan menambahkan lebih dari 1 bagian/elemen yang akan dirubah warnanya, maka pisahkan dengan tanda koma (,)
6. Jika sudah silahkan di preview atau bisa langsung save.

Jika ingin merubah kombinasi warna bisa ganti kode hex warna berikut.

• #00C46F
• #3CE790
• #0BA9F4
• #23D5AB

dengan kode hex warna yang diinginkan, atau bisa juga menambahkannya menjadi lebih dari 4.

Demikian tulisan saya mengenai Membuat Gradien Warna Background Blogger dengan CSS, semoga bermanfaat dan bisa memperindah laman kamu, iya kamu hehehe. Terimakasih sudah berkunjung, apabila ada pertanyaan silahkan tulis di komentar, dengan senang hati insya Allah saya jawab. Kurang lebihnya mohon maaf.