√Membuat Navbar Berwarna Animasi Gradient Blogger

Pada kesempatan kali ini, genara code akan berbagi informasi tentang bagaimana caranya membuat navbar atau navigation di blog menjadi berwarna atau bisa dibilang animation gradient.

Sebenarnya ini hanyalah sedikit memper cantik atau memberi perbedaan pada blog Anda yang nantinya pengunjung selain membaca artikel pada blog anda, ia bisa merasakan perbedaan.

Disini genara code hanya bisa berbagi saja, jika anda tertarik seperti tampilan navbar pada blog genara code ini. Atau anda bisa lihat contohnya dibawah ini:

DEMO

Bagaimana? Apakah anda tertarik untuk memasangnya di blog anda? Jika anda tertarik, maka lanjutkan membaca Tutorial disini yah... he he he

Baiklah, jika template pada blog anda menggunakan template LinkMagz atau VioMagz yang versi terbaru dari Mas Sugeng, maka langkah untuk memasang animation navigation ini sangatlah mudah .

Cukup anda login ke akun blogger anda, kemudian pada sidebar kiri pilih atau klik Tata Letak. Setelah itu klik CUSTOM CSS, lalu copy code CSS dibawah ini dan tempelkan pada isi konten, kemudian Simpan. Lihat contoh pada gambar dibawah ini:

tempelkan KODE CSS dibawah ini pada no 3:


<style type="text/css">
#genaracode {margin:5px auto;text-align:center;} a.gen-co {display:inline-block;position:relative;font-family:'Open Sans',sans-serif;text-decoration:none;font-weight:700;background:#f24a4a;background:linear-gradient(-50deg,#ee5952,#ea3a7e,#20aadb,#23e0b3);background-size:320% 200%;animation:Gradient 15s ease infinite;letter-spacing:.5px;padding:10px 100px;margin:10px;color:#fff;box-shadow:inset 0 0 0 #202d3a;font-size:16px;text-transform:uppercase;border-radius:3px;transition:all 0.3s ease-out;} @keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}
</style>

Jangan lupa Simpan dan lihat hasilnya.

Bagaimana hasilnya? Cukup mudah kan pemasanganya kalo anda menggunakan template blogger terbaik viomagz atau linkmagz.

Khusus bagi anda yang menggunakan template selain dari yang disebutkan diatas, anda bisa mengikuti tutorial pada postingan selanjutnya Cara memasang warna animation gradient pada navbar di blogger.

Semoga bisa bermanfaat.