(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.

Berlangganan update artikel terbaru via email:

2 Komentar untuk "(Bergerak) Cara Merubah Warna Header Dengan Gradiant/Gradasi Bergerak"

  1. langkah-langkahnya kurang jelas gan, mohon diperjelas lagi
    atau bisa disertai dengan SS

    BalasHapus
    Balasan
    1. terimakasih atas kritiknya, postingan di atas telah kami perbaiki, mohon maaf jika pada postingan yang dulu kurang jelas, postingan di atas meskipun tidak disertai ss full semoga bisa membuat anda puas

      Hapus

Berkomentar lah dengan baik

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel