Membuat Effect Gradient Animation Navbar Blog

Hallo Sahabat, kali ini saya ingin Berbagi Trik Cara Membuat Navbar/Header Blog kalian Menjadi Gradient dan Berubah ubah Warna
Contohnya blog Ternama Arlina Design menggunakan Effect Tersebut pada Navbarnya,
Selain Begitu Indah ternyata CSS ini pun terhitung Ringan untuk Blog. oke langsung saja Tutorialnya disimak Seksama.

Disini saya akan mencontohkannya ke Template VioMagz, tapi kalian bisa juga Ke Template blog lain.

Tutorial

Pertama, login ke Blogger > Pilih Blog > Klik menu Tema dan klik tombol Edit HTML > Cari Kode #header-container Dan Ubah Kode Tersebut :

#header-container {
background: #ff7b30;
-webkit-box-shadow: 0 2px 6px 0 rgba(0,0,0,0.2);
box-shadow: 0 2px 6px 0 rgba(0,0,0,0.2);
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 999;
}

Menjadi :

#header-container {
background: #ff7b30;
background: linear-gradient(317deg, #ff9400, #ff0000, #ac37d7, #3d85ff);
background-size: 800% 800%;
-webkit-box-shadow: 0 2px 6px 0 rgba(0,0,0,0.2);
box-shadow: 0 2px 6px 0 rgba(0,0,0,0.2);
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 999;
-webkit-animation: Al-Muhammad-Gradient 3s ease infinite;
animation: Al-Muhammad-Gradient 3s ease infinite;
}
@-webkit-keyframes Al-Muhammad-Gradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 51%}
    100%{background-position:0% 50%}
}
@keyframes Al-Muhammad-Gradient { 
    0%{background-position:0% 50%}
    50%{background-position:100% 51%}
    100%{background-position:0% 50%}
}

Selesai dan Simpan Template.

Beginilah Contoh Warnanya

Pengaturan

Kode	Fungsi
#ff9400, #ff0000, #ac37d7, #3d85ff	Kode Warna Yang akan Disatukan, Warna Warna itu Nantinya akan Disatukan Menjadi Gradient Animation
3s ease infinite	3s Berfungsi Mengatur Kecepatan Dalam hitungan Second, kalian bisa rubah Menjadi 5s / berapapun yang kalian suka
317deg	Berfungsi Mengatur Rotasi Gradient Tersebut, Bisa kalian rubah 1-360 Derajat

Jika ada yang kesulitan dalam Penerapan kode atau kurang mengerti bisa komen dibawah ini ya sahabat,
Selamat Mencoba.

Share this post