Membuat Menu Navigasi Vertikal

Menu navigasi itu sangat perlu. Selain mempercantik blog, menu navigasi ini juga merupakan sebuah tools yang berfungsi untuk menuntun pengunjung blog membaca tulisan-tulisan kita. Sehingga pengunjung blog lebih mudah untuk mencari tulisan-tulisan yang mereka inginkan dari blog kita. 

Sebelumnya saya sudah pernah memberikan tips "Membuat Menu Navigasi Horizontal" dimana tools ini sama saja fungsinya, tetapi beda bentuknya. Kalau tips kali ini, menunya akan menjorok ke bawah seperti gambar di samping. Pada tips kali ini saya hanya memberikan bagaimana cara untuk menampilkan menu navigasi vertikal ini kepada sobat blogger dari berbagai sumber yang telah saya baca. Untuk lebih meyakinkan sobat blogger akan tools ini, silahkan lihat aslinya di blog seperti apa.

DEMO

Nah jika sobat blogger sudah melihat aslinya, tentunya sobat blogger juga ingin dong mempunyai menu ini di blog sobat?. Jika berminat, silahkan ikuti instruksi saya.

1. Login ke blogger.com dengan account anda.

2. Pilih Teplate, terus pilih Edit HTML (untuk tampilan blogger yang baru)

3. Kemudian cari kode seperti ini ]]></b:skin>

4. Letakkan kode berikut ini di atas kode tersebut.

.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 kode-kode yang berwarna merah (blue1.gif dan blue2.gif). Ganti kode tersebut dengan pilihan warna dibawah ini.
Pilihan Warna menu vertikal :

blue1.gif 
blue2.gif 
green1.gif 
green2.gif 
red1.gif 
red2.gif 
pink1.gif 
pink2.gif 
black1.gif 
black2.gif

5. Nah, setelah itu silahkan Simpan Template.
6. Kemudian kita beralih ke Tata Letak.
7. Silahkan Tambah Gadget dan pilih HTML/JavaScript.
8. Lalu Paste kode berikut ini ke dalam kolom HTML/JavaScript yang tadi.

<ul id="verticalmenu" class="glossymenu">
<li><a href="/">Home</a></li>
<li><a href="http://tips-untuk-blogger.blogspot.com">Trik Blog</a></li>
<li><a href="http://tips-untuk-blogger.blogspot.com" >Free Template</a></li>
<li><a href="http://ikanmania25.blogspot.com">Free Ebook</a></li>
</li>
</ul>

9. Silahkan ganti tulisan yang berwarna Merah dan Biru di atas.
10. Save dan lihat perubahan blog anda. (Jkt/2012)