Cara Membuat Menu Vertikal

Diposkan oleh Superbayyek di 09.01 | Senin, 21 September 2009 | 9 komentar Label: Blogger Tips, Tips Blog .fullpost { display: inline; } Assalamu’ alaikum para penggila blogger. Setelah bertahun-tahun bertapa di gua cintung akhirnya saya mendapatkan wangsit. Apakah itu, penasaran ? Itu adalah tips blog mengenai cara membuat Menu Vertikal pada blog. Tips ini saya peroleh dari Bang Kendhin. Oke yang dimaksud dengan Menu Vertikal adalah menu utama yang terletak di sidebar yang bentuknya tegak.
Kalau masih belum tahu juga, silahkan lihat contoh berikut ini :

[Image]
Lumayan juga kan ? Jika anda berminat untuk membuatnya silahkan ikuti tips berikut ini :
1. Login ke blogger.com
2. Pilih Layout/Tata Letak --> Edit HTML
3. Masukkan kode berikut sebelum kode ]]></b:skin> biar cepat ketemunya tekan aja Ctrl+F :

.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; = Lebar Menu Utama
border: 1px solid black;
}
.glossymenu li{
position: relative;
}
.glossymenu li a{
background: white url('http://blog.superinhost.com/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://blog.superinhost.com/vertical/blue2.gif');
}

* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }

Kode-kode yang berwarna hijau merupakan warna menu. Anda bisa menggantinya dengan kode-kode berikut ini :


blue1.gif
blue2.gif
green1.gif
green2.gif
red1.gif
red2.gif
pink1.gif
pink2.gif
black1.gif
black2.gif
4. Kemudian klik tombol simpan template
5. Lalu pilih Elemen Halaman ---> Tambah Gadget/Add Gadget ---> HTML/Javascript
6. Kemudian masukkan kode berikut ini ke dalam kotak yang disediakan !

<ul id="verticalmenu" class="glossymenu">
<li><a href="/">Home</a></li>
<li><a href="xxxxxxxxxxxxxx">aaaaaaaaa</a></li>
<li><a href="xxxxxxxxxxxxxx">aaaaaaaaa</a></li>
<li><a href="xxxxxxxxxxxxxx">aaaaaaaaa</a></li>
</li>
</ul>

Kode yang berwarna biru adalah tempat linknya, kode yang berwarna hijau adalah text yang akan ditampilkan di dalam menu vertikal. Jika ingin menambah kotak lagi tinggal copy kode <li><a href="xxxxxxxxxxxxxx">aaaaaaaaa</a></li> lalu letakkan di bawahnya, contohnya :

<ul id="verticalmenu" class="glossymenu">
<li><a href="/">Home</a></li>
<li><a href="xxxxxxxxxxxxxx">aaaaaaaaa</a></li>
<li><a href="xxxxxxxxxxxxxx">aaaaaaaaa</a></li>
<li><a href="xxxxxxxxxxxxxx">aaaaaaaaa</a></li>
<li><a href="xxxxxxxxxxxxxx">aaaaaaaaa</a></li>
</li>
</ul>

7. Klik tombol simpan
8. Akhirnya jadi juga yaaa ! Alhamdullillah Ya Allah ! Wassalamu’ alaikum wr. wb.