tutorial #48 :Colourful Navigation Bar

creds ; dieyna via hahazirah
Assalamualaikum :face66:Buat apa ? Sihat ?Huhu .Macam orang gila tanya sorang-sorang .
Okay tutorial ni teddy tanya a long long long time ago . Tapi sekarang baru nak buat . Haha sungguh sedih . Tak payah nak ngegada . Kang ada yang kena Bako kang . Haha .

#contoh
Tahu tak colourful navigation bar tuh macam mana ? Actually ianya sejenis tab menu yang berwarna warni . Kalau korang ingat balek masa my blog color purple dulu ada pakai menu bar macam ni kan ?Comel je kan ? Sekarang aku bagitahu cara nak buat dia okay .Mari mula

1Macam biasa Log in dulu then dashboard > design >edit layout > add a gadjet >html javascript

2Awk copy code ini dan paste
<div style="text-align: center;"><span style='-moz-border-radius: 5px; background-color:#ff6666; padding: 10px 30px 10px 30px;'><a href="http://YOUR_LINK_HERE.com">LINK</a></span> <span style='-moz-border-radius: 5px; background-color:#ff6666; padding: 10px 30px 10px 30px;'><a href="http://YOUR_LINK_HERE.com">LINK</a></span> <span style='-moz-border-radius: 5px; background-color:#ff6666; padding: 10px 30px 10px 30px;'><a href="http://YOUR_LINK_HERE.com">LINK</a></span> <span style='-moz-border-radius: 5px; background-color:#ff6666; padding: 10px 30px 10px 30px;'><a href="http://YOUR_LINK_HERE.com">LINK</a></span> <span style='-moz-border-radius: 5px; background-color:#ff6666; padding: 10px 30px 10px 30px;'><a href="http://YOUR_LINK_HERE.com">LINK</a></span> <span style='-moz-border-radius: 5px; background-color:#ff6666; padding: 10px 30px 10px 30px;'><a href="http://YOUR_LINK_HERE.com">LINK</a></span><br /><br /></div>


4Sekarang edit pulak
Biru :Tukar dengan url/link page korang
Merah : Tukar dengan title menu
Pink :untuk radius (bulatan) boleh tukar kan dengan yang korang suka *contoh tukar kepada 10px untuk lebih melengkung
Hijau : Background menu bar . Boleh tukar dengan color yang korang suka kat sini
Ungu : Size padding (kelebaran dan ketinggian) boleh diubah dengan menukar no px

5Then save . Tak payah letak title okay .Psssttt , teddy mintk menubar 4 je tapi yang ni ada 6.
Dun worry , be happy . awk cuma perlu padam code yang bermula dari
<a href="http://YOUR_LINK_HERE.com">LINK</a></span> <span style='-moz-border-radius: 5px; background-color:#ff6666; padding: 10px 30px 10px 30px;'>

Got it ?Okay tu je
:156:

5 comments:

Cik Meya Teyo ♥ said...

maceh ! ^^

Cik Meya Teyo ♥ said...

eh salah tutor daaa ~ HAHA . tutor meya request tu takde lagi . ><'
malu ... *larikkks

We Care We Share said...

hey , firstly , tengs for the tuto ya ;D and sori , na tanye skeyt , na tahu url/link page macam mane ? sori , sy agak kuno !

Apit said...

@Nur Dania Batrisyia Welcome . Oh nanti apit terang kan dekat post tutorial yg selanjut nya k ;)

dalilah said...

hah ! tade pon ! ta jadyy ! humm .
ley tnye ? menutab u kat bwah gamb u tu canne nak buat ??

Subscribe