Menambahkan animasi slider dengan WOWSlider ke Blogger

Sudah sejak 5 tahun yang lalu sejak saya mengetahui adanya program Javascript yang bisa mempercantik penampilan blog, saya mencari cara menambahkan WOWSlider slideshow pada blog. WOWSlider bisa membuat berbagai macam tampilan slide yang keren tanpa pengetahuan tentang koding. Aplikasinya menghasilkan beberapa file folder antara lain:

• -          Folder “engine” yang menyimpan kode CSS dan JavaScript 
• -          Folder “data” yang menyimpan gambar slide berikut thumbnail dan gambar “tooltip”
• -          Dan, dokumen HTML, terkait index.html

Entah mengapa berulang kali mencobanya di masa lalu, tidak berhasil. Waktu itu saya berasumsi mungkin masalahnya terletak pada tidakadanya server untuk menjadi host kode-kode, karena saya menggunakan blogspot yang notabene gratisan.

Terdorong rasa penasaran saya mencoba mencari referensi dan akhirnya ketemu juga caranya meskipun cukup berputar-putar.

Menyimpan Folder dan File di Google Drive

Kalau bisa gratis mengapa harus cari yang bayar? Karena saya tidak punya hosting website, mana saya pun mencoba peruntungan dengan Google Drive yang berkapasitas penyimpanan 15Giga sebagai gantinya.

• Di akun Google Drive, saya menambahkan folder “Slider1”
• Saya lalu mengubah setting folder menjadi terbuka untuk publik (public on the Web - anyone can find and view).
• Lalu, saya menambahkan struktur folder sebagaimana struktur yang digenerate oleh WOWSlider, yaitu folder “engine1” dan “data1.”
• Di dalam “data1” saya tambahkan folder “images” dan “tooltips”
• Lalu, saya unggah semua file WOWSlider files (kecuali index.html!) dari deskstop ke folder yang sudah saya siapkan.

Kemudian, saya menyalin tautan di folder “Slider1” dan menyalinnya ke teks editor seperti Notepad.

Tampak tautan berikut:

https://drive.google.com/folderview?id=0B_AVHkVSk_1oLTIxOWhxZ21qTjg&usp=sharing

Harap dicatat bahwa bagian “id=" menunjuk pada id folder utama (minus bagian "&authuser=0"). Saya salin hanya bagian id-nya dan saya buat seperti tampak di tautan berikut:

https://googledrive.com/host/0B_AVHkVSk_1oLTIxOWhxZ21qTjg

Kemudian saya buka file index.html di desktop yang dihasilkan oleh aplikasi WOWSlider dengan Notepad. Di sana ada beberapa tautan. Yang saya lakukan kemudian adalah menambahkan

"https://googledrive.com/host/0B_AVHkVSk_1oLTIxOWhxZ21qTjg/" ke semua tautan URL sehingga tautannya menjadi seperti di bawah ini:

src="engine1/jquery.js"

menjadi

src="https://googledrive.com/host/0B_AVHkVSk_1oLTIxOWhxZ21qTjg

/engine1/jquery.js"

Semua tautan URL yang menunjuk pada gambar, CSS, JavaScript (JS) disisipi tautan itu. Semuanya tanpa kecuali.

Setelah selesai saya simpan dalam bentuk text HTML dengan extensi UTF-8

Selanjutnya, saya mengungah text index.html yang sudah diedit ke Google Drive di dalam folder “Slider1”

Selanjutnya, ambil copy link dan letakkan setelah: https://googledrive.com/host/0B_AVHkVSk_1oZFNzWFFnMGtHLTg

untuk memanggil slide.

Selanjutnya, tinggal menaruh tautan index.html ke Blogger bisa melalui Layout ataupun Page atau Post.

Ada yang menyarankan memakai kode di bawah ini supaya presentasi lebih cantik.



<iframe src="https://googledrive.com/host/0B_AVHkVSk_1oZFNzWFFnMGtHLTg/index.html" style="height:350px;width:585px;margin-left:-20px;overflow:hidden;border:none;" scrolling="no"></iframe>

Cek keindahannya di sini. Tadaa,,indah bukan?

*catatan: Sejak akhir Agustus 2016, Google Drive menghentikan layanan untuk storage public folder. Jadi, seluruh tutorial di atas, tidak lagi bisa dipergunakan. 

Baca juga: Google Drive Tidak Bisa Lagi untuk Hosting Web