Cara Memasang Auto Slideshow
Coin slider merupakan slideshow yang di buat dengan jQuery yang memiliki efek transisi yang menarik. Efek transisi yang ada pada slideshow ini yaitu swirl, rain, straight. Karena efeknya yang tidak terlalu banyak sehingga auto slideshow ini hanya memiliki ukuran (12kb).
Melihat struktur HTML untuk membuat auto slideshow ini tidak terlalu rumit. Sehingga saya mencoba membuatnya dalam versi auto slideshow (di gabung dengan feed blogger). Nah bagi anda yang ingin memasang di blog anda bisa ikuti langkah-langkah yang ada di bawah ini. Sedangkan yang tertarik untuk versi manualnya dapat membaca di websitenya workshop.rs.
Menampilkan Add a Gadget diatas Blog Post
Jika di blog anda belum tampil tombol atau tulisan add gadget di atas Blog Posts ikuti langkah berikut untuk menampilkannya:
- Pada dashbord pilih Template kemudian klik tombol Edit HTML
- Kemudian cari kode lalu ganti rubah showaddelement menjadi yes sehingga menjadi seperti ini
NB: Untuk mempermudah dalam pencarian tekan Ctrl+F pada keyboard lalu tulis . - Klik Simpan
Menambahkan gadget HTML dan Script Auto Slideshow Coin Slider
- Pada dashbord pilih Layout atau Tata Letak kemudian klik tulisan Add a Gadget diatas Blog Post Area
- Setelah itu scroll ke bawah hingga menemukan HTML atau JavaScript lalu klik tombol tambah yang ada di sudut kanan
- Kemudian Masukkan Kode berikut:
%MINIFYHTML4a85656408d53fbe130689a1104e1ca170%%MINIFYHTML4a85656408d53fbe130689a1104e1ca122%%MINIFYHTML4a85656408d53fbe130689a1104e1ca123%%MINIFYHTML4a85656408d53fbe130689a1104e1ca124%
- NB: Pada line 17 adalah link script jQuery library. Jika di template ada sudah ada silahkan hapus kode ini. Karena pemasangan lebih dari 1 jQuery Library dapat membuat error
- Klik Simpan.
Membungkus Gadget HTML dengan Tag Kondisional
Jika tahap di atas sudah selesai sekarang tahap pembungkusan gadget dengan tag kondisional untuk mengatur di mana saja auto slideshow ini mau di tampilkan.
Misalnya gadget itu hanya ingin di tampilkan di halaman depan atau beranda cara sebagai berikut
- Pada dashbord pilih Template kemudian klik tombol Edit HTML dan centang pada bagian Expand Widget Templates
- Kemudian cari kode , karena sebelumnya telah di tambahkan HTML widget maka akan terlihat widget type HTML dengan id HTMLxx (xx: nomor widget HTML).
Misalnya widget HTML dengan id HTML5 yang akan saya tambahkan tag kondisional hanya pada halaman depan/beranda
Maka akan menjadi seperti ini:
<b:widget id="HTML5" locked="false" title="" type="HTML"> <b:includable id="main"> <b:if cond="data:blog.url == data:blog.homepageUrl"> <!-- only display title if it's non-empty --> <b:if cond="data:title != """> <h2 class="title"><data:title></data:title></h2> </b:if> <div class="widget-content"> <data:content> </data:content></div> <b:include name="quickedit"> </b:include></b:if> </b:includable> </b:widget>
- Klik Simpan.
