RSS2.0

Buat Vertical Menu

Jumat, 24 Oktober 2008

Vertikal Menu merupakan pilihan menu yang biasa dipakai pada website-website yang mempunyai banyak pilihan menu di dalamnya, vertikal menu berbentuk pilihan menu yang turun kebawah jika kita sentuh dengan menggunakan mouse kita.. dengan kita menggunakan vertikal menu ini maka kita akan dapatkan pilihan menu yang banyak untuk blog kita


Nah saya akan memberikan cara pembuatannya pada blog.. ikuti caranya dan langkah-langkah nya dengan seksama, dengan anda mengikuti pastinya anda tidak akan mendapatkan kesulitan dalam pengeditan kode CSS nya


Masuk ke Akun Blogger Anda dan pilih layout terus cari Edit HTML

Masukkan kode CSS ini di atas kode ]]></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;
}


Kemudian SAVE

Anda bisa mengganti warna yang ada dengan warna yang anda sukai

Selanjutnya pilih Page Element dan kli add Page elemnet pilih lagi HTML/java Script

Masukkan kode ini didalmnya


<ul class="vertikalmenu">
<li><a href="/">» HOME</a></li>
<li><a href="http://your blog name.blogspot.com">» Tutorial Blog</a></li>
<li><a href="http://your blog name.blogspot.com">» Bisnis Online</a></li>
<li><a href="http://your blog name.blogspot.com">» Free Template</a></li>
<li><a href="http://your blog name.blogspot.com">» Handphone</a></li>
<li><a href="http://your blog name.blogspot.com">» Komputer</a></li>
</ul>


Ganti your blog name dengan nama blog milik anda

Klo sudah klik save

selesai, selamat mencoba

Baca yang Lainnya



19 komentar:

Masenchipz mengatakan...

itulah enaknya blogspot... bisa ngoprek.. klo wp enak lagi.. tinggal download pluginnya... he..he..

Anang mengatakan...

blogspot memang yahuddddddddd..... tapi kapan ya blogspot kayak wp.. jadi ga berat2 amat

david mengatakan...

wah makasih tipsnya...ntar saya coba

Yopan Prihadi mengatakan...

Tipsnya oke banget nih...
Boleh donk kapan-kapan kasih tips bagaimana cara membuat image pada header template...
Bukan apa sih..blog saya sederhana banget bro..
ga ada image headernya...
Oke Jefry..saya tunggu yah artikelnya..

uNieQ mengatakan...

blog kek gini niyh yang yahud..bisa nambah ilmuuu..
:)

anita mui mengatakan...

Keluarkan semua ilmumu..berbagilah dgn sesama newbie..itu baru dinamakan persahabatan..
walo didunia maya tp tak harus menghalangi kita tuk menggapai pahala..berbagi ilmu kan juga dpt pahala?? benar gk???

aipdam mengatakan...

tipsnya oke juga, salam kenal from http://blog-xp.blogspot.com (aipdam)

albri mengatakan...

ya bagus juga memang menu vertical

Ardy Pratama mengatakan...

mantappp... mantap... blog ini pake gak yak? Yg sblah mna?

albri mengatakan...

Ikutan latihan yuk....

albri mengatakan...

Maaf saya dapet PR dan akhirnya kepada anda saya delegasikan. dicek ya thanks..

project mengatakan...

yuuuuk, teori dah ada tinggal praktek dunks

Silaen Samosir mengatakan...

Thanks dengan dengan artikelnya

jalu coesta mengatakan...

kalo mo buat yang horizontal gmn...???

Awandragon mengatakan...

Gan, kalau maw buat horizontal. caranya gimana

Al-Furqon Celluler mengatakan...

Wah kok masih susah je.. ono sing luweih gampang ra mas?:D

yogga-rose mengatakan...

mantap gan!

Rumah Dijual Bekasi mengatakan...

tips nya oke banget gan bagus! rumah dijual di bekaasi

Vimax Original Pembesar Mr.P Herbal mengatakan...


artikelnya sangat membantu gan thanks for sharing
kunjungi web kami gan => www.vimaxkapsuloriginal.com

Posting Komentar

Setiap Kali anda berkomentar maka anda akan mendapatkan link balik dari saya...

Terima kasih atas KOMENTAR-nya

Terjemahkan