Ditulis oleh: Ditulis pada: 11/22/2014
Membuat Testimonial Responsive Slide Widget - Jika Anda memiliki toko online blog atu 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 slider widget ini berasal dari:
- Source code: http://www.webdesigntunes.com/coding/testimonials-slider-with-jquery/
Kode CSS
.testimonials-box{margin:0 auto;color:#FFF}
.bx-wrapper .testimonials-thumbnail{ margin: 0px 0px 15px; }
.bx-wrapper .testimonials-title{ text-align: center; margin: 25px 15px 3px; font-size: 24px; line-height: 1; }
.bx-wrapper .testimonials-carousel-thumbnail{ max-width: 35%; float: left; margin-right: 10px; }
.bx-wrapper .testimonials-carousel-thumbnail img{ display: block; margin-right: 10px;width: 100px;}
.bx-wrapper .testimonials-carousel-context{ overflow: hidden; }
.bx-wrapper .testimonials-name{ font-size: 18px; margin-bottom: 10px;margin-top:-3px; font-weight:400;width:95%}
.bx-wrapper span{ font-size: 11px; margin-left:10px; color:#aaa; font-family: Georgia, Arial, Helvetica, sans-serif; font-style:italic; }
.bx-wrapper {position: relative;margin: 0 auto;padding: 0;width:94%;}
.bx-wrapper .slide {padding:0;margin:0;display: block;}
.bx-wrapper .bx-viewport {padding:10px;margin-left:0;z-index:1;width:100%;}
.bx-wrapper .bx-pager,.bx-wrapper .bx-controls-auto {position: absolute;display:none;bottom: -30px;width: 100%;}
.bx-wrapper .bx-loading {min-height: 50px;background: url(http://webdesigntunes.com/tutorial/testimonials/images/bx_loader.gif) center center no-repeat #fff;height: 100%;width: 100%;position: absolute;top: 0;left: 0;z-index: 2000;}
.bx-wrapper .bx-next,.bx-wrapper .bx-prev {display:none}
.bx-wrapper .testimonials-carousel-content p{width:96%;margin:0; font-family: Georgia, Arial, Helvetica, sans-serif; font-style:italic;}
@media screen and (max-width:400px){
.bx-wrapper {width:85%;}
.bx-wrapper .testimonials-carousel-thumbnail{ max-width: 100%; margin:0 15px 10px 0;float:none }
.bx-wrapper .testimonials-carousel-thumbnail img{ width: 100%;height:auto}
}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>
<script src="http://yourjavascript.com/13912425571/jquery-bxslider-min.js"></script>
<script>
//<![CDATA[
$('.testimonials-slider').bxSlider({
slideWidth: 800,
minSlides: 1,
maxSlides: 1,
slideMargin: 32,
auto: true,
autoControls: true
});
//]]>
</script>Kemudian pastika Anda sudah memasang jquery library di template blog Anda. Saya sarankan untuk menggunakan jquery terbaru seperti di bawah ini.
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>Kode HTML
<div class="testimonials-box">
<div class="testimonials-slider">
<div class="slide">
<div class="testimonials-carousel-thumbnail"><img width="120" alt="" src="URL IMAGE DI SINI"/></div>
<div class="testimonials-carousel-context">
<div class="testimonials-name">NAMA KONSUMEN<span>ALAMAT KONSUMEN</span></div>
<div class="testimonials-carousel-content"><p>PESAN KONSUMEN DI SINI</p></div>
</div>
</div>
<div class="slide">
<div class="testimonials-carousel-thumbnail"><img width="120" alt="" src="URL IMAGE DI SINI"/></div>
<div class="testimonials-carousel-context">
<div class="testimonials-name">NAMA KONSUMEN<span>ALAMAT KONSUMEN</span></div>
<div class="testimonials-carousel-content"><p>PESAN KONSUMEN DI SINI</p></div>
</div>
</div>
<div class="slide">
<div class="testimonials-carousel-thumbnail"><img width="120" alt="" src="URL IMAGE DI SINI"/></div>
<div class="testimonials-carousel-context">
<div class="testimonials-name">NAMA KONSUMEN<span>ALAMAT KONSUMEN</span></div>
<div class="testimonials-carousel-content"><p>PESAN KONSUMEN DI SINI</p></div>
</div>
</div>
</div>
</div>Semoga bisa dimengerti dan bermanfaat... Selamat mencoba........