Cara Membuat Warna Gradasi pada Menu Navigasi Blogger

Cara Membuat Warna Gradasi pada Menu Navigasi Blogger - Akhir-akhir ini para blogger Indonesia diramaikan dengan pewarnaan gradasi pada pada Blog. Hal ini juga menjadi trend baru saat ini, tak sedikit juga blogger Indonesia mencoba serta mengaplikasikan pewarnaan gradasi pada situs mereka, bahkan Blogger terkenal seperti Adhi Suryadi (kompiajaib.com) dan Arlina Fitriyani (arlinadzgn.com) juga mengaplikasikan efek warna gradasi pada situs mereka.

Warna gradasi sendiri merupakan corak warna yang bisa dikembangkan/dipadukan dari dua atau lebih warna, sehingga membuat tingkatan warna tertentu dengan tidak merusak dan mengubah warna itu sendiri, dengan kata lain warna gradasi adalah perkembangan warna atau perubahan warna yang terjadi ketika dua warna atau lebih digabungkan.

Memang tampilan warna gradasi lebih terlihat bagus dibanding warna HTML yang biasa digunakan oleh para blogger, apalagi bila sobat pandai memilih paduan warnanya, tidak hanya itu sobat dapat menambahkan animasi pada warna gradasi. Keumuman blogger mengaplikasikan warna gradasi pada navigasi atau header blog, seperti Arlina Design atau Kompi ajaib. Dan saya sendiri menggunakan gradasi warna pada blog ini, dengan tambahan animasi.

Oleh karenanya pada kesempatan ini saya akan memberikan tutorial singkat Cara membuat warna gradasi pada menu navigasi blogger, berbeda pada gradasi warna yang dipakai keumuman blogger, saya akan menambahkan animasi perpindahan warnanya, seperti yang digunakan oleh Arlina Design. Saya sendiri terispirasi dari Arlina Design(www.arlinadzgn.com) yang menggunakan Gradasi warna dengan animasi.

Cara Membuat Warna Gradasi pada Menu Navigasi Blogger

Langkah Pertama
Masuk ke Blogger, lalu pilih Tema >> Edit HTML

Langkah Kedua
Kemudian tambahkan style berikut pada class menubar atau header blog, contohnya class menubar yaitu #main-wrap

#mainwrap{width:1010pxmargin:0 auto;}

Setelah ditambahkan seperti berikut

#mainwrap{width:1010pxmargin:0 auto;background:#f24a4a;background:linear-gradient(-50deg,#ee5952,#ea3a7e,#20aadb,#23e0b3);background-size:320% 200%;animation:Gradient 15s ease infinit;display:block;}

Langkah Ketiga
Selanjutnya, menambahkan css animasi supaya animasi gradsi warna berjalan, silahkan letakan kode berikut sebelun ]]></b:skin>

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

Langkah Keempat
Smpan Template, lihat hasilnya

Mudah bukan? Semoga tampilan blog sobat menjadi lebih menarik, selain itu dengan menggunakan warna gradasi pada blog, berarti sobat telah mengikuti trend blogger kekinian.

Baca Juga: Waktu yang Tepat Untuk Menulis di Blog

Nah demikian artikel mengenai tutorial Cara Membuat Warna Gradasi pada Menu Navigasi Blogger seperti pada blog Arlina Design, semoga dapat bermanfaat.

Bagikan Artikel ini