jquery wordpress Kumpulan Tutorial jQuery Pada WordPress

Kumpulan Tutorial jQuery pada WordPress tersedia luas di internet. Kali ini saya akan mencoba mengumpulkan beberapa tutorial berkaitan tentang jQuery pada WordPress. WordPress yang merupakan CMS terpopuler saat ini termasuk cms yang paling mudah untuk instalasi jQuery. Bagi temen-temen yang berniat ingin editing blog wp nya dengan menambahkan jQuery, berikut saya sajikan kumpulan tutorialnya disini. Tutorial yang saya kumpulkan ini berbahasa inggris namun cukup mudah untuk dipahami. Silahkan klik gambar untuk menuju halaman tutorial.

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.

C37A24A8D551F089082749E94362BCDD Kumpulan Tutorial jQuery Pada WordPress