Traffic Visitor
10 Mar 2013
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
Langganan:
Posting Komentar
(Atom)
0 komentar:
Posting Komentar
anda sopan ,kami segan, Thank's for u coment