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 ^_^
jQuery
- Dua Style Menu Navigasi Dropdown Ala Cunayz
- Menu Rocking Rolling Rounded Dengan jQuery
- Membuat Efek "NUDGING" Pada Label/Categories
- Cara Memasang Image Slider dengan jQuery
- Pasang Sharing Is Sexy dibawah Posting
- Buat Efek Toggle Sidebar Blog dengan "jQuery"
- Fancy Menu Drop Down dengan ( jQuery )
- Membuat Chatbox Bergaya Absolute Vertical Sliding Panel
- Cara Membuat Font/Text Resize dengan jQuery
- Pasang Social Bookmarks dibawah Posting dengan jQuery
- Sweet Menu Navigasi "Slide out effect" ( jQuery )
Tips-Trik Blogger
- Cara Membuat Related Post Dua Kolom
- Cara Modifikasi Kotak Komentar Blogger
- Membuat Related Post dengan Efek Ceklis
- Membuat Breadcrumb Terindex Google
- Load Page Blog Lebih Keren Dengan Keyframes
- Cara Memasang Script Iklan Melayang (Ads popout)
- Menu Rocking Rolling Rounded Dengan jQuery
- Trik Mempercepat Loading Home Page Blog
- Cara Membuat Title Otomatis Pada Semua Posting
- Cara Membuat Efek Rotate Miring Dengan CSS3
- Pengertian SEO On Page Dan Off Page
- Cara Membuat Valid XHTML Blogger
- Script Untuk Menghindari Para Tukang Copas
- Cara Meningkatkan Traffic Blog Dengan (Manual)
- Cara Mudah Meningkatkan Traffic Blog dengan AutoSurf
- Cara Vertifikasi Ulang Blog Ke Google Webmaster Tools
- Cara Remove Broken Link Dengan Webmaster Tools
- Cara Membuat Kota Komentar Admin Berbeda
- Menghilangkan Tulisan "Langgan: Entri (Atom)"
- Black Devil Red Horns Emoticon
- Cara Pasang Iklan di Bawah Posting
- Ablewise | Tool Buat Memprediksi PageRank
- Google Index Pages Checker
- Blogger Support Upload Favicon Sendiri
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,,
ReplyDeletekeduaXXX + Persempaaxxx ,
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
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
. 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
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??
,,happy blogging juga
ReplyDelete@ Ф дфѕдғфдғ Ф : iya gan baru sempet nih,iya kali gan tapi ane baru share sekarang wkwkwk
@ Sinisterys : wkwkwk mungkin lain kali mas
@ 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"
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.
gak apa2 sob,,trim atas kunjungannya 
ReplyDelete@ Farixsantips : hahaha =)) =)) ya begitulah bunyinya,kakinya bertanduk hewan apa namanay,,??,... wah ke 15 cool semoga masbro makin jaya
@ MHARJIPES.COM : hahaha
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
hehe iya gan hehe 
amin!
ReplyDeletejalan2 kesini dlo
ReplyDeletesambil nunggu post barunya
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
. 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
Keren 
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
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..
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...
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..
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
hehehe
ReplyDeletekunjungan lagi lah nunggu postingan terbarunya disini
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
?
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
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,,
,, happy new year
ReplyDelete@ MHARJIPES.COM : trimakasih atas kunjungannya sobat
@ 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,,,,
ReplyDelete@ Blogger Blegedes : sama2 kang kan sesama blogger haus saling berbagi
ReplyDeleteMantep cocok untuk baju blognya yang bewarna item begini
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