Membuat Warna Gradient Pada Menu Navigasi Blogger dengan CSS

Cara Mudah Membuat Warna Gradasi Pada Menu Navigasi Blogger dengan CSS3

CSS adalah kependekan dari Cascading Style Sheet. CSS merupakan salah satu kode pemrograman yang bertujuan untuk menghias dan mengatur gaya tampilan/layout halaman web supaya lebih elegan dan menarik.CSS adalah sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996.

Dengan CSS, sebuah halaman website bisa dikostumisasi dengan mudah. Misalkan kita ingin mengubah warna background, kita bisa melakukannya dengan membuat css dan memanggil kode warna yang kita inginkan. 

Jika biasanya warna background atau menu navigasi pada sebuah website hanya diwarnai dengan 1 warna, bagaimana dengan warna gradasi. Apakah mungkin sebuah website bisa menggunakan kombinasi beberapa warna sebagai background dan atau menu navigasi? 

Dengan CSS3, tentunya hal tersebut sangat mungkin dilakukan. Seperti dalam contoh blog AMP blogger ini. Saya mengubah warna navigasi dengan gradasi menggunakan CSS3.

Ingin tahu caranya? Sangatlah mudah. Ikuti cara berikut ini.

1. Silahkan masuk ke menu Theme atau tema, lalu klik Edit HTML.

2. Copy kode 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 kode #menu-navigation dengan class navigasi anda. Caranya silahkan inspect element blog blogger anda.
  • Untuk kombinasi warna yang diinginkan, silahkan kreasikan sendiri. Cari kode warnanya dengan mengenik Color Picker di google. 

3. Paste kode diatas, dengan dan tempelkan di atas kode amp-custom untuk blog AMp. Dan untuk blog non-amp, anda paste kode tersebut diatas kode ]]>/b:skin>.

4. Lalu klik Save.

Sangat mudahkan? Yuk silahkan dicoba. Oh ya, bukan hanya untuk navigasi ya. Anda juga bisa mengatur kode tersebut dengan class lainnya, seperti background website maupun footer.

Comments

Post a Comment