L

Cara Mudah Menerapkan Efek ParticleJS pada WordPress dengan Plugin Khusus


Bismillahirrohmanirrohim


ParticleJS Background

Sejak saya menerapkan efek partikel pada bagian header blog saya ini, rasanya blog saya terasa lebih “Hidup”, tidak membosankan 😀

Cukup lama saya mencari apa nama dari efek tersebut, terlihat seperti bintang-bintang di langit yang saling terhubung, saya pun menggunakan keyword “Link Star” dan tidak membuahkan hasil, hingga saya bertanya di Forum dan mendapatkan jawaban bahwa nama dari efek tersebut adalah Efek Partikel. Kata kunci pun sudah didapatkan dan saya pun dengan mudah menemukan nama skripnya yakni ParticleJS yang bisa diterapkan dengan mudah hanya menggunakan plugin di WordPress Self Hosted.

Pertamakali saya melihat efek ini ketika saya berkunjung di salah satu website penyedia web hosting di Indonesia dan melihat efek yang sangat unik pada header-nya, selain bergerak secara otomatis, partikel itu juga mengikuti arah kursor/pointer mouse ketika melakukan mouseover yakni meletakkan kursor di atasnya, dan masih tidak hanya sampai disitu saja, ketika mouse kita klik kanan maka partikel itu pun merespon.

Efek partikel ini juga diterapkan pada halaman login Virtualizor, setidaknya sampai artikel ini saya tulis, karena bisa saja kedepannya tidak lagi 😀

Oke, nama efek ini sudah tau, bukan garis-garis, bukan jaring-jaring, dsb, yang benar adalah ParticleJS 😀

Dari namanya saja sudah ketahuan bahwa ini menggunakan JavaScript, lebih tepatnya adalah JSON (JavaScript Object Notation).

 

Mendapatkan Script ParticleJS

Untuk mendapatkannya, caranya sangat mudah dan langsung Live Preview, silahkan klik disini.

Saya tidak akan menjelaskan seluruh options di sana, silahkan bereksperimen sendiri, saya yakin Anda akan terbiasa dengan sendirinya 😀

Jika sudah, generate/download script-nya karena link di atas adalah aplikasi ParticleJS Generator.

Tidak hanya berupa partikel seperti yang ada pada blog saya ini saja, kita juga bisa membuat efek salju yang sedang turun dari langit, dsb

Untuk selanjutnya kita bisa mengutak atik kode-nya tanpa melalui aplikasi generator itu lagi, tentu saja harus paham dasar-dasarnya agar tidak bingung 😀

 

Menerapkan ParticleJS

Setelah kode JSON-nya sudah Anda konfigurasi sesuai keinginan Anda pada link di atas, maka selanjutnya tentu saja menerapkannya ke blog kita.

Sesuai judul artikel ini, maka saya hanya berfokus pada CMS (Content Management System) berbasis WordPress Self Hosted saja, yakni dengan menggunakan plugin.

Sayangnya plugin ParticleJS ini tidak tersedia di direktori plugin resmi di WordPress.org, melainkan di GitHub, disini.

Untuk mendapatkannya, klik pada tombol “Clone or Download” lalu klik “Download ZIP”.

Selanjutnya install secara manual melalui WP Admin atau cPanel pada direktori ~/public_html/wp-content/plugins.

 

Ketika plugin sudah berhasil terpasang (Installed), cari menu setting “Particle Background” di WP Admin, posisinya di luar kok, bukan di kategori Settings.

Di sana ada textbox khusus untuk memasang script ParticleJS yang sudah Anda generate tadi.

Hanya saja tidak bisa begitu saja dilakukan Copy Paste, kita harus menentukan atribut id=""  pada tag <div>  agar mudah dalam penerapannya.

Berikut adalah frame-nya:

Silahkan Copy Paste kode Particle JS yang sudah digenerate sebelumnya pada bagian yang sudah saya tandai di atas.

Disitu saya menggunakan “partikel” sebagai id-nya.

Anda bisa juga menggunakan id yang sudah ada di theme yang Anda gunakan sehingga tidak usah menambahkan tag div baru.

Untuk menerapkannya di theme yang Anda gunakan, itu adalah tugas Anda 😀

Mengingat ada banyak theme yang coding-nya pun beragam, jadi saya tidak bisa bantu, intinya adalah cara memanggil ParticleJS ini adalah dengan menggunakan atribut id pada tag div.

Sayangnya kita tidak bisa memanggilnya lebih dari satu kali, misalnya kita ingin menerapkan ParticleJS pada Header dan Footer, itu tidak bisa.

 

Mudah sekali menerapkan ParticleJS ini, namun bagi saya yang lama itu proses pencariannya, karena salah keyword 😀


Protected by DMCA ! Protected by Premium Copyscape !

Hi, Bagaimana Menurut Anda ?


Jadilah Pembaca yang Baik dengan cara meninggalkan Komentar pada setiap Artikel Bermanfaat yang sudah dibaca (•‿•)


Komentar adalah salah satu Faktor Penyemangat bagi seorang Blogger, termasuk juga saya. Sebagai bukti bahwa saya tidak sendirian disini, mengingat ada banyak sekali Viewer (Pembaca) Artikel di Blog saya ini. Tolong, jangan pergi begitu saja.


Tinggalkan Komentar Anda disini meskipun hanya sekedar menyapa saya, mari kita bangun Forum Diskusi di Kolom Komentar pada setiap Artikel di Blog ini.


Oleh karena itu, saya sudah menyediakan Fasilitas Comment System terbaik saat ini yakni Disqus Comments System untuk membangun Komunitas Komentator yang lebih Advanced lagi, tidak diperlukan Account Disqus untuk bisa berkomentar disini, Anda cukup memasukkan Nama dan Email saja, tapi saya sarankan untuk memiliki Account Disqus jika Anda sering berkomentar di banyak Blog yang menggunakan Disqus Comment System.

Mungkin Anda juga menyukai



Facebook Comments



Disqus Comments



×
SSL Verified