Tutorial Buat Simple Navigation Bar with Background (Style II)

petang yang mulia ni *mulia lah sangat kan* :D haha act nina nak share dengan korang satu lagi tuto seperti title kita ni lah. yang versi style I yang macam INI. hehe ha macam dekat bawah ni ok paham?

LIVE PREVIEW

Langkah 1 :

mula mula korang copy code dekat bawah ni dan pastekan di ruangan http://htmledit.squarefree.com/ (ada tulisan nanti delete dulu baru paste code ni). korang boleh edit di situ dulu dan dia ada preview terus tab korang tu. senang sikit kan..

<style>
.navi{
padding:5px;
display: inline-block;
font: 13px Century Gothic;
font-weight:bold;
text-align:center;
margin:2px;
color:white;
text-decoration:none;
letter-spacing:4px;
-webkit-transition-duration:0.5s;
}
.navi:hover{
background:#ffffba;
color:black;
border-radius:5px;
text-decoration:none;
-webkit-transition-duration:0.5s;
}
</style>
<center><div style="padding:3px; background:#ffcfdc; width:895px;">
<a class="navi" href="LINK 1">NAME 1</a>
<a class="navi" href="LINK 2">NAME 2</a>
<a class="navi" href="LINK 3">NAME 3</a>
<a class="navi" href="LINK 4">NAME 4</a>
</div></center>
<br />

Langkah 2 :

dah siap edit ? ok pergi dashboard -> design --> add a gadget --> HTML/Javascript

Langkah 3 :

copy code tadi yang sudah di edit dan pastekan dekat ruangan HTML/Javascript tu

Langkah 4 :

save !