Cara Membuat Warna Gradient Pada Menu Navigasi Blog

Menu navigasi pada blogger juga sangat penting bagi sebuah template blog,karena ini akan memudahkan pengunjung agar lebih mudah untuk mencari navigasi situs.
Terlebih jika ditambahkan warna pada menu navigasi tersebut, Ternyata membuat warna gradient / gradasi pada menu navigasi blog ini menjadi trending juga saat ini, sudah banyak sekarang yang menerapkan warna gradient ini, contoh sobat bisa lihat pada blog saya ini ,atau yang lain misal blog nya arlinadzgn.com

Warna ini akan lebih keren di banding warna html yang biasanya. Jika di warna html yang biasa hanya terdapat satu warna saja ,tetapi pada warna gradient ini terdapat dua warna atau lebih ,seperti kertas asturo atau pelangi. selain itu juga warna ini juga bisa bergerak juga
Pada artikel kali ini saya akan memberikan tutorial Cara membuat warna gradient pada menu navigasi blog dengan warna yang bisa bergerak / animasi.
Langsung saja simak tutorial di bawah ini

Cara Membuat Warna Gradient Pada Menu Navigasi Blog

Pertama pastikan sudah login ke akun blogger lalu menuju ke Tema->Edit html.

Kemudian cari class header templatesobat ,misal punya saya template simplify header nya adalah seperti dibawah ini

#header{background:#2c4584;display:block;margin:0 auto;padding:0;word-wrap:break-word;width:100%;position:fixed;z-index:99;height:60px;line-height:60px;-webkit-transform:translateZ(0);transform:translateZ(0)}

kemudian sobat tambahkan kode dibawah ini setelah #header

{background:#e83a3a;background:linear-gradient(-50deg,#189f43,#30ce4b,#17dbd6,#0663b8);background-size:320% 200%;animation:Gradient 15s ease infinite;
-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);display:block;margin:0 auto;
padding:0;word-wrap:break-word;width:100%;position:fixed;
z-index:99;height:50px;line-height:50px;-webkit-transform:translateZ(0);
transform:translateZ(0)}

lalu coba simpan dan lihat hasilnya.
Selanjutnya jika ingin warnanya bergerak / animasi maka tambahkan kode dibawah ini sebelum ]]></b:skin>

/* animasi gradient */
@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}

lalu simpan dan coba lihat hasilnya, jika sobat ingin mengganti warna gradientnya ganti kode warna html yang saya tandai warna hijau diatas.

Bagaimana mudah bukan, jika masih bingung sobat bisa tanyakan di kolom komentar dibawah. sekian tutorial tentang Cara Membuat Warna Gradient Pada Menu Navigasi Blog semoga bisa bermanfaat .

Bagikan Artikel ini