Cara Membuat Warna Berjalan (Warna Gradient) Pada Header Blog dengan Mudah

Cara Membuat Warna Berjalan (Warna Gradient) Pada Header Blog dengan Mudah

Seperti yang kalian pada blog saya ini terlihat pada posisi headernya ada sebuah warna-warna berjalan yang biasa disebut dengan warna gradient, biasa tampilan seperti ini diterapkan baik platform blog, wordpress, dll.

Kali ini admin akan berbagi sedikit tips Cara Membuat Warna Berjalan (Warna Gradient) Pada Header Blog dengan Mudah yaitu tinggal copy dan paste kode dibawah ini.

Berikut tutorialnya efek warna gradient bergerak:

1# buka Dashboard pada blog sobat,
2# setelah itu silahkan pilih thema, dan silahkan > Edit HTML
3# lalu cari kode </head> tempel kode berikut tepat diatasnya.

<!-- Navigasi Header Animasi Berubah warna Start -->
<style>#header-container, #back-to-top{background:
linear-gradient(-45deg, #041a06, #0a6e17, #c41606, #0fbd71, #94bd0f, #bd9a0f);background-size: 400% 400%;-webkit-animation:
Gradient 12s ease infinite;-moz-animation: Gradient 12s ease infinite;animation:
Gradient 12s 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>
<!-- Navigasi Header Animasi Berubah warna End -->

4# Silahkan Simpan Template sobat, dan lihat hasilnya

catatan: untuk merubah kecepatan / speed warna bisa kalian ganti angka 12s tersebut semakin kecil angkanya maka semakin cepat speednya

Demikian tutorial dari admin, semoga bermanfaat dan selamat mencoba. Terimakasih