16 April 2013

Tutorial : Navigation Bar


1. Design > Add a gadget > Html/JavaScript
2. Copy code di bawah ni dan paste kan di ruangan Html/JavaScript
<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>
3. Save. Kalau korang nak letak bawah header, drag Html/JavaScript ke bawah header.

Nota Tuto :
R : Warna background
O : Url link 
B : Tajuk

P/S : Kalau tak jadi, cakap.

No comments:

 
Copyright© All Rights Reserved by Khairunnisa Hassan