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,
author image

FAQIHAH HUSNI

Hi! I'm the writer and author of this webpage. Currently studying in SM Sains Kubang Pasu or know as KUPSIS in Kedah. A Kedahan girl for sure! 2017 is my senior year there and I'm fighting to 9A+ in SPM. Do pray the good result for me and others 1317 warriors. Thank you for your time :)

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

Budi Bahasa Budaya Kita