(Bergerak) Cara Merubah Warna Header Dengan Gradiant/Gradasi Bergerak

Merubah Warna Gradasi Bergerak Di Header Blog || Nah pada awalnya saya terinspirasi dengan blog milik mbak arlina yang memiliki header yang gradient, tapi berjalan, lantas saya langsung mencarinya solusinya, dan hasilnya seperti di header wonkdesain.com yang memiliki header bergerak seperti lampu, jadi seneng yang lihat, semoga aja anda juga senang melihatnya.

Cara Merubah Warna Gradiant Bergerak Di Header Blog

Nah lebih tepatnya saya hanya akan memberikan sebuah tutorial ini hanya untuk template viomagz, tapi apa salahnya di coba di blog anda yang memiliki kemiripan dengan viomagz karya dari mas sugeng, Untuk yang tidak tahu template viomagz ,  contohnya wonkdesain.com ini.

Pemasangan CSS

Pertama Anda Harus Masuk ke blogger.
Setelah itu piliah Menu Tema dan Pergi ke Edit HTML (layaknya seperti mengedit HTML).
Cari Kode  ]]></b:skin> 
Copy Kode di bawah ini, di atas ]]></b:skin>

.unlimodPelangi {
    background: linear-gradient(45deg, #f22613, #f89406, #26a65b, #5868ec, #f54e80, #f7ca18, #d2527f);
    background-size: 500% 500%;
    -webkit-animation: unlimodGradient 12s ease infinite;
    -moz-animation: unlimodGradient 12s ease infinite;
    animation: unlimodGradient 12s ease infinite;
}
@-webkit-keyframes unlimodGradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes unlimodGradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes unlimodGradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

Penerapan di header blog

Cari kode ini:

<div id='header-container' >  

Rubah menjadi seperti di bawah ini:

<div id='header-container' class='unlimodPelangi' > 

Agar CSS bisa berjalan dengan lancar maka kalian harus menghapus perintah CSS Header bawaan viomagz, supaya tidak bentrok.

hapus kode berwarna merah di bawah ini:

#header-container {

background: $(header.background.kiri);
background: linear-gradient(to right, $(header.background.kiri), (header.background.kanan));

position: absolute;

top: 0;

left: 0;

right: 0;

width: 100%;

z-index: 999;

height: 48px;

Akan menjadi :

#header-container {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 999;
height: 48px;

jangan lupa klik simpan, silahkan lihat hasilnya.

Pengaturan warna gradasi

Jika kalian merasa kurang puas dengan warna di atas silahkan hapus atau ganti kode yang berwarna merah di bawah ini:

.unlimodPelangi {

    background: linear-gradient (45deg, #f22613, #f89406, #26a65b, #5868ec, #f54e80, #f7ca18, #d2527f);

    background-size: 500% 500%;

    -webkit-animation: unlimodGradient 12s ease infinite;

    -moz-animation: unlimodGradient 12s ease infinite;

    animation: unlimodGradient 12s ease infinite;

}

jika kalian merasa variasi warna yang ada di header terlalu banyak, tinggal hapus salah satu  kode warna, dan ketika kalian merasa warna di atas masih kurang maka tinggal tambah.

untuk contoh dari cara ini, silahkan cek tombol langganan pada blog ini, atau footer blog ini.

Selamat mencoba dan rasakan sensasi header seperti wonkdesian.com Jik ada yang perlu ditanyakan bisa tulis di kolom komentar.