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?

Bontangers said...

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

Jaloee said...

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

Anonymous said...

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

Anonymous 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!

Anonymous said...

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

Abdul Kholiq said...

sip lah, sukses slalu

Anonymous said...

makasih bos udah dicoba nich bagus juga hasilnya

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

Mbah Giman said...

:)

Anonymous said...

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

Anonymous said...

:o :D

Anonymous 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

Unknown 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

Kian 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

Anonymous 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.,.,.,??????

music improvisation said...

taruh dimana yah??

Obat Diabetes Melitus Tradisional said...

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

Redaksi 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

Unknown 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 ,.

Pak Suratno said...

PENGAKUAN SAYA BERSAMA KELUARGAKU INI BUKAN CERITA ATAU PUN REKAYASA BENER-BENER TERBUKTI SAMA SAYA.

Terima kasih sebesar-besarnya yang kami ucapkan kepada aki sahro yang telah memberikan keberhasilan dan keberuntungan bagi keluarga saya.berkat bantuan beliau saya sekarang sudah hidup tenang karena suamiku sudah punya usaha tambak yang luasnya sekitar 3 hektar kurang lebih. begitupun juga saya dirumah buka warung sembakau dan sekarang pun saya sekeluarga tidak di kejar-kejar hutang lagi. mulanya keluarga Kami di berikan angka gaib hasil ritual dari aki sahro yang sangat Jitu 100% dijamin tembus.sehingga keluarga saya sekarang merasa tenang lagi.sekali lagi terima kasih aki jasamu dikeluarga saya tidak akan terlupakan.Jika anda butuh angka gaib hasil ritual aki sahro silahkan Tanyakan aja Pada aki dinomer hp beliau di(_085_340_951_457_)) Terima kasih.

Unknown said...

SEKEDAR INFO BOCORAN TOGEL
JIKA ANDA BUTUH A'NGKA GHOIB/JITU
SGP HK MALAYSIA ARAB SAUDI LAOS
2D_3D_4D-5D-6D-7D DI JAMIN 100% TEMBUS...
SAYA BUKTINYA SUDAH 5X JP
DAN SAYA SUDAH BENER2 YAKIN DENGAN AKI RORO
YANG TELAH MEMBERIKAN ANGKA RITUAL NYA
BAGI ANDA YANG SUKA MAIN TOGEL
& INGIN SEPERTI SAYA SILAHKAN GABUNG DENGAN AKI RORO
SILAHKAN HUB DI NO: ((_082_336_642_456_))


Sekian lama saya bermain togel baru kali ini saya
benar-benar merasakan yang namanya kemenangan 4D
dan alhamdulillah saya dpat Rp 250 juta dan semua ini
berkat bantuan angka dari AKI RORO
karena cuma Beliaulah yang memberikan angka
ritual yg di jamin 100% tembus awal saya
bergabung hanya memasang 100 ribu karna
saya ngak terlalu percaya ternyatah benar-benar
tembus dan kini saya ngak ragu-ragu lagi untuk memasang
angka nya,,,,buat anda yg butuh angka yang di jamin tembus
hubungi AKI RORO DI NO: ((_082_336_642_456_))
insya allah beliu akan siap menbatu kesusahan anda
''kami sekeluarga tak lupa mengucapkan puji syukur kepada ALLAH S,W,T dan terima kasih banyak kepada AKI RORO

Pak Haikal said...

Apaka anda serin kalah dalam permainan

judi togel anda jagan putus asah saya cuma

ingin sempaikan kpd rekan2 togel bahwa jika

anda butuh angka goib hasil ritual jitu 2d 3d 4d

hub 0823=1336=9928=AKI SUKARMANTA angka goib dari

beliu sudah serin terbukti jitu saya sudah percaya

karna saya sudah membuktikan,nya sendiri amin dan

alhamdulillah malam ini saya bisa menan lagi berkat

AKI SUKARMANTA yang telah membantu saya 4d yang di berikan

aki yaitu 7566 benar2 tembus lagi dan saya menan 125 juta

silahkan buktikan sendiri karna saya sudah membuktikan angka

dari AKI SUKARMANTA 5x putaran berturut2 tembus di sgp/hk amin ingat kesempatan tidak akan datang k2 kalinyA.

masamune said...

Apa jadinya jika ada marketplace yang menyediakan segala macam perhiasan dan emas batangan seperti Toko Emas Online yang terdiri dari orori,whizliz, dan segala macemnya.

Maharaja said...

Wah terimakasih banyak mas atas informasinya, sangat berguna sekali. Saya masih harus belajar banyak untuk membangun website perhiasan.

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