Menu bar comel kat tepi yang rotate (5 deg)

Ok hari ni aku nak ajar tutorial untuk wat menu bar comel kat tepi tu yang boleh rotate sikit. Hue hue. macam gambar kt bawah ni..

Ha, sebenarnya aku amik daripada sini , tapi aku ade ubah sikit2 la. huhu.

Step 1: # Dashboard > Template > Edit HTML

Step 2: # Click Expand Widget Templates

Step 3: # copy code kat bawah ni sebelum code ]]></b:skin>

/* LIST #8 */
#list8 { }
#list8 ul { list-style:none;}
#list8 ul li { font-family:Juice ITC,serif,Times; font-size:26px;margin:3px; }
#list8 ul li a { display:block; width:100px; height:40px; background-color:#FFCCCC; border-right:20px solid #FF3366; padding-left:30px;
text-decoration:none; color:#000000; }
#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; }

Purple :  jenis font untuk menu bar tu. kalau nak tukar boleh tengok kat Microsoft Word punye font. tulis nama font tu. pastikan ejaan yang betul. kalau huruf besar kene huruf besar and huruf kecik kena huruf kecik.
Hijau : size font tu boleh di ubah kalau nak kecik skit.
Merah : warna background menu tab tu.
Oren : warna untuk borde sebelah kanan dye tuh.
Biru : warna untuk font dalam menu bar tuh.

Kalau nak tukar warna boleh rujuk kat sini

 Step 4: copy code kat bawah ni sebelum </body>

<div style='display:scroll; position:fixed; top:300px; 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>

Merah : untuk kedudukan menu bar same ada nak kebawah sikit atau ke atas sikit. 300px tuh macam tengah2. kalau nk atas skit, kurangkan dan kalau nak ke bawah lagi boleh tambah lagi. ikut suka lah.
Biru : untuk letak menu bar tu di kiri atau kanan. tapi kalau letak kat kanan macam tk lawa sangat sebab aku pernah buat. kecuali kalau korang pandai adjust sendiri tkpelah kot.

Step 5 : Preview dulu, kalau jadi boleh la SAVE.

---

Ikhlas dari Qaseeh Akasia

---