26/01/12

Tutorial cara buat navigation menu | Efek senget


Tutorial ni atas permintaan seorang rakan blogger.. jadi klu sesiapa yang mau tutorial jgn la segan mau minta.. ada masa aku akan buatkan...

Efek ni hanya dapat di lihat pada mozilla firefox..akan datang aku akan apdate agar blh dilihat pada google chrome..

Cara pasang pada blog senang saja

Live Demo




Mula2 pergi ke desbod---desaign---ada gadget---html / javascript...

kemudian masukkan code di bawah..






<style type='text/css'>
#polsmenu{margin-bottom:30px;}
#polsmenu ul{
border:0;
text-align:left;
margin-left:-20px;
}
#polsmenu li {
display:inline;
}
#polsmenu li a{
background-color:#363636;-webkit-transition-duration:1.5s;-moz-transition-duration:1.5s;
-webkit-transform: rotate(-13.37deg);
-moz-transform: rotate(-13.37deg);
-moz-border-radius:5px;
-webkit-border-radius:5px;
padding:5px 10px 5px 10px;
}
#polsmenu li a:hover {
background:#eee;color:#151515;
-webkit-transform: rotate(13.37deg);
-moz-transform: rotate(13.37deg);
}

</style>

<div id='polsmenu'>
<ul>
<li><a href='#'>testttt</a></li>
<li><a href='#'>Tutorial</a></li>
<li><a href='#'>ShoutBox</a></li>
<li><a href='#'>PungPung</a></li>
</ul></div>


masukkan link(gantikan) pada simbol #
'
<li><a href='#'>testttt</a></li>

contoh

<li><a href='http://blogger-blog-tutorial.blogspot.com'>testttt</a></li>

Cara Edit

#polsmenu li a{
background-color:#363636;-webkit-transition-duration:1.5s;-moz-transition-duration:1.5s;
-webkit-transform: rotate(-13.37deg);
-moz-transform: rotate(-13.37deg);
-moz-border-radius:5px;
-webkit-border-radius:5px;
padding:5px 10px 5px 10px;
}
#polsmenu li a:hover {
background:#eee;color:#151515;
-webkit-transform: rotate(13.37deg);
-moz-transform: rotate(13.37deg);
}


warna kuning kuning tu adalah code warna background manakala warna biru adalah warna tulisan..
Untuk membesarkan saiz tulisan tambahkan kata arahan

font-size:55px;

contoh

#polsmenu li a{
background-color:#363636;-webkit-transition-duration:1.5s;-moz-transition-duration:1.5s;
-webkit-transform: rotate(-13.37deg);
-moz-transform: rotate(-13.37deg);
-moz-border-radius:5px;
-webkit-border-radius:5px;
padding:5px 10px 5px 10px;
font-size:55px;
}

jika ada masalah jgn malu bertanya
Sekian

21 ulasan:

misz_eyza berkata...

thanks awak...dah berjaya buat saya gtau ekk..

misz_eyza berkata...

awak, saya dah copy paste koding tue tapi bila nak save dia keluar ayat camnie...'An error occurred. Please refresh the page and try again.' naper ekk?

khairul berkata...

TQ boss

Aqmil Lambung berkata...

kenapa button komen keluar banyak sangat??

Polskahackrew berkata...

@misz_eyza
yang tu masalah dari server blogger.com.. cuba clear history.. login balik.. kemudian buat smula..

Polskahackrew berkata...

@khairul
welcome bro

Polskahackrew berkata...

@Aqmil Lambung
button kommen kat mana bro?

misz_eyza berkata...

@Polskahackrew saya dah buat tapi macam kecik plak tulisan dia hehe....

Polskahackrew berkata...

@misz_eyzatulisan tu blh ejas.. nnti sy buat cara edit navigation tu.. ('',)

misz_eyza berkata...

@Polskahackrew owh terima kasih yer awk...sudi menolong dan membantu

misz_eyza berkata...

@Polskahackrew awk, camner nak letak yg edit tue ekk? maksud sy nakletak kt bahagian mana di coding atas tue?

Polskahackrew berkata...

@misz_eyza
letakkan code tu selepas simbol ; dan sebelum simbol }

contoh :

Sebelum penambahan code

test {
background:#fff;
color:#eee;
}

Selepas penambahan code

test {
background:#fff;
color:#eee;
font-size:55px;
}

nampak x perbezaan dan cara saya letak code tu.. simple kan.. ekekek..

Blh atau tidak nnti bagi tau lg

misz_eyza berkata...

@Polskahackrew ihiks dah jadi...tq tq...cuma la nak ubah warna background dan tulisan jer...

Polskahackrew berkata...

@misz_eyza
yeah.. horay2.. dah berjaya,, ('',)

misz_eyza berkata...

@Polskahackrewkehkeh awakkkk, nak tnya g nie...

camner nak jarakkan antara menu2 ekk...(^_^)

Polskahackrew berkata...

@misz_eyza
senang saja.. tambahkan code

margin:0px 33px 0px 33px;

pada #polsmenu li a

contoh

sebelum penambahan code

#polsmenu li a{
background-color:#363636;-webkit-transition-duration:1.5s;-moz-transition-duration:1.5s;
-webkit-transform: rotate(-13.37deg);
-moz-transform: rotate(-13.37deg);
-moz-border-radius:5px;
-webkit-border-radius:5px;
padding:5px 10px 5px 10px;
}

selepas penambahan code

#polsmenu li a{
background-color:#363636;-webkit-transition-duration:1.5s;-moz-transition-duration:1.5s;
-webkit-transform: rotate(-13.37deg);
-moz-transform: rotate(-13.37deg);
-moz-border-radius:5px;
-webkit-border-radius:5px;
padding:5px 10px 5px 10px;
margin:0px 33px 0px 33px;
}

nampak x pada perengan akhir tu saya letakkan code tu

pada code

margin:0px 33px 0px 33px;

cuma tukar no 33px tu sahaja.. sama ada yang depan atau belakang

blh atau tidak nnti bagi tau.. thanks sudi slalu lepak sini.. lalala

misz_eyza berkata...

@Polskahackrew perghh awak...menjadi la...suke suke suke hihi...

ur welcome awak dan thanks juga sudi membantu sy yg sentiasa blur nie hihi

Polskahackrew berkata...

@misz_eyza
yeah menjadik.. ('',)

cik.blogger berkata...

hihihi...menjadi...tq.....hihih

Polskahackrew berkata...

@cik.blogger
thanks bg feedback

budak johor berkata...

salam nak tnye nape bawah navi tu ade tulis ni ek

#polsmenu li a{ background-color:#363636;-webkit-transition-duration:1.5s;-moz-transition-duration:1.5s; -webkit-transform: rotate(-13.37deg); -moz-transform: rotate(-13.37deg); -moz-border-radius:5px; -webkit-border-radius:5px; padding:5px 10px 5px 10px; font-size:55px; margin:0px 33px 0px 33px; } #polsmenu li a:hover { background:#eee;color:#151515; -webkit-transform: rotate(13.37deg); -moz-transform: rotate(13.37deg); }

entri ja

Related Posts Plugin for WordPress, Blogger...