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,
Posted at

26 comments:

  1. Hajjatul Darwisyah27 November 2012 at 12:11

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

    ReplyDelete
  2. Unknown27 November 2012 at 12:19

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

    ReplyDelete
  3. Pixie Dust27 November 2012 at 13:17

    Thnks Kihah for this tuto

    ReplyDelete
  4. Nur Athirah27 November 2012 at 15:14

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

    ReplyDelete
  5. ✿Hadifah Sabri✿27 November 2012 at 15:25

    Tanks Qihah. Dah jadi :D

    ReplyDelete
  6. Tutty Lolipop 27 November 2012 at 17:31

    thanks kak buad tuto nie dh lama cari

    ReplyDelete
  7. faqihahhusni27 November 2012 at 18:36

    @Nur Athirah Boleh :)

    ReplyDelete
  8. Ruqaiyah Amanina27 November 2012 at 22:22

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

    ReplyDelete
  9. Hamizah :D27 November 2012 at 22:25

    Amik ya

    ReplyDelete
  10. Anonymous27 November 2012 at 22:57

    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
  11. faqihahhusni28 November 2012 at 12:27

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

    ReplyDelete
  12. Rainbowish Art30 November 2012 at 22:15

    ainin gna. thanks :)

    ReplyDelete
  13. Nabila Abdul Aziz2 December 2012 at 16:06

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

    ReplyDelete
  14. ♥ Lia Abdillah ♥3 December 2012 at 00:23

    lia guna! tyvm

    ReplyDelete
  15. cik lisa7 December 2012 at 14:01

    Thanks kihah , hehe

    ReplyDelete
  16. Anis Amila10 December 2012 at 14:47

    kalau untuk blogskins ?

    ReplyDelete
  17. Liesa Azemi11 December 2012 at 11:25

    Thanks buat tuto ni :D

    ReplyDelete
  18. Aisya Hazirah12 December 2012 at 17:13

    Thanks Kihah :)

    ReplyDelete
  19. Azie Iesya13 December 2012 at 08:54

    Thanks. saya credit kat awak yaa :D

    ReplyDelete
  20. Aina Farahin13 December 2012 at 22:23

    Thanks for the tuto :D

    ReplyDelete
  21. MK15 December 2012 at 18:49

    thank you! dah lama saya cari tuto ni!

    ReplyDelete
  22. Nurrul Hazieqah20 December 2012 at 14:50

    Thanks Nurrul guna tuto ini dan menjadi ! ! ! ^^

    ReplyDelete
  23. Maria H26 March 2013 at 13:02

    Assalamualaikum, terima ksih Faqihah!!

    ReplyDelete
  24. amy_amaniey26 April 2013 at 16:17

    tq amik dah =)

    ReplyDelete
  25. anshmnf3 May 2013 at 00:15

    Thanks qihah :)

    ReplyDelete
  26. aku dan tawarikh8 June 2013 at 00:48

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

    ReplyDelete

Your words defines you

Subscribe to: Post Comments (Atom)