Vertikal Navigator Menu

 

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.



Admin

Endro Prasiswo
tel.:081334169022
fax:03423326622
Email:admin@kesamben.co.cc
URL:http://www.obralilmu.co.cc
Facebook:http://www.facebook.com/endro.prasiswo

Silahkan dibaca juga kelanjutannya dibawah ini