Vertikal Navigator Menu pada Blogspot

Masih ingatkah sama Horisontal Navigator menu yang Saya posting sebelumnya?. Diantara Navigator menu dan Vertical menu mempunyai perbedaan bentuk, yaitu jika navigator menu horisontal menunya memanjang kesamping (horizontal) dan jika vertikal menu memanjang kebawah (vertikal), menu ini cocok jika dipasang di sidebar karena bentuk menunya memanjang kebawah, lain halnya dengan horisontal menu yang bentuknya menyamping cocok jika dipasang di header.

Disini saya akan coba membuat menu vertikal simple namun stylish dan tidak memakan waktu yang lama untuk loadingnya karena tidak disertai gambar untuk backgroundnya.

tidak perlu memakan waktu yang lama untuk membuatnya dan tidak perlu ketrampilan yang cukup untuk membuatnya, hanya tinggal copy-paste code yang saya berikan ini.
Apakah Anda tertarik untuk memasang widget menu vertikal ini kedalam blog Anda?
Silahkan ikuti langkah-langkah dibawah ini.

Pastikan sudah Log In ke blogger.

Masuk menu Layout kemudian masuk menu Edit HTML.

Kemudian masukkan Code CSS dibawah ini diatas code ]]></b:skin>

/*Vertikal Menu
---------------------------------*/
.vertikalmenu{
list-style-type: none;
margin: 0;
padding: 0;
width: 180px; /* lebar dari menu vertikal*/
}
.vertikalmenu li{
border-bottom: 1px solid white;
}
.vertikalmenu li a{
background: #000000 ; /*warna dari menu vertikal*/
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana;
display: block;
color: white;
width: auto;
padding: 5px 0;
text-indent: 8px;
text-decoration: none;
border-bottom: 1px solid black;
}
.vertikalmenu li a:visited, .vertikalmenu li a:active{
color: white;
}
.vertikalmenu li a:hover{
background-color: #737373; /*warna setelah pointer diarahkan (hover)*/
color: white;
border-bottom: 1px solid black;
}

Perhatikan code yang berwarna merah dan kegunaanya.. atur menurut selera kamu.
untuk mencari code warna buka situs www.colorschemer.com/online

Kalau sudah kemudian SAVE

Nah langkah berikutnya yaitu kita harus beranjak dari area Edit HTML ke area Page Elements (tata letak)

Lalu pilih Area sidebar dan klik Add a Gadget (Saya harap mudeng maksud saya)

Lalu pilih HTML/JavaScript dan taruh Code HTML dibawah ini kedalamnya

<ul class="vertikalmenu">
<li><a href="/">» HOME</a></li>
<li><a href="http://tutorial-jitu.blogspot.com">» Tutorial Blog</a></li>
<li><a href="http://bankloe.blogspot.com">» Bisnis Online</a></li>
<li><a href="http://by-template.blogspot.com">» Free Template</a></li>
<li><a href="http://zonahandphone.blogspot.com">» Handphone</a></li>
<li><a href="http://praktis-triktips.blogspot.com">» Komputer</a></li>
</ul>

Ganti teks yang berwarna merah dengan URL link yang ingin kamu pasang, dan yang berwarna hijau adalah text display linknya.

Kalau sudah beres semua tinggal SAVE deh..

Nah gimana gampang kan gak perlu mengeluarkan keringat untuk membuatnya.
kalau sudah berhasil jangan lupa bersorak hore.. hore... tapi kalau ada masalah silahkan tanyakan saja di kotak komentar...

Sekian semoga bermanfaat bagi Anda para blogger.

Posted in: Tutorial Blogspot