Tutorial Buat Simple Navigation Bar with Background

tuto ni untuk adik hanim sebab dia requestkan. btw ni code saya ye. di ilhamkan dari code asal dari blog adik qihah tapi sudah di olah dan di ubah oleh saya. hehe sebenarnya ni simple navigation bar cuba dia tambah background dekat belakang tu je. so bentuk navigation bar ni seperti di bawah :

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>
a.nav{
display:inline-block;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
padding:3px;
margin:5px;
width:70px;
text-decoration:none;
font-family:calibri;
font-size:15px;
height:20px;
text-transform:uppercase;
color: #fff;
background: #FFD1D1;
text-align:center;
cursor:vertical-text;
}
a.nav:hover{
color: #fff;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
background:#AEEFB5;}
</style>
<div style="background: #FAAFBE; border-bottom: 1px dashed #fff; border-top: 1px dashed #fff;"/><center>
<a class="nav" href="LINK">NAME 1</a>
<a class="nav" href="LINK">NAME 2</a>
<a class="nav" href="LINK">NAME 3</a>
<a class="nav" href="LINK">NAME 4</a>
</center></div>
<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 !

cantik bukan? hehe oraitt try lah ^^