Sebelumnya kita pernah membahas tentang membuat menu
horizontal, nha sekarang mari kita mencoba membuat menu vertikal. Menu vertikal
ini cocok kalau dipasang di sidebar karena bentuknya berjajar sevara vertikal
(ya iyalah). Contohnya seperti gambar disamping itu. Beginilah cara membuatnya
:
1. Login ke blogger trus pilih "Layout-->Edit
HTML"
2. Masukkan kode berikut sebelum kode ]]></b:skin> atau sebelum kode </style>
. Pokoknya ditaruh di dalam Barisan kode CSS deh.
.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://kendhin.890m.com/blog/vertical/blue1.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://kendhin.890m.com/blog/vertical/blue2.gif');
}
* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }
Untuk memilih warna menu, perhatikan kode2 yang berwarna
merah (blue1.gif dan blue2.gif). Ganti kode tersebut dengan pilihan warna
dibawah ini. Misal jika kamu ingin memilih menu warna merah maka kodenya
menjadi seperti ini :
.glossymenu li a{
background: white
url('http://kendhin.890m.com/blog/vertical/red1.gif')
repeat-x bottom left;
dan
.glossymenu li a:hover{
background-image: url('http://kendhin.890m.com/blog/vertical/red1.gif');
Pilihan Warna menu vertikal :
blue1.gif
blue2.giF
green1.gif
green2.gif
red1.gif
red2.gif
pink1.gif
pink2.gif
black1.gif
black2.gif
3. Kemudian di save.
4. Lalu pergi ke menu "Page Elements"
5. Pilih "Add a Gadget -->HTML/JavaScript"
kemudian masukkan kode berikut kedalamnya:
<ul id="verticalmenu"
class="glossymenu">
<li><a
href="/">Home</a></li>
<li><a href="http://trik-tips.blogspot.com">Trik Blog</a></li>
<li><a href="http://x-template.blogspot.com"
>Free
Template</a></li>
<li><a href="http://getebook.co.cc">Free Ebook</a></li>
</li>
</ul>
Kode yang berwarna merah adalah linknya dan yg warna biru
adalah teks yang ditampilkan. Kalau mau menambahkan menu tingal buat lagi kode
seperti yg berkedip2 dibawahnya.
SELESAII
0 Response to "Membuat Menu Vertikal"
Posting Komentar