share all free for you

Advertiser Here

Cara Membuat Menu Navigasi Kwicks Dengan jQuery

BLOGCUNAYZ - Hallo sobat cunayz semua akhirnya saya bisa posting lagi mohon maaf untuk sobat cunayz semua yang "terlalu lama menunggu" postingan baru saya,... wkwkwkOk lah langsung saja ke topik.Mungkin untuk sekian kalinya BLOGCUNAYZ membagi ilmu cara membuat Menu Navigasi,kali ini pun saya akan share Cara Membuat Menu Navigasi Kwicks Dengan jQuery.

Berikut Screenshotnya :



Bagaimana tertarik untuk memasangnya di blog sobat,,?? Jika jawabannya ya silahkan ikuti langkah-langkah membuatnya di bawah ini :

Seperti biasanya masbro masuk dulu Dasboard >> Template >> Centang Expands Widget Templates

Lalu taruh kode berikut di atas ]]></b:skin>

.kwicks{height:50px;list-style:none;margin:0;padding:0;position:relative;width:840px;z-index:2
}
.kwicks li{cursor:pointer;display:block;float:left;height:50px;overflow:hidden;padding:0;width:120px;z-index:2}
.kwicks li a{background-image:url(http://4.bp.blogspot.com/-e1c5hdvd0MQ/TbgSHi-7EEI/AAAAAAAAAzs/Y9aTBHEgh84/s1600/menu%2Bjquery%2Bpelajaran%2Bblog.jpg
);background-repeat:no-repeat;cursor:pointer;display:block;height:50px;outline:none;text-indent:-9999px;z-index:2}
#kwick1 a:hover{background-position:0 -50px!important}
#kwick2 a{background-position:-190px 0}
#kwick2 a:hover{background-position:-190px -50px!important}
#kwick3 a{background-position:-380px 0}
#kwick3 a:hover{background-position:-380px -50px!important}
#kwick4 a{background-position:-570px 0}
#kwick4 a:hover{background-position:-570px -50px!important}
#kwick5 a{background-position:-760px 0}
#kwick5 a:hover{background-position:-760px -50px!important}
#kwick6 a{background-position:-950px 0}
#kwick6 a:hover{background-position:-950px -50px!important}
.kwicks li ul a{float:left;width:12em}
.kwicks ul ul{top:auto}
.kwicks li ul ul{left:12em;margin:0 0 0 10px}
.kwicks li:hover ul,#nav li li:hover ul,#nav li li li:hover ul,#nav li li li li:hover ul{display:block
}

Kemudian cari kode <head> dan taruh kode jQuery berikut tepat di atasnya

<script src='https://sites.google.com/site/cunayz182/files/jquery-1.2.3.js' type='text/javascript'/>
<script src='https://sites.google.com/site/cunayz182/files/jquery.easing.1.3.js' type='text/javascript'/>
<script src='https://sites.google.com/site/cunayz182/files/jquery.kwicks-1.5.1.js' type='text/javascript'/>

Selanjutnya sobat tinggal pilih mau di taruh dimana menunya misalnya di widget caranya Tambah Widget >> HTML/JavaScript and masukin deh kodenya nih ado di bawah :

<div class='kwickswrap'>
<ul class='kwicks'>
<li id='kwick1'><a href='#' title='halaman utama'>Home</a></li>
<li id='kwick2'><a href='#' title='daftar isi.'>Blog</a></li>
<li id='kwick3'><a href='#' title='about'>About</a></li>
<li id='kwick4'><a href='#' title='futures'>Portfolio</a></li>
<li id='kwick5'><a href='#' title='contact us'>Contact</a></li>
<li id='kwick6'><a href='http://pelajaran-blog.blogspot.com/' title='recomended links'>Resource</a></li>
</ul>
</div>
</td>
<script type="text/javascript">
$().ready(function() {
$('.kwicks').kwicks({
max : 190,
duration: 800,
easing: 'easeOutQuint'
});
});
</script>

Selanjutnya tinggal simpan,gimana guampang kan bikinnya,,?? jika ada pertanyaan jangan sungkan untuk meninggalkan jejak di kotak komentar trim atas kunjungannya ^_^

Title : Cara Membuat Menu Navigasi Kwicks Dengan jQuery
URL : http://blogcunayz.blogspot.com/2011/12/cara-membuat-menu-navigasi-kwicks.html
Anda boleh menyebar Luaskan atau Meng Copy-Paste Artikel ini bila dapat bermanfaat bagi teman-teman anda, Namun jangan lupa untuk meletakkan Link Cara Membuat Menu Navigasi Kwicks Dengan jQuery sebagai Sumbernya.

Sudah ada [ 127 komentar ] bagaimana pendapat Anda,,?

  1. wihh keren sob menu nya,, =)) manteb,, :D

    ReplyDelete
  2. wkwkwkwkw ini yang kemaren ente kasih liat ke ane kan , mantappp keren abis cuyzzz =)) =))

    ReplyDelete
  3. sayang ga cocok sama baju rombeng ane :(

    ReplyDelete
  4. @ Rama88 : selamat sob untuk pertamaxnya,,:)) thank sob =))

    @ Mbah Qopet : selamat mbah buat keduaxnya =)) oh gitu ya sob,emang menu ini cocoknya di baju2 yang warnanya item :)

    ReplyDelete
  5. @ Musa Khairul Umam : thank masbro :))

    ReplyDelete
  6. keren....tp sayang nggak cocok sama template saya

    ReplyDelete
  7. waahhhhh..., kereeennn...comen sy agak lebay yaa bro heheh..., tp emank kereen ko'..., mantap gan, kapan2 aq nyoba ke blog sy yg satu yaa., thx ilmu gan :) :)

    ReplyDelete
  8. wahhh mantap banget ya kelihatan sekali efek jquery dari menu kwicks ini. kenapa namanya kwicks ya? mirip merek traktor indonesia ya hhehehe

    ReplyDelete
  9. :D ijin praktek stelah UAS slesai :D

    ReplyDelete
  10. baru upadate ya gan heheh,
    kayanya tutorial ini sudah ada sejak kemaren, cuman bedanya ada slide-slide gitu sama shadow mungkin...

    ReplyDelete
  11. jauh banget dari Pertamax hahaha

    weww keren yah hihi happy blogging mas :D

    ReplyDelete
  12. . gan ayo tukar link
    sama - sama di sidebar
    link blogcunays sudah di pasang silahkan di cek
    disini
    blognya-reggy.blogpsot.com

    ReplyDelete
  13. eh itu kyknya dibikin ngga pake jquery bisa kyknya, pake nya ntar bg position sama transisi dan mainan padding, tapi itu yg saya bayangin sih, belum praktek, hohohoho :D

    ReplyDelete
  14. Wahh keren banget, Btw gak berat nigh Gan?

    ReplyDelete
  15. ow yang seperti itu y sob, ane lebih suka menu dropdown

    ReplyDelete
  16. @ DODE-XP.COM : thank sob

    @ IT-Soft Center : oh gitu ya sob,trim atas kunjungannya

    @ Rohis Facebook : wkwkwk biasa aja sob:)),sama2 sob

    @ Farixsantips : wkwkwk gak tau juga udah dari sononya sob,eh sorry nih kayaknya agak lambat ane mau ucapin happy brithday my best friends :)

    ReplyDelete
  17. @ Galau'ers : silahkan gan,emang belum beres ya UASnya??

    @ Ф дфѕдғфдғ Ф : iya gan baru sempet nih,iya kali gan tapi ane baru share sekarang wkwkwk

    @ Sinisterys : wkwkwk mungkin lain kali mas :),,happy blogging juga

    @ Reggy Zian Purnama : ok gan lain kali pesannya di halaman link exchange ya gan :)

    ReplyDelete
  18. @ ladidacafe : bisa juga sob pake css coba sobat bikin tar ane liat pasti bagus sob :)

    @ MHARJIPES.COM : gak gak itu di halaman demo yang bikin berat loading gambar narutonya gan :)

    @ Liandri eko : oh sama saya juga sob

    ReplyDelete
  19. @ Rizky Wardiansyah : ohh no problem, its all about insting *ehh ngomong apa tadi? jadi ngaco akunya =))

    ReplyDelete
  20. simpan dulu aja, keren, tp gak cocok sama blog saya, ada warna abu abu gak slain item :)

    ReplyDelete
  21. oke okeee... ehehehee

    btw itu js yg pertama kyknya error deh, cuman "ttps" , kurang "h" :D

    ReplyDelete
  22. demonya aja keren banget mas, tp udah berat kagak blog kita kalau udah di buat yang seperti itu

    ReplyDelete
  23. ohhh gitu ya sob sudah dari sananya :) ehhh makasih banyak ya sob sudah mau mengucapkan selamat ulang tahun ane yang ke 15 hehehee :) mantep deh!!

    ReplyDelete
  24. Sipp,, Bisa di Coba lgi hheh,,


    menarik buangget,

    Soory klo Mampir lgi nigh Sobat

    ReplyDelete
  25. @ Galau'ers : silahkan sob :)

    @ Ф дфѕдғфдғ Ф : hahaha =)) masbro2 ada2 aja :))

    @ Ardha : silahkan di ctrl+D dulu :)

    @ ladidacafe : oh iya sob,, thank udah kasih tau ane :)

    ReplyDelete
  26. @ WahidBlog : itu di page demonya berat sama gambar naruto sob,,tar ane copot deh.

    @ Farixsantips : hahaha =)) =)) ya begitulah bunyinya,kakinya bertanduk hewan apa namanay,,??,... wah ke 15 cool semoga masbro makin jaya :)

    @ MHARJIPES.COM : hahaha :)) gak apa2 sob,,trim atas kunjungannya :)

    ReplyDelete
  27. gue apa adanya kok sobb, hahah adminnya baru bales ternyata... kmn aja tuh?

    ReplyDelete
  28. @ Ф дфѕдғфдғ Ф : bener sob hidup harus apa adanya bukan ada apanya,iya sob baru punya pulsa ane wkwkwk,,suram =)) =))

    ReplyDelete
  29. @ Rizky Wardiansyah : jiahhh baru isi pulsa ternyata *again... okeh salam kenal yaa masbro From sim kuring dari Tasikmalaya city hahayy

    ReplyDelete
  30. @ Ф дфѕдғфдғ Ф : ia sob wkwkwk,...oh orang tasik tok iyo2 salam kenal oge kang :)

    ReplyDelete
  31. ohh bisa juga ya pake ccara yg ky gini?
    manteb dah sob. semoga bermanfaat..

    oiya, ditunggu kunjungan baliknya ya.
    thanks :)

    ReplyDelete
  32. @ Outbound Malang : siap sob segera meluncur ke TKP :)

    ReplyDelete
  33. kakinya bertanduk? ayam jago dong huahahaha :D hehe iya gan hehe :) amin!

    ReplyDelete
  34. jalan2 kesini dlo :D
    sambil nunggu post barunya :D

    ReplyDelete
  35. bagus tuh gan. dilengkapi demonya juga. jadi ga penasaran

    ReplyDelete
  36. @ Farixsan Quilicuor (Faris Hardiyanto 177) : hahaha pinter2 wkwkwk =)) =))

    @ Dayz : trimakasih atas kunjungannya sob :)

    @ Fazri : trimakasih gan.

    ReplyDelete
  37. Tipsnya bagus saudaraku...
    Teruskan untuk berbaginya

    ReplyDelete
  38. @ abufarras : trimakasih sobat,siap laksanakan :)

    ReplyDelete
  39. Mantap Sobat... Mampir balik blog ane sobat... Ada postingan nhe... Comment ya... Thx

    Berbagi HACKING, TWEAKING, SOURCE CODE, SOFTWARE, GAME, TIPS N TRICK, dll

    ReplyDelete
  40. manu navigasinya top markotop sobat.Pengin pasang tetapi sepertinya templatenya saya tidak mendukung

    ReplyDelete
  41. mantapss nihh menunya tapi koq sobat gak make?

    ReplyDelete
  42. Mantap abis nih menux kapan2 di coba

    ReplyDelete
  43. @ Black Angel Syndicate : tadi ane udah main ke tempat ente sob + support juga :)

    @ cardiacku : manu?? menu kali sob wkwkwk,oh gitu ya sob,emang gak semua template cocok dengan menu ini

    @ randy oktaran : ane dah pasang dua style menu sob kalo pake yang ini jadi tiga dong sob :)

    @ system of blog : thank sob,sipt lah :)

    ReplyDelete
  44. sungguh bagus ilmunya
    aku jadi terpesona
    dan ingin mencoba....

    ReplyDelete
  45. @ anisayu : trimakasih kawan,hahay segitunya silahkan di coba kawan :)

    ReplyDelete
  46. Terbawax :D. Waduh liat demo nya keren gan ctrl + D dulu ah hehe

    ReplyDelete
  47. Mantab Sob...namabahin koleksi bookmark coding tricks gue..nice share and happy blogging

    ReplyDelete
  48. mampir lagi sob,, =)) =)) aman nehh adminnya :))

    ReplyDelete
  49. Jalan-Jalan lagi ah... Mampir balik ya sob...
    Jangan Lupa Follow balik... Ane dah Follow blog sobat..
    Berbagi HACKING, TWEAKING, SOURCE CODE, TIPS N TRICK, SOFTWARE, GAME, dll

    ReplyDelete
  50. dan sayangnya ane ga suka warna gelap , ga ada keren-kerennya gitu deh kalo hitam polos :o

    ReplyDelete
  51. aya naon sok atuh kumaha abi ngator teu ??? =))

    ReplyDelete
  52. @ Deganshah Putra : thank sob and silahkan di ctrl+D :)

    @ Iskaruji dot com : thank happy blogging juga

    @ Rama88 : aman terkendali sob =)) =)) kemana aja nih si masbro jarang main sekarang mah,,??

    @ Black Angel Syndicate : siap laksanakan sob

    @ Mbah Qopet : ah masa bukannya blog si mbah agak gelap ayo,,?? =)) =)) hahaha kunaon ari si mbah sok ngaco wae nyarios teh :)) :))

    ReplyDelete
  53. @ ichwan HAUSGAME : thank sob,silahkan sob :)

    ReplyDelete
  54. keren bagt sob menu navigasinya...

    ReplyDelete
  55. Ctr + D dulu ah,,, buat simpenan...:D

    ReplyDelete
  56. @ Aku mau gratisan : silahkan masbro,jiah simpenan selingkuhan dong wkwkwk ada2 aja si masbro mah =)) =))

    ReplyDelete
  57. Jalan-Jalan lagi sobat... Mampir Balik blog ane ya sob...
    Berbagi HACKING, TWEAKING, SOURCE CODE, TIPS N TRICK, SOFTWARE, GAME, dll

    ReplyDelete
  58. @ Black Angel Syndicate : trimakasih atas kunjungannya sobat,siap lah langsung meluncur ke tempat sobat :)

    ReplyDelete
  59. ditunggu tutorial keren selanjutnya :D

    ReplyDelete
  60. . gan..
    gmn caranya kalau kayak guest post hanay tampil guest booknya saja, seperti menu bar, widget hilang?

    ReplyDelete
  61. wiz, ajib bener jquerynya.. :D

    ReplyDelete
  62. lama juga gk update ni gan..., smg sehat2 aja bro ;)

    ReplyDelete
  63. Sajian terlezat nih sob.Izin reply ulang lagi demo sama apps.Terimakasih ya sob infonya.Sesuatu banget:D

    ReplyDelete
  64. waduh sob, aku udh gak mau utak atik kode lg ah.. pusing.. mending jln2 yuk tahun baruan... :D

    ReplyDelete
  65. @ Sinisterys : ok siap sob lagi cari nih wkwkwk =))

    @ WahidBlog : thank masbro sudah berkenan meramaikan suasana :)

    @ Reggy Zian Purnama : oh itu tinggal pake kode "display:none" (tanpa tanda kutip)

    @ awelqq : thank sob

    ReplyDelete
  66. @ Rohis Facebook : lagi libur dulu gan kan tahun baruan dulu wkwkw,ini post umurnya juga baru 3 hari sob

    @ Bisnis Online Blog : wkwkwk sesuatu ya sob =)) =))

    @ Penghuni 60 : wkwkwk lagi jenuh ya sob sama kode,,?? ayo siap tar ane main ke tempat ente siapin aja acaranya ya wkwkwk =)) =))

    ReplyDelete
  67. wah makasi gan, sangat membantu cara ini

    ReplyDelete
  68. Mampir lagi ah, sambil nungguin Taun baru.. :D

    ReplyDelete
  69. Jalan-Jalan Lagi... Mampir balik blog ane ya sob... Berbagi HACKING, TWEAKING, SOURCE CODE, TIPS N TRICK, SOFTWARE, GAME, dll

    ReplyDelete
  70. saya coba buat pake css3 dan nerapin ide saya itu, ngga sebagus ini jadinya ehehee..
    yg mirip cuman hover paddingnya aja --"
    mgkin perlu otak atik lagi, biar paling ngga mirip mirip dikit sama ini, hohohoho...

    ReplyDelete
  71. @ awelqq : trimakasih atas kunjungannya sob.

    @ Black Angel Syndicate : hatur thank you masbro

    @ ladidacafe : weh kren coba pake efek transisi sob

    ReplyDelete
  72. emang kenapa gan ayam jago? :o
    kunjungan lagi lah nunggu postingan terbarunya disini :D hehehe

    ReplyDelete
  73. asik asik.. keren sob

    ReplyDelete
  74. Berkunjung kembali sobat di sini

    ReplyDelete
  75. navbarnya keren abies sobat,,, boleh dicoba nih sobat...

    ReplyDelete
  76. Jalan-Jalan Lagi Sobat... Mampir balik blog ane ya sob...
    Berbagi HACKING, TWEAKING, SOURCE CODE, TIPS N TRICK, SOFTWARE, GAME, dll

    ReplyDelete
  77. @ Farixsantips : gak apa2 iseng2 aja wkwkwk,,weh masbro dah puang ya liburannya,,??

    @ Nagato Kurosaki : thank sob

    @ cardiacku : trimakasih atas kunjungannya sobat

    @ Asis Sugianto : silahkan sob

    @ Black Angel Syndicate : siap sob

    ReplyDelete
  78. Koment ane masuk spam ya masbro :D ?
    kok pada ngilang

    ReplyDelete
  79. @ Dayz Hidayat : gak ada kok sob,mungkin kaya punya si mbah kao om "IP" nya bermasalah,,??

    @ Farixsantips : eh lupa yang liburan kan masbro musa wkwkwk =)) =))

    ReplyDelete
  80. keren mas, tapi saya masih bingung terapinnya di wp saya

    ReplyDelete
  81. Wah beerkunjung lg sobat,
    untuk meramainkan Blog Sobat


    SELAMAT TAHUN BARU

    ReplyDelete
  82. keren sob menu navigasinya :D
    Happy New Year 2012

    ReplyDelete
  83. keren mas, saya mencoba untuk berkreasi lebih jau di web disain mungkin ndak skrg nunggu SMK mungkin. Bulan2 awal 2012 sy manfaatkan waktu sy untuk belajar dan belajar menikmati masa2 SMP dengan temen2 dan buat blog insyaAllah 1 minggu sekali update mas ;)

    salam buat anak2 blogdeal

    happy new year~~

    ReplyDelete
  84. @ Rizkyzone.com : thank mas,oh ente pake wp ya,,

    @ MHARJIPES.COM : trimakasih atas kunjungannya sobat :),, happy new year

    @ Aldio : thank sob,happy new year juga

    @ Cek Info : oh gitu ya sob,ane jadi kangen sama masa2 SMP wkwkwk,siap tar ane sampein :)

    ReplyDelete
  85. jalan jalan lagi kesini happy blogging mas

    ReplyDelete
  86. bleum sob..
    UAS ane tgl 9..
    mhon doa rstu ya :)

    ReplyDelete
  87. Jalan-Jalan... Maaf baru dateng dari liburan... hehe
    Mampir balik ya sob...
    Berbagi HACKING, TWEAKING, SOURCE CODE, TIPS N TRICK, SOFTWARE, GAME, dll

    ReplyDelete
  88. @ WahidBlog : trimakasih atas kunjungannya mas,,happy blogging juga

    @ Galau'ers : oh ia sip ta do'a in biar UASnya lancar

    @ Black Angel Syndicate : siap sob

    ReplyDelete
  89. ngga ada gehu disinimah *balik lagi ahh

    ReplyDelete
  90. @ Ф дфѕдғфдғ Ф : sekarang sudah ada sob silahkan di cicipi gehu hanetna

    ReplyDelete
  91. Nice info, template blognya keren gan. Rapi banget

    ReplyDelete
  92. @ Annisa nasyie haena : samo2 hohoho =))

    ReplyDelete
  93. mantepz banget tutorialnya, tengkyu gan!

    ReplyDelete
  94. @ Darana-xp : siap sob gera meluncur

    @ Farobi : sama2 gan

    ReplyDelete
  95. Smoga suksesss selaluuuu boooooooooosssssssss. Thankssssss your scipt2........ nyeeeeeeee

    ReplyDelete
  96. @ Roni Isranto : amin,sama2 bos, :)

    ReplyDelete
  97. keren juga menunya gan. ntr ane coba di blog ane yang lain. terima kasih sudah berbagi

    ReplyDelete
  98. @ duniasharing : silahkan di coba gan semoga cocok dengan tempenya,sama2 gan

    ReplyDelete
  99. Mantaaabbss Kang tutor nya... keren abiieeezzz... thanks dah di share,,,, :D

    ReplyDelete
  100. @ Blogger Blegedes : sama2 kang kan sesama blogger haus saling berbagi :)

    ReplyDelete
  101. Mantep cocok untuk baju blognya yang bewarna item begini :D

    ReplyDelete
  102. @ Torayasurabaya : silahkan di coba sobat :), trimakasih atas kunjungannya

    ReplyDelete
  103. Mass,Saya Kok kebawah banget Tulisannya??

    ReplyDelete
  104. bang ok Error sih ga ada gabar muncul?? solusi gemana?

    ReplyDelete
  105. keren tutorialnya, salut untuk pelajaran blogspot

    ReplyDelete
  106. Saya coba terpakan gan, trims ya...di tunggu kunjungan baliknya.

    ReplyDelete
  107. Banner sudah sy pasang gan.
    http://www.marskodrat.biz

    ReplyDelete

Untuk menyisipkan kode,gunakan tag
[code]KODE ANDA[/code]
Untuk menyisipkan quote,gunakan tag
[blockquote]KATA-KATA ANDA[/blockquote]
Untuk menyisipkan gambar,gunakan tag
[img]URL GAMBAR ANDA[/img]
Untuk menyisipkan video,gunakan tag
[youtube]URL VIDEO ANDA[/youtube]
Anda juga bisa menggunakan emoticon seperti biasa.

Pasang Iklan Anda Disini

 
Copyright © 2011 Blogcunayz Template Design By Rizky Wardiansyah