Tutorial Rotate Menu Bar


Salam.

Just now ada blogger tanya I macam mana I buat menu hitam pink kat belah kiri blog I neh. So beliau mintak tolong ajar kan. Meh I ajarkan. Caranya senang aje. 




1st step :
Dashboard - Design - Edit HTML

2nd step :
Click Expand Widget Templates

3rd step :
Copy code kat bawah neh dan paste kan SEBELUM 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; }
4th step :
Copy code di bawah neh dan paste kan SEBELUM </body>
<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>
5th step :
Preview dulu, kalau takde apa apa error, terus SAVE! :')

p/s : Korang boleh tukar warna yang ikut kesesuaian blog korang. Yang BIRU tu untuk background, dan yang MERAH tu untuk tulisan dan border kanan. Korang boleh pilih code warna kegemaran korang di sini. HTML COLOR CODE
Photobucket

Comments

Azhafizah MN said…
menarik ni.boleh try.tapi dia berat tak?ade effects tak mase loading blog?
Misha Ieza said…
thanx share.. i suke style rotate menu bar ni :)
Nurulchumel said…
@Azhafizah[フィザ]

takde la..
loading kite laju jek.
hehe.. :)
Nurulchumel said…
@Misha Ieza

oke!
boleh apply dalam blog anda!
Anonymous said…
salam..
akak syieda amik letak dalam blog syieda la..hihihi

manjadi.. thanks akak.. -.-
hafizmasran said…
napa x leh..nnati x jadi lakk.asal yew?
Nurulchumel said…
@Rafflesia™

amek la..
jgn lupa kredit yek!
:)
Nurulchumel said…
@hafizmasran

mesti ada error tuh.
try again! :))
hafizmasran said…
dah bnyk kali buat tapi tetap eror akak bole buatkan x..sye kasi emel n password..nati dah siap sye change paswoord..ok
Nurulchumel said…
@hafizmasran

oke. add fb akak, bg email ngan password kat sane k!
Putri Lagu said…
tak menjadi lah akak.. errow.. dah 3 kali ulang..
Nurulchumel said…
@PUTRI LAGU

mesti ada sumthink wrong tuh.
try again dik!
Afaf CyNofa said…
comel..nt nk try buat lah.. <3
Afaf CyNofa said…
dh try buat, tp xjd la.. :(
Nurulchumel said…
@Nurulchumel

ni mesti ada sumthink wrong kat meman ni..
I buat jadi jek.
Kena adjust sikit kot code dia..
ada error ye masa nak save?
Afaf CyNofa said…
@Nurulchumeltuh la, rs mcm kene adjust kt code dia kut. tp rs mcm ok dh code tu..em, error ms nk save tu..
Afaf CyNofa said…
akak, dah jd dh..
tenks kak utk tuto ni..;p
Student Kecik said…
mintak share taw,sy kredit :)
Dhia adawiyah said…
Wahhh .. menarik nyerrr . nak cuba boleh ? boleh ? boleh tau ..
Dhia adawiyah said…
;( .. mula - mula dah jadi dah .. tapi, bila bukak blog lagi sekali dah tak jadi .. dia jadi kecik je . ;9 * teringin nak buat ~
ciksukaberangan said…
saya toray. jadi. hehe. tq :D
Nurulchumel said…
@dhia adawiyah

mesti ada sumthing wrong neh..
try lagi oke!
:))
Syat0za Zai said…
Assalamualaikum ^^, nak tanya, camne nk center kan text tu ek? dah byk kali sy try centerkan text dalam tab tu, but tak boleh.. :( reply kat blog sy yah.. asap :) terima kasih :D
Unknown said…
thanks alhmadulilah ,jadi...
Kyra said…
sis nurul, ni linknyee...

http://www.kyrahizrina.com/2012/05/tuto-buat-tab-menu-comel-tepi-blog.html
Unknown said…
thanks yea..
best!...^^
Dhia adawiyah said…
tak jadi , kak .. sama juga .. akak boleh tolong buatkan ?
Nurulchumel said…
@dhia adawiyah

sorry dik.
akak takde byk masa utk buatkan.
sorry sgt2..
tp tuto ni tak semua templates dapat buat. sebab templates masing2 lain..
sorry yek..
Unknown said…
sis untuk URL,mcm mana ea..kurang paham part tu,mohon bantuan..hihi
Fie_zah said…
Akak,,, kalau kita nak letakkan dia kt bawah sikit edit kat mana eh???
plizz help me....
Nurulchumel said…
@Fie_zah

utk tu, adik kena adjust sikit bahagian width dengan height dekat code tu.. try and error, smpai jadi k!
:)
Unknown said…
assalamualaikum, awak. leh tak share mana awak dpt lagu shae ni..sedap la rentak dia... saya cari tak jumpa
Nurulchumel said…
@sk tanjung batu

Awak leh jumpa dekat sini..

http://www.youtube.com/watch?v=tbX7ybCLFL8

Sy amek dr sini and convert dlm blog.. :)
Anonymous said…
Da jd! Thanks! Tp camne nk link an bnde alah tu dengan tab kte ye?
Anonymous said…
Da jd! Thanks! Tp camne nk link an tab tu dgn blog kte?
MisakiPureBlood said…
Thanks berguna tuto nih :D hehe

Popular Posts