Membuat Menu Navigasi Dengan JQuery

Diposkan oleh Hery Prasetyo Friday, April 16, 2010
بسم الله الرحمن الرحيم

Membuat Menu Navigasi Dengan JQueryMembuat Menu Navigasi Dengan JQuery. terkadang HAPIA Mesir sering ditanya tentang cara membuat menu navigasi, banyak sekali tutorial yang menyajikan cara membuat menu ini. mulai dari yang paling sederhana sampai yang menggunakan perpaduan antara code CSS dengan JQuery.

Berikut adalah cara membuat menu navigasi menggunakan CSS dan JQuery yang HAPIA Mesir sajikan bersumber dari Net Tuts dengan beberapa penyesuaian. Untuk Melihat DEMO silahkan klik link dibawah ini :

Membuat Menu Navigasi Dengan JQuery


Cara Membuat Menu Navigasi Dengan JQuery adalah sebagai berikut :

- Login keBlogger dengan account anda.
- Pergi ke "Tata Letak" kemudian "Edit HTML".
- Cari code ]]></b:skin> untuk meletakkan code CSS berikut diatasnya :

#container {
width: 1000px;
margin-top:-10px;
}

ul, li {
margin: 0;
padding: 0;
}

#blob {
background: #0b2b61;
border-right: 1px solid #0059ec;
border-left: 1px solid #0059ec;
position: absolute;
z-index: 1;
top: 0;
background: -moz-linear-gradient(top, #0b2b61, #1153c0);
background: -webkit-gradient(linear, left top, left bottom, from(#0b2b61), to(#1153c0));
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-moz-box-shadow: 2px 3px 10px #011331;
-webkit-box-shadow: 2px 3px 10px #011331;
}

#nav {
padding:5px;
position: relative;
background: #292929;
float: left;
}

#nav li {
float: left;
list-style: none;
border-right: 1px solid #4a4a4a;
border-left: 1px solid black;
}

#nav li a {
color: #e3e3e3;
z-index: 2;
position: relative;
cursor: pointer;
float: center;
font-size: 20px;
font-family: helvetica, arial, sans-serif;
text-decoration: none;
padding: 30px 52px;
width: 100%;
}

- Simpan Template.

- Pergi ke "Elemen Laman".
- Tambah Gadget dan pilih "HTML/JavaScript".
- Rata-rata template dari blogger telah terpasang "tambah Gadget" dibawah Header. jika belum anda silahkan cari tutorial untuk membuat gadget dibawah Header.
- Copy paste code berikut kedalamnya :

<div id="container">

<ul id="nav">
<li id="selected"><a href="/">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="#">Blogging Tips</a></li>
<li><a href="#">Menu Navigasi</a></li>
<li><a href="#">Contact</a></li>
</ul>



</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://hapiajavascript.googlecode.com/files/NavScript.txt"></script>

<script type="text/javascript">
$('#nav').spasticNav();
</script>

- Simpan.

# width: 1000px; adalah lebar menu navigasi.
# font-size: 20px; adalah ukuran font pada menu navigasi.
# padding: 30px 52px; adalah jarak antara tulisan dengan garis atas dan bawah dengan nilai 30 pixel dan garis samping kanan dan kiri dengan nilai 52 pixel.

Selamat Mencoba dan Happy Blogging.

Sekalian ingin memajang 2 award dari sahabat HAPIA Mesir. dan awardnya sebagai berikut :

award dari sahabat
Dari Planet Aqidah

award dari sahabat
Dari Bunglon Blog


Jika postingan ini dirasa berguna bagi yang lain. silahkan share untuk berbagi.

Dapatkan Update Terbaru Dari HAPIA Mesir, Masukan Email Anda :

HAPIA Mesir Readers

Bookmark and Share

Direkomendasikan Untuk Dibaca :

29 Responses to Membuat Menu Navigasi Dengan JQuery

  1. aryadevi Says:
  2. selamat atas Award-nya dan amankan postingannya( simpan )

     
  3. eky ni,kalo dicoba di blogspot saya.makasih kawan...

     
  4. allisa Says:
  5. welcome back please

     
  6. Nah.. Ini sedikit membantu untuk membuat Tamabhan Ilmu Membuat Blog

     
  7. Kolom ponsel Says:
  8. Gak salah mampir lagi kesini, ternyata ada info baru, jadi nambah ilmu buat ngeblog...
    Langsung di bookmarklah biar nanti mudah nyarinya.

     
  9. Rock Says:
  10. Kayaknya keren nich...
    Simpan dulu ahhh...

     
  11. Boleh juga sobat panduannya, coba dipraktekkan.
    btw: link udah dipasang sob pls cek, and pasang juga aku ya.., tks

     
  12. Blogais Says:
  13. wah hapia bagus nih trik2nya mau coba ah ganti dulu ya

     
  14. BeDa Says:
  15. Alhamdulillah dapat ilmu blogger lagi. Ala kulli hal, blognya sudah jadi profesional semua ya, apalagi yang artikelislami.com (Tidak pakai gratisan blogspot lagi). Semoga sukses

     
  16. HAPIA Mesir Says:
  17. BeDa@ alhmdllh mas muchlisin... yang satunya alhmdllh dapat dibelikan sama teman..jadi alhmdllh dapet dot com....

     
  18. keren sobt... ntar aku coba dech... thanks ya...

     
  19. harto Says:
  20. selalu ada yang baru kalo bersilaturahim ke rumah sahabat.
    trims yaa atas ilmunya sangat membantu, sukses selalu n tetap semangat.

    barang siapa yang mau mengamalkan apa yang telah didapatkannya, niscaya Allah akan membuka ilmu yang terpendam

     
  21. Maya Says:
  22. Keren abis mas, numpang tenar ya ....

     
  23. heryanto Says:
  24. wah mantep nih, ane test deh,

     
  25. Rizky2009 Says:
  26. kkeren nih master, kira2 aq pasang d blog q bagus g yah

     
  27. Bunglon Blog Says:
  28. asalamualikum...
    wah seru sob dari sampelnya lebih smoot yach pake jQuery,
    ini perlu di bookmark dl untuk dipelajari..
    thanks udah berkenan menerima award nya sobat..
    Sukses Slalu!

     
  29. Assalamu'alaikum...ilmu bagus lagi nih.....makasih kiyai////

     
  30. mmm.. mau tanya gratisan Sob Hapia apakah Jquery sama seperti java script..hhhee...mau cobain nanti

     
  31. aanku91 Says:
  32. makasih bro.... dicoba dulu ah..

     
  33. Syam Oby Says:
  34. mas hapia bener benr ngerti yg oby perlu'iin....
    di save dlu yah mas....
    ntar kalo ol di skul oby praktekin....
    lagi BW... gak enak kalo di campur edit template blog
    ^_^

    dah lama pingin nambah menu horizontal di bloog

     
  35. mesti tenang nih kalau mau dipraktekkan

     
  36. oke saya bookmark dulu sahabat

     
  37. munir ardi Says:
  38. mantap tutorialnya, mesti saya praktekkan di blog lain dulu soalnya saya sering sekali error kalau utak-atik begini

     
  39. nah ini mas yang saya suka, tentang bikin menu navigasi
    soalnya utak-atiknya hanya yang biasa-biasa saja mas, makanya blog saya kaku karena menu nya gak cantik,hehehe

     
  40. mantap bro infonya.

     
  41. Urang Bogor Says:
  42. Wew... It's Very good....
    Nice Info... You are the best one....!!!

     
  43. qoscious Says:
  44. thankssss

     
  45. thank's ilmux,

     
  46. assalam..maaf saya bru bgt didunia blog ini..mo tnya dong mas/pak
    kalo misalnya link yang mau dimasukkin itu lebih dari 1 gimana yah?
    misalnya mau masukkin lebih dari 1 entri post (lebih dri 1 link ) ke dalam menu "product" ..

    itu gmna caranya yah,,bingung .
    terimakasih..

     

Post a Comment