27 November 2012

Tutorial : Simple Navigation Bar

السّلا م عليکم ورحمةالله وبرکة | Salam Sejahtera

Ni navigation bar macam qihah guna sekarang ni. Banyak yang request, so, meh qihah ajar. Ni qihah punya own codes ok. No re-post. tq

LIVE PREVIEW:

1- Blogger > Dashboard > Layout > Add A Gadget > HTML/JavaScript
2. Copy codes ni dan pastekan kat ruangan HTML/JavaScript
<style>a.nav{
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
margin:5px;
display:inline-block;
text-align:center;
background: #eee;
color:#000;
width:90px;
padding:4px;
font: 13px Franklin Gothic Demi Cond;}

a.nav:hover{
color: #fff;
background:  #EBD6FF;
-moz-box-shadow: inset 0 0 5px 5px #EBD6FF;
-webkit-box-shadow: inset 0 0 30px 30px #EBD6FF;
box-shadow: inset 0 0 30px 30px #EBD6FF;}</style>

<div style="background: #CAC7D9; border-bottom: 1px dashed #fff; border-top: 1px dashed #fff;"/><center>
<a class="nav" href="URL/LINK">PERKATAAN</a>
<a class="nav" href="URL/LINK">PERKATAAN</a>
<a class="nav" href="URL/LINK">PERKATAAN</a>
<a class="nav" href="URL/LINK">PERKATAAN</a>
</center></div>
3. Save

Color : Tukarkan kepada background korang ye. yang ni background yang kat belakang tu. bukan background tab menu.tukarkan kepada color codes anda. boleh cari kat SINI
Color : Ni baru background menu. tukarkan kepada color codes anda. boleh cari kat SINI

Kalau nak tambah lagi, letak ni
<a class="nav" href="URL/LINK">PERKATAAN</a>
Jadi tak? Bye, Assalamualaikum,

26 comments:

  1. Dah lama tunggu kihah buat tutorial:) , thanks kihah sebab buad tutorial neyh :) .! Btw , camna nak buad shaking header macam kihah tuh ?

    ReplyDelete
  2. yeay! akhirnya kihah buat jugak tuto ni. thank you :)

    ReplyDelete
  3. Thanz Kihah for this tuto.. kalau background yg belakang tu nk tukarkan kpd gmbr corak2, boleh x?

    ReplyDelete
  4. thanks kak buad tuto nie dh lama cari

    ReplyDelete
  5. adik qihah , sy guna ok . thanks for tuto :)

    ReplyDelete
  6. salam qihah , i dah try buat jadi.. Tapi macam mana nak kasi dia sama besar dengan widht background blog kita ye?? code mne kena ubah ye?? =D

    ReplyDelete
  7. @Azwar Syuhada Kalau awak guna template simple memang tak kan sama.

    ReplyDelete
  8. Thanks Kihah :) soryy nabila xprasan kihah dah buat tuto ni sebabnya tuto kihahnya banyak sangat ...Trimas yer ^_^

    ReplyDelete
  9. Thanks. saya credit kat awak yaa :D

    ReplyDelete
  10. thank you! dah lama saya cari tuto ni!

    ReplyDelete
  11. Thanks Nurrul guna tuto ini dan menjadi ! ! ! ^^

    ReplyDelete
  12. Assalamualaikum, terima ksih Faqihah!!

    ReplyDelete
  13. akhirnya berjaya juga buat.. thanks utk tutorial yg simple nih...

    ReplyDelete

Your words defines you