Kali ini saya Fajri ingin Share Tentang
Cara Membuat Menu Horizontal dengan Gradasi Warna Merah Hitam. Langsung saja kita lihat Tutorial-Nya :)
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 dan
biru 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
