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 :
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.
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.
PERTAMAX doloo =))
ReplyDeletewihh keren sob menu nya,, =)) manteb,, :D
ReplyDeletekeduaXXX + Persempaaxxx , :D
ReplyDeletewkwkwkwkw ini yang kemaren ente kasih liat ke ane kan , mantappp keren abis cuyzzz =)) =))
ReplyDeletesayang ga cocok sama baju rombeng ane :(
ReplyDelete@ Rama88 : selamat sob untuk pertamaxnya,,:)) thank sob =))
ReplyDelete@ Mbah Qopet : selamat mbah buat keduaxnya =)) oh gitu ya sob,emang menu ini cocoknya di baju2 yang warnanya item :)
Weh menunya keren mas :)
ReplyDelete@ Musa Khairul Umam : thank masbro :))
ReplyDeletewew bagus!!
ReplyDeletekeren....tp sayang nggak cocok sama template saya
ReplyDeletewaahhhhh..., 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 :) :)
ReplyDeletewahhh mantap banget ya kelihatan sekali efek jquery dari menu kwicks ini. kenapa namanya kwicks ya? mirip merek traktor indonesia ya hhehehe
ReplyDelete:D ijin praktek stelah UAS slesai :D
ReplyDeletebaru upadate ya gan heheh,
ReplyDeletekayanya tutorial ini sudah ada sejak kemaren, cuman bedanya ada slide-slide gitu sama shadow mungkin...
jauh banget dari Pertamax hahaha
ReplyDeleteweww keren yah hihi happy blogging mas :D
. gan ayo tukar link
ReplyDeletesama - sama di sidebar
link blogcunays sudah di pasang silahkan di cek
disini
blognya-reggy.blogpsot.com
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
ReplyDeleteWahh keren banget, Btw gak berat nigh Gan?
ReplyDeleteow yang seperti itu y sob, ane lebih suka menu dropdown
ReplyDelete@ DODE-XP.COM : thank sob
ReplyDelete@ 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 :)
@ Galau'ers : silahkan gan,emang belum beres ya UASnya??
ReplyDelete@ Ф дфѕдғфдғ Ф : 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 :)
@ ladidacafe : bisa juga sob pake css coba sobat bikin tar ane liat pasti bagus sob :)
ReplyDelete@ MHARJIPES.COM : gak gak itu di halaman demo yang bikin berat loading gambar narutonya gan :)
@ Liandri eko : oh sama saya juga sob
ijin praktek sob :)
ReplyDelete@ Rizky Wardiansyah : ohh no problem, its all about insting *ehh ngomong apa tadi? jadi ngaco akunya =))
ReplyDeletesimpan dulu aja, keren, tp gak cocok sama blog saya, ada warna abu abu gak slain item :)
ReplyDeleteoke okeee... ehehehee
ReplyDeletebtw itu js yg pertama kyknya error deh, cuman "ttps" , kurang "h" :D
demonya aja keren banget mas, tp udah berat kagak blog kita kalau udah di buat yang seperti itu
ReplyDeleteohhh gitu ya sob sudah dari sananya :) ehhh makasih banyak ya sob sudah mau mengucapkan selamat ulang tahun ane yang ke 15 hehehee :) mantep deh!!
ReplyDeleteSipp,, Bisa di Coba lgi hheh,,
ReplyDeletemenarik buangget,
Soory klo Mampir lgi nigh Sobat
@ Galau'ers : silahkan sob :)
ReplyDelete@ Ф дфѕдғфдғ Ф : hahaha =)) masbro2 ada2 aja :))
@ Ardha : silahkan di ctrl+D dulu :)
@ ladidacafe : oh iya sob,, thank udah kasih tau ane :)
@ WahidBlog : itu di page demonya berat sama gambar naruto sob,,tar ane copot deh.
ReplyDelete@ 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 :)
gue apa adanya kok sobb, hahah adminnya baru bales ternyata... kmn aja tuh?
ReplyDelete@ Ф дфѕдғфдғ Ф : bener sob hidup harus apa adanya bukan ada apanya,iya sob baru punya pulsa ane wkwkwk,,suram =)) =))
ReplyDelete@ Rizky Wardiansyah : jiahhh baru isi pulsa ternyata *again... okeh salam kenal yaa masbro From sim kuring dari Tasikmalaya city hahayy
ReplyDelete@ Ф дфѕдғфдғ Ф : ia sob wkwkwk,...oh orang tasik tok iyo2 salam kenal oge kang :)
ReplyDeleteohh bisa juga ya pake ccara yg ky gini?
ReplyDeletemanteb dah sob. semoga bermanfaat..
oiya, ditunggu kunjungan baliknya ya.
thanks :)
@ Outbound Malang : siap sob segera meluncur ke TKP :)
ReplyDeletekakinya bertanduk? ayam jago dong huahahaha :D hehe iya gan hehe :) amin!
ReplyDeletejalan2 kesini dlo :D
ReplyDeletesambil nunggu post barunya :D
bagus tuh gan. dilengkapi demonya juga. jadi ga penasaran
ReplyDelete@ Farixsan Quilicuor (Faris Hardiyanto 177) : hahaha pinter2 wkwkwk =)) =))
ReplyDelete@ Dayz : trimakasih atas kunjungannya sob :)
@ Fazri : trimakasih gan.
keren sob.....
ReplyDelete@ mania-xp : thank sob,...:)
ReplyDeleteTipsnya bagus saudaraku...
ReplyDeleteTeruskan untuk berbaginya
@ abufarras : trimakasih sobat,siap laksanakan :)
ReplyDeleteMantap Sobat... Mampir balik blog ane sobat... Ada postingan nhe... Comment ya... Thx
ReplyDeleteBerbagi HACKING, TWEAKING, SOURCE CODE, SOFTWARE, GAME, TIPS N TRICK, dll
manu navigasinya top markotop sobat.Pengin pasang tetapi sepertinya templatenya saya tidak mendukung
ReplyDeletemantapss nihh menunya tapi koq sobat gak make?
ReplyDeleteMantap abis nih menux kapan2 di coba
ReplyDelete@ Black Angel Syndicate : tadi ane udah main ke tempat ente sob + support juga :)
ReplyDelete@ 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 :)
sungguh bagus ilmunya
ReplyDeleteaku jadi terpesona
dan ingin mencoba....
@ anisayu : trimakasih kawan,hahay segitunya silahkan di coba kawan :)
ReplyDeleteKeren sob, menu navigasinya.
ReplyDelete@ dokunimus : thank sob :)
ReplyDeleteTerbawax :D. Waduh liat demo nya keren gan ctrl + D dulu ah hehe
ReplyDeleteMantab Sob...namabahin koleksi bookmark coding tricks gue..nice share and happy blogging
ReplyDeletemampir lagi sob,, =)) =)) aman nehh adminnya :))
ReplyDeleteJalan-Jalan lagi ah... Mampir balik ya sob...
ReplyDeleteJangan Lupa Follow balik... Ane dah Follow blog sobat..
Berbagi HACKING, TWEAKING, SOURCE CODE, TIPS N TRICK, SOFTWARE, GAME, dll
dan sayangnya ane ga suka warna gelap , ga ada keren-kerennya gitu deh kalo hitam polos :o
ReplyDeleteaya naon sok atuh kumaha abi ngator teu ??? =))
ReplyDelete@ Deganshah Putra : thank sob and silahkan di ctrl+D :)
ReplyDelete@ 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 :)) :))
keren sob,,,ijin nyoba ntar,,,,,
ReplyDelete@ ichwan HAUSGAME : thank sob,silahkan sob :)
ReplyDeletekeren bagt sob menu navigasinya...
ReplyDelete@ Asis Sugianto : thank sob
ReplyDeleteWah,manteb demonya :D Keren :D
ReplyDeleteCtr + D dulu ah,,, buat simpenan...:D
ReplyDelete@ Aku mau gratisan : silahkan masbro,jiah simpenan selingkuhan dong wkwkwk ada2 aja si masbro mah =)) =))
ReplyDeleteJalan-Jalan lagi sobat... Mampir Balik blog ane ya sob...
ReplyDeleteBerbagi HACKING, TWEAKING, SOURCE CODE, TIPS N TRICK, SOFTWARE, GAME, dll
@ Black Angel Syndicate : trimakasih atas kunjungannya sobat,siap lah langsung meluncur ke tempat sobat :)
ReplyDeleteditunggu tutorial keren selanjutnya :D
ReplyDeleteramain acara disini dolo
ReplyDelete. gan..
ReplyDeletegmn caranya kalau kayak guest post hanay tampil guest booknya saja, seperti menu bar, widget hilang?
wiz, ajib bener jquerynya.. :D
ReplyDeletelama juga gk update ni gan..., smg sehat2 aja bro ;)
ReplyDeleteSajian terlezat nih sob.Izin reply ulang lagi demo sama apps.Terimakasih ya sob infonya.Sesuatu banget:D
ReplyDeletewaduh sob, aku udh gak mau utak atik kode lg ah.. pusing.. mending jln2 yuk tahun baruan... :D
ReplyDelete@ Sinisterys : ok siap sob lagi cari nih wkwkwk =))
ReplyDelete@ WahidBlog : thank masbro sudah berkenan meramaikan suasana :)
@ Reggy Zian Purnama : oh itu tinggal pake kode "display:none" (tanpa tanda kutip)
@ awelqq : thank sob
@ Rohis Facebook : lagi libur dulu gan kan tahun baruan dulu wkwkw,ini post umurnya juga baru 3 hari sob
ReplyDelete@ 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 =)) =))
wah makasi gan, sangat membantu cara ini
ReplyDelete@ atdayyan : sama2 gan,,:)
ReplyDeleteMampir lagi ah, sambil nungguin Taun baru.. :D
ReplyDeleteJalan-Jalan Lagi... Mampir balik blog ane ya sob... Berbagi HACKING, TWEAKING, SOURCE CODE, TIPS N TRICK, SOFTWARE, GAME, dll
ReplyDeletesaya coba buat pake css3 dan nerapin ide saya itu, ngga sebagus ini jadinya ehehee..
ReplyDeleteyg mirip cuman hover paddingnya aja --"
mgkin perlu otak atik lagi, biar paling ngga mirip mirip dikit sama ini, hohohoho...
@ awelqq : trimakasih atas kunjungannya sob.
ReplyDelete@ Black Angel Syndicate : hatur thank you masbro
@ ladidacafe : weh kren coba pake efek transisi sob
emang kenapa gan ayam jago? :o
ReplyDeletekunjungan lagi lah nunggu postingan terbarunya disini :D hehehe
asik asik.. keren sob
ReplyDeleteBerkunjung kembali sobat di sini
ReplyDeletenavbarnya keren abies sobat,,, boleh dicoba nih sobat...
ReplyDeleteJalan-Jalan Lagi Sobat... Mampir balik blog ane ya sob...
ReplyDeleteBerbagi HACKING, TWEAKING, SOURCE CODE, TIPS N TRICK, SOFTWARE, GAME, dll
@ Farixsantips : gak apa2 iseng2 aja wkwkwk,,weh masbro dah puang ya liburannya,,??
ReplyDelete@ Nagato Kurosaki : thank sob
@ cardiacku : trimakasih atas kunjungannya sobat
@ Asis Sugianto : silahkan sob
@ Black Angel Syndicate : siap sob
Koment ane masuk spam ya masbro :D ?
ReplyDeletekok pada ngilang
puang apaan? huahahaha
ReplyDelete@ Dayz Hidayat : gak ada kok sob,mungkin kaya punya si mbah kao om "IP" nya bermasalah,,??
ReplyDelete@ Farixsantips : eh lupa yang liburan kan masbro musa wkwkwk =)) =))
keren mas, tapi saya masih bingung terapinnya di wp saya
ReplyDeleteWah beerkunjung lg sobat,
ReplyDeleteuntuk meramainkan Blog Sobat
SELAMAT TAHUN BARU
keren sob menu navigasinya :D
ReplyDeleteHappy New Year 2012
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 ;)
ReplyDeletesalam buat anak2 blogdeal
happy new year~~
@ Rizkyzone.com : thank mas,oh ente pake wp ya,,
ReplyDelete@ 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 :)
jalan jalan lagi kesini happy blogging mas
ReplyDeletebleum sob..
ReplyDeleteUAS ane tgl 9..
mhon doa rstu ya :)
Jalan-Jalan... Maaf baru dateng dari liburan... hehe
ReplyDeleteMampir balik ya sob...
Berbagi HACKING, TWEAKING, SOURCE CODE, TIPS N TRICK, SOFTWARE, GAME, dll
@ WahidBlog : trimakasih atas kunjungannya mas,,happy blogging juga
ReplyDelete@ Galau'ers : oh ia sip ta do'a in biar UASnya lancar
@ Black Angel Syndicate : siap sob
ngga ada gehu disinimah *balik lagi ahh
ReplyDelete@ Ф дфѕдғфдғ Ф : sekarang sudah ada sob silahkan di cicipi gehu hanetna
ReplyDeleteNice info, template blognya keren gan. Rapi banget
ReplyDelete@ Alan : thank gan :)
ReplyDeletethank yoooooooo
ReplyDelete@ Annisa nasyie haena : samo2 hohoho =))
ReplyDeletemantepz banget tutorialnya, tengkyu gan!
ReplyDelete@ Darana-xp : siap sob gera meluncur
ReplyDelete@ Farobi : sama2 gan
Smoga suksesss selaluuuu boooooooooosssssssss. Thankssssss your scipt2........ nyeeeeeeee
ReplyDelete@ Roni Isranto : amin,sama2 bos, :)
ReplyDeletekeren juga menunya gan. ntr ane coba di blog ane yang lain. terima kasih sudah berbagi
ReplyDelete@ duniasharing : silahkan di coba gan semoga cocok dengan tempenya,sama2 gan
ReplyDeleteMantaaabbss Kang tutor nya... keren abiieeezzz... thanks dah di share,,,, :D
ReplyDelete@ Blogger Blegedes : sama2 kang kan sesama blogger haus saling berbagi :)
ReplyDeleteMantep cocok untuk baju blognya yang bewarna item begini :D
ReplyDelete@ Torayasurabaya : silahkan di coba sobat :), trimakasih atas kunjungannya
ReplyDeleteiya keren....
ReplyDeleteMass,Saya Kok kebawah banget Tulisannya??
ReplyDeletebang ok Error sih ga ada gabar muncul?? solusi gemana?
ReplyDeleteMantap gan , i like it :*
ReplyDeletekeren tutorialnya, salut untuk pelajaran blogspot
ReplyDeleteSaya coba terpakan gan, trims ya...di tunggu kunjungan baliknya.
ReplyDeleteBanner sudah sy pasang gan.
ReplyDeletehttp://www.marskodrat.biz
thnk gan udh mau share
ReplyDelete