Cara membuat Kwick Menu Navigasi Di Blog

Viyan Pradita Minggu, Juni 26, 2011 ,

Kwick Menu Navigasi Blogger dengan jQuery, kiranya itulah yang akan saya bahas kali ini. Setelah kemarin saya bahas juga untuk cara membuat Jquery Tab View Scroll Show Hide Widget, kita lanjut lagi, dan masih seputar JQuery. Ini juga merupakan reques dari beberapa sobat blogger, yang meminta untuk membuatkan tutorialnya. Ok, bila masih penasaran sobat bisa melihatnya pada menu navigasi diblog saya ini, ataupun bisa melihat pada gambar/sreenshot dibawah ini.


demo/screenshot

yang pasti membuat tampilan blog makin keren sob, karena dengan jQuery Sliding Navigation Menu. untuk melihat demonya, sobat bisa melihat langsung DISINI.
Berikut langkah-langkah membuatnya:

1. Login ke akun blogger sobat
2. Masuk ke Rancangan/Design
3. Pilih Tata Letak
4. Edit HTML
5. Lalu cari kode berkut: ]]></b:skin> (gunakan Ctrl+F di keyboard sob),setelah ketemu tinggal letakkan kode CSS berikut tepat diatas kode ]]></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}

6. Kemudian cari kode </head> dan letakkan kode jQuery berikut tepat diatasnya:

<script src='http://k-blogger.googlecode.com/files/jquery-1.3.2.min.js' type='text/javascript'/>
<script src='http://k-blogger.googlecode.com/files/jquery.kwicks-1.5.1.pack.js' type='text/javascript'/>
<script src='http://k-blogger.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/>

Tambahin juga kode script berikut dibawahnya:

<script type='text/javascript'>
$().ready(function() {
$(&#39;.kwicks&#39;).kwicks({
max : 205,
spacing : 5
});
});
</script>

7. Simpan template.

Nah untuk file.js bila sudah ada yang menggunakan jquery-1.3.2.min.js, untuk file.js ini tidak perlu dipasang lagi.

8. Masih lanjut sob, masuk ke Tata Letak/Rancangan, klik Add New Widget/Tambah Widget, lalu pilih HTML/Javascript. Untuk cara berikutnya, rada gampang-gampang susah, bila ditemplate sobat sudah ada halaman untuk widget ditas halaman posting, sobat tinggal menambahkan kode berikut:

<div class='kwickswrap'>
<ul class='kwicks'>
<li id='kwick1'><a href='http://kode-blogger.blogspot.com/' title='halaman utama'>Home</a></li>
<li id='kwick2'><a href='#' id='hide_top-klik'>Portfolio</a></li>
<li id='kwick3'><a href='http://www.blogger.com/profile/08113139411481282535' title='about'>About</a></li>
<li id='kwick4'><a href='http://kode-blogger.blogspot.com/search?max-results=200'>Portfolio</a></li>
<li id='kwick5'><a href='http://kontactr.com/user/viyan%20pradita' title='contact us'>Contact</a></li>
<li id='kwick6'><a href='http://code.google.com/p/k-blogger/' title='recomended links'>Resource</a></li>
</ul>
</div>

9. Simpan/Save. Sipppp, sampai disini sobat sudah bisa membuat kwick menu navigasi blogger dengan jQuery.


Catatan:
Untuk gambar menu kwick'nya saya dapat dari pelajaran-blog.blogspot.com, disana juga ada tutorialnya, tapi sedikit berbeda dengan cara saya. Untuk Kode CSS silahkan sesuaikan sendiri dengan blog sobat.
Nah, cara diatas merupakan cara yang saya terapkan pada blog saya ini. Bila sobat mendapat kesulitan, bisa sobat bertanya lewat komentar dibawah.

Article Information:
Description: Cara membuat Kwick Menu Navigasi Di Blog
Reviewer: Viyan Pradita - Itemreviewed: Cara membuat Kwick Menu Navigasi Di Blog - Rating: 4.5

Ditulis Oleh :

Artikel Cara membuat Kwick Menu Navigasi Di Blog ini dipublish pada hari: Minggu, Juni 26, 2011. Semoga artikel ini bermanfaat untuk Anda. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

34 komentar
Terjun Ke Kolom Komentar

  1. mantap dehh!! kapan2 nyoba ahh.. :D

    BalasHapus
  2. Menunya keren,, tapi saya gak mau nyamain,, hho

    BalasHapus
  3. ini yang saya tanya tempo hari, trims mas :((

    BalasHapus
  4. Keren nich Bro.. jQuery memang keren walaupun rada berat dikit :))
    nnt psng d blog baru xixixi.. Bookmark dl bro.. ;)

    BalasHapus
  5. ini yang sy tunggu2 sob langsung k TKP :))

    BalasHapus
  6. Wah, poting mantap ni. Keren mas bro!! Ditunggu kreasi selanjutnya

    BalasHapus
  7. kak, mau tanya kalo buat judul blog di header kayak kakak itu pake gambar?

    BalasHapus
  8. sob, kok hasilnya jelek yah?

    BalasHapus
  9. Akhirnya dapat juga di sini, makasih yah mantap deh

    BalasHapus
  10. kok cuma tuliosan saja sob, tdk ada efeknya kayak di blog ini, caranya supaya kayak di blog ini gimana yah

    BalasHapus
  11. kang, tukeran link ya, kae link mu wes ng blog Q, ng side bar

    BalasHapus
  12. kinjungan balik http://fauzan.smkdarunnajah.sch.id/2011/06/elektronika-download-service-manual.html ;)) makasih Viyan sering ke blog sy ya

    BalasHapus
  13. @ALL: Thank masbro, silahkan dicoba, bila mengalami kesulitan dalam pemasangan diblog sobat, harap tanyakan saja disini.

    @Asmara Susanto: Iya sob, itu pake gambar :D

    @anshari: Coba cek lagi dalam pemasangan file.js'nya sob??

    @Banjarnegara: Oke.. sip kang :D

    @Fauzan A Mahanani: Salam kenal yo kang. Siplah, mampir pokoke :D

    BalasHapus
  14. makasih gan atas infonya saya coba yah buat di blog baru :D :-bd

    BalasHapus
  15. sob,
    aq dah masang efek ini n brhasil....

    tpi pas aq tambahin jquery lain, malah efek ini ga bisa jalan (jquerynya ga jalan)....

    tolong solusinya sob.... gimana cara biar querynya ga bentrok......??
    thanks

    BalasHapus
  16. sob,kog hasilnya jelek ya..????

    BalasHapus
  17. @Raindra: Sip, selamat mencoba...

    @bastaryan: Coba cek lagi untuk file.js'nya, barang kali ada yang double. misal untuk min.js, atau yg lainnya, bila sudah ada, gak perlu dipasang lagi.

    @Rendy Rizaldy: tergantung selera dan kecocokan dengan template masing2 sob. :)

    BalasHapus
  18. iya sob.... trnya ta min.js_nya ada dua..... dah aq hapus n..... brhasil..... hehehe....

    thanks buat solusinya.... maju trus....

    ntar mampir ya....

    BalasHapus
  19. Salam Gan...... singkat kata singkat cerita....saya nyoba ikutin arahan diatas tapi kok hasilnya ngga ada gambarnya:((... yang ada hanya kotak hitam aja~X.... tolong dibantu yah gan.... thanks alot.... :D :)

    BalasHapus
  20. rumit, tapi menantang,... :D

    BalasHapus
  21. @bastaryan: Oke, sip masbro :D

    @PUANG RATE: caranya udah seperti yg saya jelaskan diatas belum mas?? gampang2 susah emank mas, tergantung template juga kadang. dipasang diblog yg mana sob, biar bisa saya review dulu. blognya bnyak :D

    @a : hehehe,, semoga berhasil sob.

    BalasHapus
  22. aneh dah coba... tapi kok munculx di samping... bukan di atas...
    n gk ada animasix....hehehe tolong bantuanx gannnn...

    BalasHapus
  23. @typograph: Kalu caranya sesuai diatas, pasti gak mungkin seperti itu gan. Untuk animasi (gerak kesamping) itu dengan jQuery gan, atau file.js. biasanya ada dua file.js, itu yang sering membuat error. coba diteliti lagi gan ??

    BalasHapus
  24. mantap sob nnti saya coba juga d blog saya

    BalasHapus
  25. mantaapp gan... liat blog saya agan-agan :)

    http://cirebon-cyber4rt.blogspot.com/

    BalasHapus
  26. kang.. caranya buat kotak teks area yang ada scrollnya yang bisa digeser ke kanan tu gimana caranya..
    kayak yang ada di atas tu kang...

    BalasHapus
  27. Mantap gan!! barusan ane ane coba di blog ane, tapi jQuery-nya bermasalah, jadi gak muncul gambarnya...
    :hammer:

    BalasHapus
  28. dicoba dulu gan tanks....tapi ne aq pengen ganti gambarnya gmana ya?

    BalasHapus
  29. Wah Gaaan !! gi template saya g mau jalan ni, ,ad alternatifnya nggak??

    BalasHapus
  30. wah tapi di template Saya nggk mau jalan Gaaan, ,ad alternatif nggak?

    BalasHapus
  31. terima kasih banyak mas.......

    BalasHapus
  32. Saya coba terpakan gan, trims ya...di tunggu kunjungan baliknya.

    BalasHapus

Catatan:
Link hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS DI SINI...</i>


web design blogs Bloggers - Meet Millions of Bloggers