Membuat Menu Vertikal

Posted: Juni 27, 2010 in Uncategorized

Membuat Menu Vertikal (Vertical)

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>
3. Lalu letakkan kode 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://kendhin.890m.com/blog/vertical/blue1.gif&#8217;) 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&#8217;);
}

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

4. Kemudian di save.
5. Lalu pergi ke menu “Page Elements”
6. 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=”https://zhafirinperdana66.wordpress.com“>Trik Blog</a></li>
<li><a href=”https://zhafirinperdana66.wordpress.com” >Free Template</a></li>
<li><a href=”https://zhafirinperdana66.wordpress.com“>Free Ebook</a></li>
</li>
</ul>

Kode yang tebal adalah linknya dan yg miring adalah teks yang ditampilkan. Kalau mau menambahkan menu tingal buat lagi kode seperti itu.

Komentar
  1. Coret-Coret mengatakan:

    […] Membuat Menu […]

  2. […] 1. Membuat Menu Vertikal. […]

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s