Cara Membuat Gradient Color Bergerak Di Header Blog

Berikut ini cara membuat gradient color bergerak pada header blog secara mudah dan simple dengan tambahan CSS Style gradient.

Cara Membuat Gradient Color Di Blog

Pada kesempatan kali ini saya akan membagikan tentang cara membuat gradient color di header blog sobat, pada umumnya warna gradiasi pada header blog memanglah sangat menarik bagi sebagian pengunjung. tentu memperindah tampilan blog dengan gradient akan menjadikan sebuah blog terlihat indah dan menawan.

Nah untuk itu disini kita akan mencoba membuat warna gradient pada header blog untuk memperindah tampilan blog, simak berikut dibawah ini :

Cara Membuat Warna Gradient Color Bergerak Di Blogger

1. Buka Dashboard Blogger -> Tema -> Edit HTML

2. Cari Kode CSS kalian untuk mengatur tampilan pada Header Blog, pada umumnya seperti kode berikut ini :

  • #header{backround:..........
  • .header{backround:..........
  • .top{backround:.....
Setiap kode css setiap template pada umumnya berbeda-beda, maka alangkah baiknya kamu cari sesuai tajuk css yang mengatur mengenai Header.

3. Setelah css header telah ketemu, lalu ubah kode isi {backround:..........} menjadi sebagai berikut di bawah ini :
linear-gradient(to right) 
Contoh seperti berikut ini : 
  • #header{backround:linear-gradient(to right)}
4. Tambahkan kode Css style berikut ini tepat diatas kode </head>
<style>#header-top{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>
5. Ganti kode yang saya garis merahkan tersebut #header-top , menjadi kode tajuk header kalian.

6. Pratinjau Atau Simpan template agan.