https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1kEv7FgrESMPwD0ptpKPFTHXZW91Mwu-XsgGZnPZztNEU1aD11U4sYO6xNf48adlNZ2Hlugr2KW9RZyz6KTufzvBxnibKAI5IaOyFUQ_l0BsiPL5FlPQJpug452oCTCuXCxIKCZiLOXw/s1600/jquery-logo.png

Kumpulan Tutorial JQuery

saya telah mengumpulkan 20 tutorial JQuery yang telah tersedia sangat banyak di internet dan saya telah pilih tutorial - tutorial  yang mungkin dapat bermanfaaat bagi anda :

1. Memasukkan jQuery ke Wordperss

jquerywordpress1 Kumpulan Tutorial jQuery pada Wordpress
Memasukkan jQuery ke Wordperss
Jika Anda sudah mendownload jQuery langkah seharusnya pasti menguploadnya ke server Anda pada file header.php di bagian <head>. Namun terkadang cara tersebut menimbulkan error. Pada tutorial ini Anda akan dijelaskan bagaimana memasukkan jQuery ke wordpress yang tidak menimbulkan error.

2. Menampilkan Random Post (dengan AJAX)

jquerywordpress2 Kumpulan Tutorial jQuery pada Wordpress
Menampilkan Random Post (dengan AJAX)
Dalam tutorial ini akan dijelaskan cara menampilkan random post dengan AJAX refresh. Ternyata caranya cukup mudah setelah melihat tutorial ini. Kita diberikan library jQeuery lengkap disana.

3. Mendesain Featured Content Slider Elegan dengan jQuery

jquerywordpress3 Kumpulan Tutorial jQuery pada Wordpress
Mendesain Featured Content Slider Elegan dengan jQuery
Dalam tutorial ini, Anda akan diajak mendesain feature content berdasarkan The Coda Slider. Efek yang dihasil sangat indah dan fleksibel. Anda bisa mencobanya dengan mengikuti tutorial ini.

4. Membuat Menu jQuery Menarik dengan Efek Fadein Fadeout

jquerywordpress4 Kumpulan Tutorial jQuery pada Wordpress
Membuat Menu jQuery Menarik dengan Efek Fadein Fadeout
Pada tutorial ini kita akan membuat menu navigasi pada blog kita menggunakan jQuery yang menghasilkan efek fade in dan fade out. Dalam pengerjaannya kita membutuhkan pengetahuan CSS yang baik untuk menciptakan desain menu sesuai keinginan kita.

5. Membuat Highlight Test pada Halaman Pencarian Blog

jquerywordpress5 Kumpulan Tutorial jQuery pada Wordpress
Membuat Highlight Test pada Halaman Pencarian Blog
Dari gambar diatas sudah bisa mewakili maksud dari tutorial ini. Kita akan membuat hasil halaman pencarian blog kita dengan efek text yang dicari akan terblok/ tersorot baik judul maupun isi posting dengan warna sesuai keinginan kita.

6. Membuat Feature Post Slideshow

jquerywordpress6 Kumpulan Tutorial jQuery pada Wordpress
Membuat Feature Post Slideshow
Dalam tuts ini akan diajarkan membuat feature post dalam bentuk slideshow dengan memanfaatkan jQuery. Disini kita akan memanfaatkan plugin jQuery Cycle. Penjelasan lebih lanjut silahkan mengikuti petunjuk pada tutorial ini.

7. Membuat Sliding Panel Sederhana pada WordPress





Kumpulan Tutorial jQuery pada Wordpress Kumpulan Tutorial jQuery pada Wordpress
Kumpulan Tutorial jQuery pada WordPress

Disini akan dijelaskan membuat sliding panel yang didalamnya berisi form login dan link untuk mendaftar. Defaultnya akan dipasang dibagian atas blog dan jika diklik akan bergeser ke bawah dan terlihat form loginnya.

8. Dasar Membangun Layout Newspaper pada WordPress dan jQuery

jquerywordpress8 Kumpulan Tutorial jQuery pada Wordpress
Dasar Membangun Layout Newspaper pada WordPress dan jQuery
Theme grid dan magazine mulai banyak digemari para pengguna wordpress. Disini akan dijelaskan bagaimana menggunakan layout grid memanfaatkan jQuery.

9. Membuat Tombol Theme Switcher

jquerywordpress9 Kumpulan Tutorial jQuery pada Wordpress
Membuat Tombol Theme Switcher
Tombol theme switcher adalah tombol untuk mengubah theme yang dipakai sehingga pembaca bisa memilih theme yang sesuai kesukaannya. Dengan tombol ini diharapkan akan mengurangi tingkat kebosanan pembaca tetap blog terhadap desain blog kita. Tombol ini digunakan pada website ANidea.

10. Membuat Menu Tab pada Sidebar dengan jQuery 
jquerywordpress10 Kumpulan Tutorial jQuery pada Wordpress
Membuat Menu Tab pada Sidebar dengan jQuery

Anda mungkin sering menemukan blog dengan menu tab pada sidebar seperti gambar diatas. Tutorial ini akan membahas bagaimana cara membuat menu tab tersebut.

11. Membuat Recent Post dengan Excerpt

jquerywordpress11 Kumpulan Tutorial jQuery pada Wordpress
Membuat Recent Post dengan Excerpt
Blog wordpress menyediakan widget recent post dengan menampilkan judulnya saja. Namun disini akan dijelaskan membuat recent post yang dilengkapi dengan excerpt / kutipan dari postingnya.

12. Membuat Carousel jQuery dengan Post WordPress

jquerywordpress12 Kumpulan Tutorial jQuery pada Wordpress
Membuat Carousel jQuery dengan Post WordPress
Dalam tutorial ini kita akan diajarkan membuat Carousel sederhana dengan mudah. Disini kita akan memanfaatkan plugin jFlow dan kita bisa mengatur posting dari kategori yang kita tentukan.

13. Membuat Validator pada Form Komentar dengan jQuery

jquerywordpress13 Kumpulan Tutorial jQuery pada Wordpress
Membuat Validator pada Form Komentar dengan jQuery
Maksud tutorial ini adalah membuat semacam pengecekan instant terhadap text yang diisikan pada form komentar. Misalkan pada field nama kita membatasi jumlah karakter minimal dan maksimal, jika teks yang dimasukkan kurang dari nilai minimal dan lebih dari nilai maksimal maka akan muncul report secara instant di dekat form seperti pada gambar diatas.

14.  Membuat Halaman Login dengan jQuery

jquerywordpress14 Kumpulan Tutorial jQuery pada Wordpress
Membuat Halaman Login dengan jQuery
Dengan cara sederhana kita akan diajarkan membuat halaman login dengan memanfaatkan jQuery. Dengan menggunakan jQuery lightbox kita akan mempermudah pembaca dalam proses loginnya.

15. Membuat Widget Twitter dengan jQuery

jquerywordpress15 Kumpulan Tutorial jQuery pada Wordpress
Membuat Widget Twitter dengan jQuery
Dengan melihat gambar diatas saya tidak perlu menjelaskan lebih lanjut bukan?

16. Mengambil Posting dengan jQuery dan AJAX

jquerywordpress16 Kumpulan Tutorial jQuery pada Wordpress
Mengambil Posting dengan jQuery dan AJAX
Maksudnya kita akan membuat sebuah halaman yang memungkinkan pembacanya memilihpost tertentu untuk ditampilkan dalam  satu halaman menggunakan AJAX.

17. Melipat / Menyembunyikan Komentar pada WordPress

jquerywordpress17 Kumpulan Tutorial jQuery pada Wordpress
Melipat / Menyembunyikan Komentar pada WordPress
Jika blog Anda termasuk blog dengan komentar yang banyak bisa lebih dari 100 dengan tutorial ini Anda bisa memperpendek halaman single postnya dengan melipat komentar menggunakan jQuery. Cara lain anda bisa mengatur jumlah komentar dalam 1 halaman single.

18. Membuat Featured Sliding Content

jquerywordpress19 Kumpulan Tutorial jQuery pada Wordpress
Membuat Featured Sliding Content
Anda bisa membuat sliding content seperti gambar diatas pada blog dengan mengikuti tutorial ini. Anda akan diberikan source code untuk ini dan dengan 5 menit Anda bisa membuat content sliding tersebut di blog Anda.

19. Membuat Contact Form dengan jQuery Tanpa Plugin

jquerywordpress23 Kumpulan Tutorial jQuery pada Wordpress
Membuat Contact Form dengan jQuery Tanpa Plugin
Langsung saja menuju tutorial ini jika anda ingin melengkapi blog anda dengan form kontak menggunakan jQuery.

20. Membuat Show/Hide Widget

jquerywordpress29 Kumpulan Tutorial jQuery pada Wordpress
Membuat Show/Hide Widget
Seperti pada cms joomla yang bisa menampilkan dan menyembunyikan area pada widget tertentu, anda juga bisa mengaplikasikan cara tersebut pada wordpress dengan mengikuti tutorial ini.


Related Post: