Membuat Image Slide Show di Wordpress | KafeinKode

Kursus bahasa arab berkualitas

Membuat Image Slide Show di WordPress

Anonim Thu, March 5, 2015 9 Comments 15,961 views



Salah satu keuntungan membuat image slide show di WordPress adalah kita dapat menampilkan artikel yang ingin kita jadikan slideshow agar pengunjung bisa lebih difokuskan pada artikel tersebut. Juga di antara keuntungan lainnya yang bisa kita dapatkan adalah, dengan membuat image slide show di WordPress atau memasang image slideshow di WordPress, website kita akan terlihat lebih elegan, karena salah satu di antara tujuan diciptakannya image slideshow adalah untuk menghias website.

Membuat image slide show di WordPress tidaklah mudah, setidaknya diharuskan untuk memliki keahlian di bidang web design khususnya jQuery dan CSS, namun, nampaknya hal ini tidak berlaku bagi para pengguna CMS WordPress, banyak sekali plugin-plugin jQuery image slideshow yang bertebaran di internet, dari sekian banyak plugin-plugin jQuery image slideshow, ada suatu plugin image slideshow terbaik WordPress yang terbilang cukup elegan dan mudah digunakan, yaitu Advanced Post Slider.

Membuat-Image-Slide-Show-di-WordPress

Dengan stylenya yang terbilang elegan dan kemudahan dalam penggunaannya, advanced post slider bisa dijadikan alternativ bagi yang tidak mau repot dan tidak ingin dipusingkan dengan ribuan kode.

Berikut saya akan jelaskan cara membuat image slide show di WordPress menggunakan advanced post slider step by step.

Step 1: Download terlebih dahulu plugin advanced post slider di https://wordpress.org/plugins/advanced-post-slider/, kemudian ekstrak, dan taruh di direktori wpcontent/plugins/taruhdisini, jika folder plugins tidak ada, Anda bisa membuatnya secara manual.

Step 2: Aktifkan plugin advanced post slider, caranya: masuk ke Dashboard > Plugins > Installed Plugins > Activate.
pluginscrop

activatecrop

Step 3: Masuk ke pengaturan advanced post slider, Kemudian Anda akan dihadapkan oleh 4 menu. Template One, Template Two, Template Three, Thumbnails. Jika Anda ingin mengatur lebar dan tinggi thumbnails, atau gambar yang ingin ditampilkan,  pilihlah menu thumbnails kemudian masukkan angka untuk mengatur lebar thumbnail di kotak input width, atur juga tinggi thumbnails yang ingin ditampilkan dengan memasukkan angka pada kotak input height, jika sudah selesai, klik save.
thumbcrop

Step 4: Pilih style yang ingin ditampilkan, Advanced post slider menyediakan 3 style / template: Template One, Template Two, Template Three, pilih salah satu atau beberapa style yang ingin ditampilkan. Untuk melihat demo template anda bisa mengunjungi tautan ini: https://wordpress.org/plugins/advanced-post-slider/

Step 5: Jika Anda menyukai template one, klik Add new slideshow, kemudian atur slideshow yang telah ditambahkan tadi. pada form Select Post > Select post using, Saya memilih post list, Kemudian pada Select Post form list, silahkan pilih 2-4 posts yang ingin ditampilkan, caranya: tekan CTRL + klik satu persatu postingan yang dipilih. Adapun pada pengaturan-pengaturan dibawahnya, Anda bisa mengaturnya sesuka Anda.
selecttemplatecrop

selectpostscrop

Step 6: Simpan dan taruh kodenya pada elemen yang Anda kehendaki. Anda bisa mendapatkan kode tersebut pada form Label & Usage.
usagecrop
Pada screenshot diatas, Anda bisa melihat kode yang digunakan untuk menampilkan image slide show ada pada kotak input usage. Jadi jika Anda ingin menaruh kode tadi pada elemen yang Anda kehendaki, maka kodenya adalah:

<?php echo do_shortcode('kode yang tertera pada kotak input usage'); ?>

Beginilah hasilnya:

10 Keuntungan dan Manfaat yang Bisa Kamu Dapatkan Dari Ngeblog

10 Keuntungan dan Manfaat yang Bisa Kamu Dapatkan Dari Ngeblog

Banyak orang ngeblog hanya untuk sekedar iseng-iseng saja, ada di antara mereka yang ngeblog untuk berbagi dan menceritakan semua pengalaman hidupnya, ada juga dari mereka […]

3 Alasan Mengapa Profesi IT Merupakan Profesi yang Cocok Bagi Introvert

3 Alasan Mengapa Profesi IT Merupakan Profesi yang Cocok Bagi Introvert

Di pagi hari yang berbahagia ini, saya sempatkan untuk menulis artikel tentang 3 alasan mengapa profesi IT merupakan profesi yang cocok bagi introvert, dengan tujuan […]

Penemuan Komputer dan Pengaruhnya Terhadap Keamanan

Penemuan Komputer dan Pengaruhnya Terhadap Keamanan

Penemuan komputer dan pengaruhnya terhadap keamanan , mungkin itulah judul yang tepat untuk artikel ini. Sobat semuanya, masih ingat zaman dahulu? Zaman di mana komputer […]

Syarat-syarat Menjadi Seorang Blogger yang Sukses

Syarat-syarat Menjadi Seorang Blogger yang Sukses

Mengingat akan sulitnya jalan yang ditempuh agar sukses di bidang blogging, akhirnya beberapa hari yang lalu saya coba untuk menuliskan suatu artikel tentang syarat-syarat yang […]

Itulah cara membuat image slide show di WordPress menggunakan advanced post slider.

 

Tahapan lengkap cara membuat template WordPress bisa Anda lihat di http://kafeinkode.com/membuat-template-wordpress/

Kursus bahasa arab berkualitas

9 comments

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. dedyakas@gmail.com'

    Artikel yang menarik gan, patut dicoba, untuk mempercantik tampilan blog. Salam, Dedy Akas Website

    Reply
  2. Pingback: Mengatasi Konflik jQuery | KafeinKode

  3. dedesyabanalmutaqin@gmail.com'

    Gan, step no 6 detailnya gmna ? ane newbie

    Reply
  4. fajarseptian98@gmail.com'

    naruh kode php nya dimana gan

    Reply
  5. kasamago@gmail.com'

    bermanfaat gan, tp masih lg nyari yg tanpa plugin.. itu skrip nya bagaimana y.. thx

    Reply