yang dimaksud testimonial disini 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
dan kali ini saya akan share sebuah widget testimonial yang responsive dengan menggunakan jquery slider,widget ini ane temukan diblognya mas adhy suryadi,sehingga dapat menampilkan testimonial satu per satu secara slide yang disertai dengan photo klien atau pelanggan
demonya bisa anda lihat pada screenshot dibawah ini,atau bisa langsung dicoba responsive nya pada kolom demo jsfiddle dibawah dengan menggeser-geser kolomnya
Nah bagi yang ingin mencobanya silahkan gunakan kode-kode dibawah ini
.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 maka rubah colour:#FFF pada kode .testimonial-box{margin:0 auto:color;#FFF}
<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>
Kode Javascript disimpan diatas kode </body> dan pastikan anda sudah memasang kode Jquery library ditemplate anda,,gunakan Jquery library yang terbaru
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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 dapat bermanfaat !
ngambil pertamax dulu dah disni , mumpung lagi turun harga bbm ...
BalasHapusSiip mas :TS
HapusSaya ikutan mas. premium aja tapi, pertamax mahal. hehe
HapusBBM sudah turun mas :)
Hapuskalo mau BBM gratis make kartu 3 mas hahayde :ng *kaburr
HapusKeren nih mas yudha, saya bookmark dulu untuk keperluan kemudian hari, btw, nice share kang yudha.
BalasHapusSilahkan mas
Hapusmakasih mas :-bd
Nyimak kak :)
BalasHapussilahkan (c)
HapusKnjungan mlm sob,nyimak aj..
BalasHapus