Vertikal Navigator Menu

Posted By anasku
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.
Artikel Terkait untuk "Vertikal Navigator Menu"


34 comments:

subagya said...

pertamaaaaax..... mantab juga nigh tutornya,,, kalo navigasi yang berbeda bentuk bro gmana caranya?

[googleholic] said...

wah,..pertamaxxxnya ternyata suhu mochal,...
tutorialnya bisa2 makin lengkap n makin keren yg pasti,...

JALOE said...

hehehe.. makin ngulik saja neh ..sip lanjut terus

Dunia Blogger said...

Sukses Bro... We Belum Sempat Buatin tutor itu :D gpp deh soalnya lagi NGotak atik Recent Post/Coment jadi Drop down :D =))

Rizky_bejo said...

wah perlu di coba nh... manteb kyknya...heheheheh

Anonymous said...

Wah semua tips ente bener2 membantu kita yg tidak tau/blum tau trik semacam ini bro!

Semoga Allah.SWT (yg maha kuasa) memberikan imbalan yg setimpal atas apa yg ente amalkan/share ini....

Sukses bro!

dhyan said...

Kalau cara bikin template seperti http://blog.gooddesignweb.com/ bgm ya ? Artistik nih.Tlg jwbnya di cc ke blogku ya.TK

Abdul Khaliq said...

sip lah, sukses slalu

wills said...

makasih bos udah dicoba nich bagus juga hasilnya

genjimayu said...

mas gimana ya caranya membuat agar link yang di klik bisa berpindah ke tab baru, agar pengunjung tidak meninggalkan blog kita gitu...
tolong ya di jawab atau kirim saja ke e-mail : genjimayulee99@gmail.com
makasih yach..

Purnomo Hariwiyatno said...

:)

bunda said...

mas anas tambah mantap aja ilmunya..
bunda keteteran nih belajarnya, maklum udah ortu

bunda yulia said...

:o :D

desi murtiani said...

gimana kalo yang diklik blog kita aja, tidak pindah blog, saya pernah klik navigasi di blog orang lain, yang muncul postingan label judul yang diklik..., mas jawab aja diemail murtianidesi@yahoo.com tq bgt....

Nur said...

Mantap boz,,,
makasih ya atas tutorialnya

deniardian said...

wah semakin oke saja sampean mass....


thank you informasinya mas....

mampir ke blog saya ya mass

www.deniardians.blogspot.com

download ebook best seller gratis...
dan info seputar CIAO

_KANTOR KESBANGPOLINMAS_KAB_CIAMIS said...

terimakasih infonya..nanti saya akan coba

sugriwo said...

thank kyuuu broo

Rusty FM Official Website said...

http://rustyfm.blogspot.com/

kok jadi double gitu mas... pls help me

Dea Maulana XI TKJ 1 said...

okay,,,,,,,,,,,thank's,,,,,,,,,, B)

Stockist Brondong said...

bagaimana caranya menambahkan menu pulldown pada menu horizontal, seperti pada menu tutorial blog di web ini
thx yaaa

Fiecomp said...

Makasih gan atas elmunya, dah ane coba...baguuus...tp masih belajar niih, newbie butuh bimbingan.
http://aangkunaifie.blogspot.com

sai elvarizie said...

Mantap Gan,, Bagaimana Caranya memasukan Artikel atau Tulisan kita ke menu tersebut,,saya masih bingung ney.,.,.,??????

LOGAM MULIA said...

TIKET PESAWAT MURAH | Kamera CCTV | Wireless Portable Sound System | HARGA EMAS | LOGAM MULIA

Tablet Android Honeycomb Terbaik Murah
Bejubel Market Place Terbaik Indonesia
Ezytravel - Shanghai Modern Taikang Lu
Ezytravel - Mengalami Empat Musim Di Australia Great Ocean
Ezytravel - 15 Tempat Menarik di Cina Yang Bukan Tembok Besa
Ezytravel - Jatuh Cinta Pada Pulau Jeju

music improvisation said...

taruh dimana yah??

Obat Diabetes Melitus Tradisional said...

waw tulisannya sangat bermutu semaunya ..mudah-mudahan banyakl yang menoakan buat kesehtna penuylis

Muara Alatas Marbun said...

Gan,,,
ini gimana yah


dah nge-klik add a gadget
tapi ngga ada pilihan HTML/JavaScript di sana

tolong jawab ya....

igoel24enRust said...

Thanks info'a gan....
jika berkenan, mohon bimbingan'a,, ane masi newbie..

http://igoel-enrust.blogspot.com

rental mobil di bandung said...

rental mobil bandung | rental mobil di bandung | sewa mobil bandung | sewa mobil di bandung | rental mobil bandung murah | sewa mobil murah di bandung

PAK WAWANG DI BALI said...

kepada AKI atas nomor togel.nya yang AKI berikan 4 angka 1600 alhamdulillah ternyata itu benar2 tembus AKI. dan alhamdulillah sekarang saya bisa melunasi semua utan2 saya yang ada sama tetangga.dan juga BANK BRI dan bukan hanya itu AKI. insya allah saya akan coba untuk membuka usaha sendiri demi mencukupi kebutuhan keluarga saya sehari-hari itu semua berkat bantuan AKI.. sekali lagi makasih banyak ya AKI… bagi saudara yang suka main togel yang ingin merubah nasib seperti saya silahkan hubungi AKI SUPALA ,,di no (((085-336-171-115))) insya allah anda bisa seperti saya…menang togel 275 juta, wassalam. dijamin 100% jebol saya sudah buktikan…sendiri…. Apakah anda termasuk dalam kategori di bawah ini ! 1″Dikejar-kejar hutang 2″Selaluh kalah dalam bermain togel 3″Barang berharga anda udah habis terjual Buat judi togel 4″Anda udah kemana-mana tapi tidak menghasilkan solusi yg tepat 5″Udah banyak Dukun togel yang kamu tempati minta angka jitunya tapi tidak ada satupun yang berhasil.. Solusi yang tepat jangan anda putus asah…. AKI SUPALA akan membantu anda semua dengan Angka ritwal/GHOIB: butuh angka togel 2D 3D 4D SGP / HKG / MALAYSIA / TOTO MAGNUM / dijamin 100% jebol Apabila ada waktu silahkan Hub: AKI SUPALA DI NO: (((085-336-171-115))) angka GHOIB: singapur 2D/3D/4D/ angka GHOIB: hongkong 2D/3D/4D/ angka GHOIB; malaysia angka GHOIB; toto magnum 4D/5D/6D/ angka GHOIB; laoskami sekeluarga tak lupa mengucapkan puji syukur kepada ALLAH S,W,T dan terima kasih banyak

obat kutil kelamin ampuh said...

nyimak saja ,.

nasi box online said...

Saya nyimak dulu deh...paket nasi box murah | aneka snack box murah | nasi box dan nasi kotak | aneka jajanan pasar | menu nasi box murah

beton ready mix said...

Thanks info'a gan....
harga beton ready mix | sewa pompa beton | harga pagar panel beton | harga ready mix | ready mix beton minimix | harga beton b0 | harga cor beton k 225

Sewa Tower Crane said...

Terimakasih infonya, nanti saya akan coba..
sewa tower crane | jasa sondir tanah | jasa bore pile | jual pancake durian

Post a Comment

 

Site Info

Add to Technorati Favorites
Visitor Online
Check PageRank

Recent Comments

Tutorial Jitu - Blog Info, Gadget-Widget, Blogspot tutorial, blog hack, free template, SEO And Blog tips : Admin By Luqman Khoirul Anas