Tips Dan Trik Seputar Bisnis Online dan Internet Marketing

Cara Mudah Membuat Slider Jquery di Blog WordPress

Slider Jquery

Kali ini saya akan memberikan tutorial untuk memasang Slider Jquery pada WordPress yang biasanya banyak digunakan pada themes premium berbayar. Dan untuk anda yang menggunakan themes gratisan yang tidak ada fasilitas slider yang nantinya membuat blog anda semakin powerfull.

Yang pertama tentunya anda perlu mendapatkan plugin dari slider jquery , anda bisa mendapatkannya di Worpress.org tapi untuk kali ini sebagai contoh saya akan menggunakan plugin Easy Nivo Slider yang mana dalam plugin ini akan banyak sekali pilihan transition.

Anda bisa mendownloadnyaplugin disini atau silahkan kunjungi websitenya disini.

Oke…kita bisa memulainya…

Saya berasumsi bahwa anda telah mendownload plugin dan menginstall plugin Easy Nivo Slider , jika anda masih binggung tentang instalasi plugin anda bisa melihat tutorialnya pada  Bagaimana Cara Mudah Install Plugin WordPress pada blog ini juga.

Jika anda telah selesai install plugin Easy Nivo Slider maka silahkan aktifkan.

activate-plugin

Sebagai tutorial kebetulan saya menggunakan WordPress versi terbaru yaitu WordPress 3.3 beta , kemudian setelah anda aktivkan pluginnya maka anda bisa menuju Setting –> Nivo Slider.

nivo-slider
Silahkan klik Nivo Slider lalu anda akan dibawa ke halaman setting dari Nivo Slider.

no-images

Seperti yang anda lihat disana anda bisa membuat slider yang sangat cantik klik preview dan  jika anda scroll agak kebawah anda akan menemui halaman images kosong dan anda perlu menambahkan gambar untuk dibuat slider.

Untuk menambahkan gambar anda perlu membuat posting baru.

add new post

Kemudian anda tentukan Categorynya karena slider ini bekerja dengan memanggil dan menggunakan Category .

set-images-slider

Silahkan anda insert images seperti biasa anda membuat posting , lalu jangan klik insert to post melainkan Use featured image yang terletak persis disebelahnya.

Setelah itu coba anda kembali ke Nivo Slider dan dalam preview sudah ada gambar yang tadi anda masukan.

preview slider

Ulangi dengan membuat posting baru dengan cara yang sama seperti diatas sesuai kebutuhan anda dan kali ini saya memasukkan 3 gambar.

Setelah itu anda bisa membuat setting untuk ukuran dari slider yang anda buat, untuk itu pada tab Nivo Slider klik First Slider.

setting ukuran slider

Tentukan ukuran sesuai dengan halaman blog anda dan kali ini saya membuatukuran slider 600 x 400 jangan lupa klik Save Changes.

Kemudian dalam preview bisa anda lihat perubahannya, kemudian anda perlu setting untuk category

pilih-category

Pilih Category dimana anda membuat posting diatas tadi, lalu anda bisa memilih Transition (perpindahan gambar/animasi).

transition-slider

Anda bisa mencoba satu persatu dan kemudian anda tentukan jangan lupa klik Save Setting.

Selesai…!

Kini saatnya anda memasang pada halan yang anda inginkan, anda bisa membuat halaman/page atau post.

new-pageSetelah anda membuka New Page pada tab content anda lihat ada icon baru bernama Nivo, silahkan anda klik.

category

Ada muncul popup windows Nivo, anda pilih category yang mau anda buat slider, kemudian klik Insert

insert nivo slider

Pada halaman untuk menulis content telah ditambahkan Short Code seperti gambar diatas, lalu klik Publish.

Kini anda bisa melihat hasilnya.

slider

Jika anda menggunkan themes default anda bisa memodifikasi themes tersebut dengan menghilangkan gambar header default dan menggantinya dengan slider yang baru anda buat .

Slider Jquery

Dan anda bisa membuat Slider Query pada Blog WordPress anda sesuai dengan keinginan anda sendiri, semoga bermanfaat dan jika ada kesulitan silahkan anda isi komentar dibawah ini.


Berlangganan Artikel ?

Silahkan masukkan Email anda sekarang

Kiriman oleh : Google FeedBurner

 

 

27 Comments
  1. Terima kAsih mas rudy atas tipsnya,thanks

  2. Ane coba gan, mudah2an berhasil… thx

  3. Salam,

    Tutorial yang menarik. Mmm, tapi saya masih bingung cara menggunakan “plugin Easy Nivo Slider” untuk mengganti header default wp seperti apa ya?

    Mohon petunjuknya, terima kasih. 🙂

  4. Salam
    Saya sudah ikuti langkah2nya, pertanyaan saya, setelah Use as featured image itu, postingannya harus di-publish kah?
    Karena di bagian image selection>>term di previewnya nivo slider, nggak ada nama kategori tsb. Bingung jadinya.. 🙁

  5. Blognya keren banget, gan!
    Salam kenal dan kalau sempat mampir sekalian mengundang untuk SUBMIT URL BLOG-nya ke Direktori Weblog Indonesia.

  6. Thanks infonya mas 🙂
    bisa di coba nie.

  7. gan kalau mau nambah script untuk nampilkan nivo slidernya secara manual gimana?

  8. kalo untuk mbanner di sidebar gimana yaa? pake vslider malah error

  9. kl +kontent gmn mas???

  10. mas, punya plugins visual composer ngak?

  11. mas d post nya ane ga ada icon nivi..
    kalau mau munculin gimana gan ..
    balas cepat gan

  12. wah boleh juga ni di coba pluginnya..

  13. mksih Gan.. aku langsng coba.. udah2han brhasil Gan…

  14. sangat menarik untuk disimpan tentang cara membuat slide. tapi kalo saya perhatikan harus menginstal plugin ya. apa itu tidak berpengaruh pada situs kita sendiri. atau bagaimana ya. mohon pencerehannya?

  15. terima kasih atas tutorialnya. sangat bermanfaat sekali bagi penjual di toko online yang ingin menampilkan dagangannya di slide show. tapi masih bingung cara mengatur ukuran gambarnya.

  16. maaf gan, saya mau tanya, ada ga ya kalo slide show yang model pakai kode html tanpa instal plugins, soalnya kalo pakai html kan lebih cepat cara mengeditnya, dan bisa ditaruh dimana saja dan bahkan di situs lain pengguna.

  17. terimakasih mas, sangat membantu

  18. Kalau gitu saya harus menginstall plugin slide jquery-nya dulu agar bisa memasangnya di blog wordpress saya
    terima kasih atas infonya

  19. kalau mau aktifkan di header gimana caranya nya gan?

  20. terima kasih informasinya. sangat bermanfaat bagi saya

    • Che interessante questo articolo Anna, grazie davvero ho imparato delle cose che non conoscevo. E che bello il video della neuroscienziata, molto emztionanze.Graoie davvero per le cose che scrivi e per come le scrivi, sono spiegate molto bene. Mari

  21. mantab gan. sukses selalu

  22. Gan ane request plugin yang buat new post slider dong,
    kalo bisa kasih rekomendasi yang mirip sama yang digunain lintasme

    thx

  23. Tutorial gila!

  24. turtorialnya mantap dan jelas. thank gan

Leave a Reply



*