Cara Membuat Menu Horizontal dengan Gradasi Warna Merah Hitam

Menambah koleksi menu tutorial, saya akan memberikan tutorial membuat menu horizontal sebagai navigasi menu, menu label horizontal kali ini di dominasi dengan warna gradasi merah hitam. Untuk anda yang ingin membuat menu navigasi horizontal, silahkan ikuti tutorial yang saya berikan kali ini.

Cara membuat menu horizontal

Untuk demo dari menu horizontal yang saya maksud, silahkan anda kunjungi demo menu horizontal di black csstyle

Untuk tutorial pemasangannya, terlebih dahulu kita akan menempatkan kode HTML pada widget blog anda, silahkan ikuti petunjuk gambar berikut:

1.

2.

3.

Kemudian anda pastekan kode berikut pada jendela konfigurasi HTML/Javascript :

<ul id="tsa-extrapedas">
<li><a href="alamat blog anda">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>

Silahkan anda rubah tulisan yang saya beri warna merah di atas dengan alamat tautan dan anchor text yang ingin anda buat.

Menambahkan CSS

Selanjutnya kita akan menambahkan CSS pada menu navigasi yang telah kita buat, silahkan ikuti tutorial gambar berikut :

1.<

2.

Pastekan kode CSS berikut di jendela sebelah kanan

#tsa-extrapedas {width: 850px; height: 70px; border-left:2px solid black;border-right:2px solid black;border-top:4px solid black;padding: 0 auto; margin: 0 auto;background-color:#4d3131;filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#000103', endColorstr='#4d3131');background-image:-webkit-linear-gradient(top, #000103 0%, #fa0000 50%, #4d3131 100%);background-image:-moz-linear-gradient(top, #000103 0%, #fa0000 50%, #4d3131 100%);background-image:-ms-linear-gradient(top, #000103 0%, #fa0000 50%, #4d3131 100%);background-image:-o-linear-gradient(top, #000103 0%, #fa0000 50%, #4d3131 100%);background-image:linear-gradient(top, #000103 0%, #fa0000 50%, #4d3131 100%);}
#tsa-extrapedas li {list-style: none; float: left; margin: 0 11px;}
#tsa-extrapedas li:first-child {margin-left: 10px;}
#tsa-extrapedas li a {display: block; width: 100px; height: 40px; padding:4px;margin:auto;background-color:#cc1d1d;filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#d2def5', endColorstr='#cc1d1d');background-image:-webkit-linear-gradient(top, #d2def5 0%, #704141 50%, #cc1d1d 100%);
background-image:-moz-linear-gradient(top, #d2def5 0%, #704141 50%, #cc1d1d 100%);
background-image:-ms-linear-gradient(top, #d2def5 0%, #704141 50%, #cc1d1d 100%);
background-image:-o-linear-gradient(top, #d2def5 0%, #704141 50%, #cc1d1d 100%);
background-image:linear-gradient(top, #d2def5 0%, #704141 50%, #cc1d1d 100%);
font: bold 17px Helvetica, Arial, Sans-serif;text-align:center; color:red; text-decoration: none;border-bottom:#a41a1a;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;}
#tsa-extrapedas li a:hover,#menu li a:focus,#tsa-extrapedas li a:active{font:bold 24px Helvetica, Arial, Sans-serif;color:#dcdcdc;background:transparent;border-bottom:2px solid red}

kemudian klik tombol terapkan ke blog.
Lihat hasilnya pada homepage blog anda, jika anda suka dengan tutorial cara membuat menu navigasi horizontal yang saya berikan kali ini, silahkan bantu blog saya ini dengan tombol share yang terletak di bawah posting kali ini, dan jangan lupa berkomentar.
Semoga bermanfaat

Artikel Cara Membuat Menu Horizontal dengan Gradasi Warna Merah Hitam ini 100% bukan hasil copy paste
Dibaca oleh12606 pembaca dari 12727 pengunjung.
Ditulis Oleh Unknown
Semua artikel terproteksi DMCA.
Hanya script dan kode tutorial yang boleh di copy paste, dengan menyertakan sumbernya.
Artikel The Art of SEO lainnya bisa anda temukan pada menu related post berikut ;