Dapatkan Strategi Marketing Untuk Meningkatkan Traffik dan Penjualan

Membuat Slide Widget Testimonial Responsive Untuk Toko Online

Gambar terkait

Jika Anda memiliki toko online blog atau blog jual jasa, dan sejenisnya, mungkin salah satu widget yang perlu disimpan di blog adalah widget testimonial.

Tentunya testimonial di sini adalah komentar dari para pelanggan atau pengguna jasa kita tentang kepuasan dalam berbelanja atau menggunakan jasa kita. Sehingga dengan begitu akan menambah kepercayaan calon konsumen lainnya untuk berbelanja di blog kita.

Untuk itu kini saya share sebuah widget testimonial yang responsive dengan menggunakan jquery slider sehingga dapat menampilkan testimonial satu per satu secara slide yang disertai dengan photo klien atau pelanggan.

Untuk demonya bisa Anda lihat pada animasi gif di bawah ini atau silahkan coba langsung responsive-nya pada url demo JSFiddle di bawahnya dengan menggeser-geser kolomnya.

Testimonial Responsive Slide Widget


Testimonial slider widget ini berasal dari:
  • Source code: http://www.webdesigntunes.com/coding/testimonials-slider-with-jquery/
Kemudian saya modif sedikit CSS style-nya agar slider ini menjadi responsive. Nah bagi yang ingin mencobanya, silahkan gunakan kode-kode di bawah ini.

Kode CSS



 Jika disimpan pada background yang terang, silahkan ganti warna tulisannya color:#FFF pada kode .testimonials-box{margin:0 auto;color:#FFF}

Kode Javascript

Silahkan simpan kode javascript di bawah ini di atas kode </body>



Kemudian pastika Anda sudah memasang jquery library di template blog Anda. Saya sarankan untuk menggunakan jquery terbaru seperti di bawah ini.



Kode HTML



Semoga bisa dimengerti dan bermanfaat... Selamat mencoba........

0

Post a Comment

Peraturan dalam berkomentar !
--------------------------------------------
1. Berkomentarlah yang relevan sesuai topik yang dibahas diatas.
2. Gunakan bahasa yang baik dan sopan.
3. Tidak Meninggalkan Link aktif.
4. Tidak berkomentar mengandung SPAM