Cara Membuat Menu Vertikal Sederhana di Blog

Blog bagi saya adalah buku digital. Oleh karena itu, untuk mempermudah dalam membuka materi yang ada dalam blog dibutuhkan sebuah menu. Dalam hal ini, saya postingkan membuat menu yang sederhana, tapi lumayan ngebantu.

Adapun caranya:
1. Login dan masuk ke 'perancangan' -- 'edit HTML'
2. Cari kode ]]></b:skin> dan tempatkan script di bawah sebelum kode tersebut (silakan copy)

/* Menu sidebar sederhana dx--*/

.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 180px; /*WIDTH OF MAIN MENU ITEMS*/
border: 0 px solid black;}

.glossymenu li{
position: relative;}

.glossymenu li a{
background: #106b93 repeat-x bottom left;
-moz-border-radius:10px; -webkit-border-radius:10px; -goog-ms-border-radius:10px; border-radius:10px;

font: bold 14px Arial, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 10px 0;
padding-left: 10px;
text-decoration: none;}

.glossymenu li ul{
position: absolute;
width: 185px;
left: 0;
top: 0;
display: none;}

.glossymenu li ul li{
float: left;}

.glossymenu li ul a{
width: 175px;}

.glossymenu li a:visited, .glossymenu li a:active{
color: white;}

.glossymenu li a:hover{
background-image: #106b93;
-moz-border-radius:10px; -webkit-border-radius:10px; -goog-ms-border-radius:10px; border-radius:10px;
}

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

3. Simpan Template
4. 'add gadget' pada 'elemen laman' dan copy kode HTML di bawah.

<ul id="vertical menu " class="glossymenu">
<li><a href="/">Home</a></li>
<li><a href="http://URL MENU">Ganti dgn judul Menu</a></li>
<li><a href="http://URL MENU" >Ganti dgn judul menu</a></li>
</li></ul>

5. simpan dan atur tata letak gadgetnya.

Catatan.

• Warna baground silakan Anda sesuaikan dengan kesukaan anda dengan mengganti yang berwarna merah
• Ukuran lebar dan jarak serta hurup silakan sobat sesuaikan dengan senanghati.
• Jika ingin menambahkan menu cukup dengan menambahkan yang bertulis tebal dan berwarna hijau.
• Jika ingin membuat border yang melengkung, silakan baca tutorialnya. atau langsung copy (bisa juga tidak jika tidak berbentuk lengkungan/ border-radius) seperti yang berwarna biru.

Update!, baca pula cara membuat menu horizontal sederhana diblog.