VerTicaL NaviGasi Menu

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 areaPage 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..

• 
• 
• 
• 
• 
• 
•