Ini adalah salah satu menu vertical..
Hari ni su ajar korang bagaiman untuk membuat menu vertical.Macam biasalah mula-mula
1. Login ke blogger dan pilih "Layout-->Edit HTML"
2. Masukkan kod berikut
.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; /*WIDTH OF MAIN MENU ITEMS*/
border: 1px solid black;
}
.glossymenu li{
position: relative;
}
.glossymenu li a{
background: white url('http://azmas7377.googlepages.com/hijau1.gif') repeat-x bottom left;
font: bold 12px Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}
.glossymenu li ul{
position: absolute;
width: 190px;
left: 0;
top: 0;
display: none;
}
.glossymenu li ul li{
float: left;
}
.glossymenu li ul a{
width: 180px;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url('http://azmas7377.googlepages.com/hijau2.gif');
}
* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }
sebelum kod]]></b:skin>atau sebelum kod </style> .
3.Kemudian Save
4.Pergi ke page Elements
5.Klik Add Gadget dan pilih HTML
6.Masukkan kod dibawah
<ul id="verticalmenu" class="glossymenu">
<li><a href="/">Home</a></li>
<li><a href="http://galeriazmas.blogspot.com">Tutorial Blog</a></li>
<li><a href="http://pemborong-online2u.blogspot.com/">Pemborong Online</a></li>
<li><a href="http://azmasmedia.blogspot.com/">Lawak Jenaka</a></li>
</ul>
7.Kemudian Save dan letakkan ianya dimana kedudukan yang korang suka.
gantikan teks berwarana biru dgn teks dan url korang sendiri
5 Teman-teman yang sudi komen:
bagus codec ni, dah lama sy cari..
akhirnya jumpe kat sini Alhamdulillah..
Nikubes-->moga ilmu ini dapat dimanfaatkan :)
macam mne nak tuka kaler n style tulisan kat menu ni yer?~isrz`
nak tanye, mcm mane nak linkkan artikel bila kita klik kat menu tu.. puas saya cuba tp tak jadi-jadi... tolong la ek.. tq
syirah--->ikut sahaja step saya,pasti akan menjadi..tukarkan link2 yang saya taip dg link syirah sendiri
Post a Comment