Membuat Widget Slide Testimonial Responsive

Membuat widget slide testimonial responsive - jika anda memiliki sebuah blog toko online ataupun blog jual jasa dan sejenisnya,mungkin widget yang satu ini perlu anda terapkan di blog anda

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

Demo
click to view

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 !