Tutorial Buat Rotate Menu Bar

hai korang hari ini dah syawal ke 8 kan. wah pejam celik pejam celik nak habis cuti dah nina ni ha. aduh! em kena balik KL isnin ni. so hari ini nina nak buat tutorial lah untuk menu bar. kalau korang letak cursor dekat manu bar tu nanti dia rotate. macam ni :

cantik bukan? nak try? owh sure lah.. :)

1. dashboard --> template--> edit HTML --> tick expand widget templates

2. tekan CTRL+F untuk search code ]]></b:skin>

3. jumpa? ok lepas tu korang copy code dekat bawah ni dan pastekan dekat ATAS code ]]></b:skin>

/* LIST #8 */

#list8 { }

#list8 ul { list-style:none;}

#list8 ul li { font-family:Georgia,serif,Times; font-size:18px;margin:1px; }

#list8 ul li a { display:block; width:80px; height:28px; background-color:#000000; border-right:10px solid #FFFFFF; padding-left:40px;

text-decoration:none; color:#FFFFFF; }

#list8 ul li a:hover { -moz-transform:rotate(-5deg); -moz-box-shadow:10px 10px 20px #000000;

-webkit-transform:rotate(-5deg); -webkit-box-shadow:10px 10px 20px #000000;

transform:rotate(-5deg); box-shadow:10px 10px 20px #000000; }

warna biru : background colour

warna purple : warna border

warna hijau : warna fonts

4. eh belum lagi siap, korang copy code dekat bawah ni dan pastekan dekat ATAS code </body> pula

<div style='display:scroll; position:fixed; top:150px; left:-40px;'>

<div id='list8'>

<ul>

<li><a href='URL BLOG KORANG'>Home</a></li>

<li><a href='URL/LINK KORANG'>Tajuk</a></li>

<li><a href='URL/LINK KORANG'>Tajuk</a></li>

<li><a href='URL/LINK KORANG'>Tajuk</a></li>

</ul>

</div>

</div>

5. preview and save :)