Drop Down MenusCSS Drop Down MenuPure CSS Dropdown Menu

January 29, 2013

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 :
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 ^^

10 comments:

  1. @Fya Pelangi : Alhamdulillah. sama sama :)

    ReplyDelete
  2. Salam... jemput join giveaway saya d http://www.rararoo.blogspot.com/2013/02/fabuloous-giveaway.html
    dan menangi barangan korean Cosmetic seperti The Face Shop, Etude House dan Tony Moly :)

    ReplyDelete
  3. @Fara Fiza : wassalam. thanks for invite me :)

    ReplyDelete
  4. alaa, x pnjg le... yui guna simple template..

    ReplyDelete
  5. @Yui Bieyna : owh kena bagi sampai sama lah..

    ReplyDelete

Thank you for comment. Come again :)

WARNING!
AKTA 588, AKTA KOMUNIKASI DAN MULTIMEDIA 1998
Seseorang yang menggunakan applikasi dengan memulakan penghantaran apa-apa komen, permintaan, cadangan atau komunikasi lain yang lucah, sumbang, palsu, mengancam atau jelik sifatnya dengan niat untuk menyakitkan hati, menganiayai, mengugut atau mengganggu orang lain; atau tanpa mendedahkan identitinya dan dengan niat untuk menyakitkan hati, menganiayai, mengugut atau mengganggu mana-mana orang di mana-mana nombor atau alamat elektronik, adalah melakukan satu kesalahan dan boleh didenda tidak melebihi RM 50,000.00 @ dipenjarakan selama tempoh tidak melebihi 1 tahun @ kedua-duanya.