Membuat Warna Gradient Pada Hidangan Navigasi Blogger Dengan Css
Cara Praktis Membuat Warna Gradasi Pada Menu Navigasi Blogger dengan CSS3
CSS adalah kependekan dari Cascading Style Sheet. CSS merupakan salah satu isyarat pemrograman yang bertujuan untuk menghias dan mengatur gaya tampilan/layout halaman web biar lebih elegan dan menarik.CSS yaitu sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996.
Dengan CSS, sebuah halaman website dapat dikostumisasi dengan mudah. Misalkan kita ingin mengubah warna background, kita dapat melakukannya dengan menciptakan css dan memanggil isyarat warna yang kita inginkan.
Jika biasanya warna background atau sajian navigasi pada sebuah website hanya diwarnai dengan 1 warna, bagaimana dengan warna gradasi. Apakah mungkin sebuah website dapat memakai kombinasi beberapa warna sebagai background dan atau sajian navigasi?
Dengan CSS3, tentunya hal tersebut sangat mungkin dilakukan. Seperti dalam teladan blog AMP blogger ini. Saya mengubah warna navigasi dengan gradasi memakai CSS3.
Ingin tahu caranya? Sangatlah mudah. Ikuti cara berikut ini.
1. Silahkan masuk ke sajian Theme atau tema, kemudian klik Edit HTML.
2. Copy isyarat berikut ini.
#menu-navigation{background: #1d3c91; /* Old browsers */ background: -moz-linear-gradient(top, #1d3c91 44%, #2989d8 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #1d3c91 44%,#2989d8 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #1d3c91 44%,#2989d8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d3c91', endColorstr='#2989d8',GradientType=0 ); /* IE6-9 */ margin:0 auto 10px auto;padding:0;}Keterangan:
- Ubah isyarat #menu-navigation dengan class navigasi anda. Caranya silahkan inspect element blog blogger anda.
- Untuk kombinasi warna yang diinginkan, silahkan kreasikan sendiri. Cari isyarat warnanya dengan mengenik Color Picker di google.
3. Paste isyarat diatas, dengan dan tempelkan di atas isyarat amp-custom untuk blog AMp. Dan untuk blog non-amp, anda paste isyarat tersebut diatas kode ]]>/b:skin>.
4. Lalu klik Save.
Sangat mudahkan? Yuk silahkan dicoba. Oh ya, bukan hanya untuk navigasi ya. Anda juga dapat mengatur isyarat tersebut dengan class lainnya, ibarat background website maupun footer.
