Coin slider merupakan slideshow yang dibuat 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 slideshow ini hanya memiliki ukuran (12kb).

Melihat struktur HTML untuk membuat slideshow ini tidak terlalu rumit. Sehingga saya mencoba membuatnya dalam versi autoslideshow (digabung dengan feed blogger). Nah bagi anda yang ingin memasang diblog anda bisa ikuti langkah-langkah yang ada dibawah ini. Sedangkan yang tertarik untuk versi manualnya dapat membaca di websitenya workshop.rs.

Menampilkan Add a Gadget diatas Blog Post

Memasang Auto Slideshow Coinslider di Blogspot

Jika diblog anda belum tampil tombol/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
Baca Juga :  Cara mengatasi windows explorer yang otomatis terbuka saat start up

Menambahkan gadget HTML dan Script Slideshow Coin Slider

  • Pada dashbord pilih Layout/Tata Letak kemudian klik tulisan Add a Gadget diatas Blog Post Area
  • Setelah itu scroll kebawah hingga menemukan HTML/JavaScript lalu klik tombol tambah yang ada disudut kanan
  • Kemudian Masukkan Kode berikut:
  
  • 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 diatas sudah selesai sekarang tahap pembungkusan gadget dengan tag kondisional untuk mengatur dimana saja slideshow ini mau ditampilkan.
Misalnya gadget itu hanya ingin ditampilkan dihalaman depan/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 ditambahkan 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:


 
  
  
    

  • Klik Simpan.