Membuat Menu Navigasi Vertikal

Rabu, 25 Januari 20121komentar

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>