Friday, 20 April 2012

TUTORIAL: Navigation Bar

Hi There ^ ^

Tutor kali ni macam mana mau buat Navigation Bar macam saya tu. Tidak tau yang mana satu ? meh tengok ni :

klik untuk tumbesaran anda :P

Step 1:
Design > Add a gadget > Html/JavaScript

Step 2:
Copy code di bawah ni dan paste kan di ruangan tu ...

<center><span class="Apple-style-span" style="font-family: calibri; font-size: medium; ">
<span id="nav" style="font-size: 11px; font-family: calibri; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: #D8D8D8; color: rgb(255, 255, 255); text-align: center; text-transform: uppercase; padding-top: 5px; padding-bottom: 5px; padding-left: 7px; padding-right: 7px; height: 21px; cursor: default; ">
                                   
<a href="URL LINK" style="color: rgb(110, 110, 110); text-decoration: none; -webkit-transition-duration: 0.5s; ">Tajuk 1</a></span>
<span id="nav" style="font-size: 11px; font-family: calibri; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: #D8D8D8; color: rgb(255, 255, 255); text-align: center; text-transform: uppercase; padding-top: 5px; padding-bottom: 5px; padding-left: 7px; padding-right: 7px; height: 21px; cursor: default; ">

<a href="URL LINK" style="color: rgb(110, 110, 110); text-decoration: none; -webkit-transition-duration: 0.5s; ">Tajuk 2</a></span>
<span id="nav" style="font-size: 11px; font-family: calibri; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: #D8D8D8; text-align: center; text-transform: uppercase; padding-top: 5px; padding-bottom: 5px; padding-left: 7px; padding-right: 7px; height: 21px; cursor: default; ">

<a href="URL LINK" style="color: rgb(110, 110, 110); text-decoration: none; -webkit-transition-duration: 0.5s; ">Tajuk 3</a></span></span>
<span id="nav" style="font-size: 11px; font-family: calibri; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: #D8D8D8; text-align: center; text-transform: uppercase; padding-top: 5px; padding-bottom: 5px; padding-left: 7px; padding-right: 7px; height: 21px; cursor: default; ">

<a href="URL LINK" style="color: rgb(110, 110, 110); text-decoration: none; -webkit-transition-duration: 0.5s; ">Tajuk 4</a></span>
<span id="nav" style="font-size: 11px; font-family: calibri; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: #D8D8D8; text-align: center; text-transform: uppercase; padding-top: 5px; padding-bottom: 5px; padding-left: 7px; padding-right: 7px; height: 21px; cursor: default; ">
</span></center></div>


Step 3:
Edit lah code tu suka hati kamu ^ ^

Red: Letak Url 

Blue: Tajuk

Pink: Warna background

Step 4 : 

save ! :)






5 comments:

Zaza said...

thanks 4 the tuto :)

Schasha Ajamain said...

thx dear sandra..

Nurul Aisyah said...

thanks kak! :)

mika paramore said...

i use your code . can i ? thanks <3 :*

Diera Tekikushika said...

bole tak tunjukkn mcm mana nak pasang menu tab tu supaya terpisah dari body . Macam awak pya ni... sy buat dia bercantum lah.. =(