Minggu, 20 Juni 2010

Membuat Menu Vertikal Cantik

| Minggu, 20 Juni 2010 | 30 komentar
Selamat membaca artikel diblog ini semoga bermanfaat :)

Sebelum anda mencoba membuatnya ada baiknya anda melihat screenshot contoh widgetnya:

cara membuat memasang menampilkan Vertikal vertical tegak link bar  Menu Cantik pada Blogspot blogger
Apakah anda tertarik?
berikut caranya:
1.Masuk dasbor
2.Pilih rancangan ->> elemen halaman
3.Klik tambahkan gadget ->> Kemudian pilih HTML/Javascript
4.Berikut codenya:


<center><div id="menu">
<ul>
<li><a class="current" href="http://k-blogger1.blogspot.com/">home</a></li>
<li><a href="http://about.com">about us</a></li>
<li><a href="http://google.com">Google</a></li>
<li><a href="http://wikipedia.com">Wikipedia</a></li>
<li><a href="http://k-blogger1.blogspot.com/2010/01/contact-me_14.html">contact us</a></li>
</ul>
</div></center>
<style>

/* --------------------------
AUTHOR : STYLED MENUS
URL : http://www.styledmenus.com
Copyrights by STYLED MENUS
Widget From http://www.ardi33.web.id/
----------------------------*/
*{
margin:0;
padding:0;

}
#menu{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX724E8XfGzqETo5u2-rbtMgTamfosA4lUH9BshCR2cYdx8ZRVaft7CDpGq83IaB-ntyf4PWT2Eqf-BnpKESF5gMxyusCMCjIhI0xxQVO-iub6ze1vMpogjq03aCAPR50LO-xa9EbZFB4/s1600/menu_026_bg.jpg) no-repeat;
width:172px;
height:191px;
padding:15px;
}
#menu ul{

list-style:none;
padding:0 0 0 8px;
}
#menu li{
list-style:none;
display:block;
padding:10px 0;
}
#menu li a{

list-style:none;
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj_jcmcrIhMW_cuffgOja9mBB1wQc4FRBK7EOyMnku30fXq7YpYj89gx7OeiFLkXqTXy3mBtpZ-enYOe6KKn7_6iOgLfHunQKjwIJt3aajndOmlGCmTSlf7vw1BjAF1rDaX3XKJU4qy5Q/s1600/menu_026_b.gif) no-repeat left center;
color:#ffe991;
font-weight:bold;
text-transform:uppercase;
font-size:11px;

line-height:1.2em;
text-decoration:none;
padding:0 5px 0 25px;
}
#menu li a:hover{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi42RhSaxcTe6Hv0uGv652vH4q_2-H3KyKSwqwSJTSJTETuYiUVwcj7BMiWSDxu30-JUItL2VTTYiKtA78SPzNnjSeVjy3_XZC6ypMIRRk7p4XCHqj7D44y3Gum-eYxN_q7Zo2t27JLWJM/s1600/menu_026_h.gif) no-repeat left center;
color:#fff;
text-decoration:none;

}
#menu li .current{
list-style:none;
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi42RhSaxcTe6Hv0uGv652vH4q_2-H3KyKSwqwSJTSJTETuYiUVwcj7BMiWSDxu30-JUItL2VTTYiKtA78SPzNnjSeVjy3_XZC6ypMIRRk7p4XCHqj7D44y3Gum-eYxN_q7Zo2t27JLWJM/s1600/menu_026_h.gif) no-repeat left center;
color:#fff;
font-weight:bold;
text-transform:uppercase;

font-size:11px;
text-decoration:none;
padding:0 5px 0 25px;
}
#menu li a.current, #menu li a:hover.current{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi42RhSaxcTe6Hv0uGv652vH4q_2-H3KyKSwqwSJTSJTETuYiUVwcj7BMiWSDxu30-JUItL2VTTYiKtA78SPzNnjSeVjy3_XZC6ypMIRRk7p4XCHqj7D44y3Gum-eYxN_q7Zo2t27JLWJM/s1600/menu_026_h.gif) no-repeat left center;
color:#fff;
text-decoration:none;

}
</style>

30 komentar :

Akbar Yahya mengatakan...

sip tampilan kree aku cobah dulu ahhh dan tips ini juga gapan bikin cobah dulu ahhh :)

uchu mengatakan...

tutor yang bagus soob, pagenya ane save yah, aku maen di warnet, hehehhee

luthfi_11 mengatakan...

saya sudah cukup pake yang normal aja...^_^

Iyank mengatakan...

wah... oke sob.. jdi lebih indah tuh jadinya... ntar sya coba klau ada kesempatan..

Adib from kompinter mengatakan...

Uhh cantik bener sob..keren ..tp blogku da lemot sob hehehe

Damar mengatakan...

Cnatik sih Sob . .tapi kurang stratgis, menurutku lebih strategis yg horizontal ajah...hehe

Belajar SEO mengatakan...

keren sob...
ntar akan dicoba :D

jaya mengatakan...

CSS nya masi menggunakan yang lama ya...
berarti ini cuman berganti posisi letaknya..

makasih ni ilmunya..

bagi yang perlu tampilan lain bisa baca di

admin bolagoalnet mengatakan...

masih menganut yg horizontal aku sob...

Unknown mengatakan...

Mantep Sobat....cantik, okelah . . Ilmu Komputer Damar

Serba Seru mengatakan...

weeeehh, kodenya panjang ya Gan? apa ga berat kira2 ya?

Bi2t.com mengatakan...

makasih mas menu nya.... bisa buat makan siang nih, hehe...

Akhyar's Blog mengatakan...

wah..bagus nih sob...
tp saya tunggu yg harizontal....

Rizkyzone mengatakan...

keren nih sob, kapan2 aq coba yah, sementara aq save dulu

cariduite mengatakan...

http://cduite.blogspot.com/
wah sob aku coba dulu yach cocok ga ama template q

icantulang mengatakan...

kapan2 dicoba mas triknya,,,
thx udah sharing

Ilham Nurhamzah mengatakan...

wah... nice info sob :)

Sueca Arimbawa mengatakan...

WAH cantik tuh sob, tapi sayang vertical, bagusan yang horizontal, kan lebih bagus jadinya lo makek menu horizontal, blog menjadi lebih bagus...
Salam kenal...
Bercomen balik ya...

pasang iklan gratis mengatakan...

Bagus

Mas - Sandi mengatakan...

Mau coba tp ga ada tempat nya.. hhe

CongCot mengatakan...

WAH
memang cantik nich
kemaren kemaren congcot hanya belajar menu horisontal terus
ada penemuan baru nich
patut dicoba nich
makasich yaaa

berkunjung ke congcot ya

o'o mengatakan...

aku dah coba ,,tapi gambar nya ku hapus.,.,ehehehe

BeDa mengatakan...

Bagus menu vertikalnya. Terima kasih tutorialnya.

Salam ukhuwah

Anonim mengatakan...

tertarik kawan,, tpi saya gx bsa heehe

khidir mengatakan...

coba ahh sip kang good post

Gieterror mengatakan...

ilmu baru nih,,
bisa dipraktekkan nih ..

Rista Monica Adelina mengatakan...

langsung praktek.
ristamonicaadelina.blogspot.com

Jual Pulsa Yuu.. mengatakan...

mantap tipsnya..

uki mengatakan...

wah, keren nih, dh ane coba, yang sliding menu ada gak gan kayak gini,

saeful fadillah mengatakan...

thank's bagus

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Posting Komentar

 

Blogroll

Flagcounter

free counters
© Copyright 2010. K-blogger . All rights reserved | K-blogger is proudly powered by Blogger.com | Template by o-om.com - zoomtemplate.com
Pasang Iklan Gratis Sebagai Awal Mulai Bisnis Online