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

• testttt
• Tutorial
• ShoutBox
• PungPung

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