Thursday, March 8, 2012

Home » , , » Tutorial Rotate Menu Bar

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

Thanks for visiting my site.
Like and Share this entry if you think its very useful. And please do leave your comments below ya!
Love, ♥ Nurulchumel ♥

43 Chumel(s) comment ヅ:

Azhafizah[フィザ] said... [Reply Here Bebeh!]

menarik ni.boleh try.tapi dia berat tak?ade effects tak mase loading blog?

Misha Ieza said... [Reply Here Bebeh!]

thanx share.. i suke style rotate menu bar ni :)

Rafflesia™ said... [Reply Here Bebeh!]

salam..
akak syieda amik letak dalam blog syieda la..hihihi

manjadi.. thanks akak.. -.-

hafizmasran said... [Reply Here Bebeh!]

napa x leh..nnati x jadi lakk.asal yew?

hafizmasran said... [Reply Here Bebeh!]

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... [Reply Here Bebeh!]

@hafizmasran

oke. add fb akak, bg email ngan password kat sane k!

PUTRI LAGU said... [Reply Here Bebeh!]

tak menjadi lah akak.. errow.. dah 3 kali ulang..

Nurulchumel said... [Reply Here Bebeh!]

@PUTRI LAGU

mesti ada sumthink wrong tuh.
try again dik!

Nurulchumel said... [Reply Here Bebeh!]

@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... [Reply Here Bebeh!]

@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... [Reply Here Bebeh!]

akak, dah jd dh..
tenks kak utk tuto ni..;p

dhia adawiyah said... [Reply Here Bebeh!]

Wahhh .. menarik nyerrr . nak cuba boleh ? boleh ? boleh tau ..

dhia adawiyah said... [Reply Here Bebeh!]

;( .. mula - mula dah jadi dah .. tapi, bila bukak blog lagi sekali dah tak jadi .. dia jadi kecik je . ;9 * teringin nak buat ~

Nurulchumel said... [Reply Here Bebeh!]

@dhia adawiyah

mesti ada sumthing wrong neh..
try lagi oke!
:))

Syat0za Zai said... [Reply Here Bebeh!]

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

Kyra Hizrina said... [Reply Here Bebeh!]

sis nurul, ni linknyee...

http://www.kyrahizrina.com/2012/05/tuto-buat-tab-menu-comel-tepi-blog.html

dhia adawiyah said... [Reply Here Bebeh!]

tak jadi , kak .. sama juga .. akak boleh tolong buatkan ?

Nurulchumel said... [Reply Here Bebeh!]

@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..

Maria..... said... [Reply Here Bebeh!]

sis untuk URL,mcm mana ea..kurang paham part tu,mohon bantuan..hihi

Fie_zah said... [Reply Here Bebeh!]

Akak,,, kalau kita nak letakkan dia kt bawah sikit edit kat mana eh???
plizz help me....

Nurulchumel said... [Reply Here Bebeh!]

@Fie_zah

utk tu, adik kena adjust sikit bahagian width dengan height dekat code tu.. try and error, smpai jadi k!
:)

sk tanjung batu said... [Reply Here Bebeh!]

assalamualaikum, awak. leh tak share mana awak dpt lagu shae ni..sedap la rentak dia... saya cari tak jumpa

Nurulchumel said... [Reply Here Bebeh!]

@sk tanjung batu

Awak leh jumpa dekat sini..

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

Sy amek dr sini and convert dlm blog.. :)

Faziana Izaty Abdul Rahim said... [Reply Here Bebeh!]

Da jd! Thanks! Tp camne nk link an bnde alah tu dengan tab kte ye?

Faziana Izaty Abdul Rahim said... [Reply Here Bebeh!]

Da jd! Thanks! Tp camne nk link an tab tu dgn blog kte?

✿ Link for Blogwalking View ヅ

300 x 250
Pretty Blinking Hello Kitty
© Copyright 2009 - 2016 | Full Designed by ✿ Nurulchumel's Properties ヅ | All Rights Reserved™