Membuat Testimonial Responsive Slide Widget

Membuat Testimonial Responsive Slide Widget - Jika Anda mempunyai toko online blog atu blog jual jasa, dan sejenisnya, mungkin salah satu widget yang perlu disimpan di blog yaitu widget testimonial.

Tentunya testimonial di sini yaitu komentar dari para pelanggan atau pengguna jasa kita perihal kepuasan dalam berbelanja atau memakai jasa kita. Sehingga dengan begitu akan menambah keyakinan calon konsumen lainnya untuk berbelanja di blog kita.

Untuk itu sekarang aku share sebuah widget testimonial yang responsive dengan memakai jquery slider sehingga sanggup menampilkan testimonial satu per satu secara slide yang disertai dengan photo klien atau pelanggan.

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

DEMO

Testimonial slider widget ini berasal dari:

• Source code: http://www.webdesigntunes.com/coding/testimonials-slider-with-jquery/

Kemudian aku modif sedikit CSS style-nya supaya slider ini menjadi responsive. Nah bagi yang ingin mencobanya, silahkan gunakan kode-kode di bawah ini.

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 arahan .testimonials-box{margin:0 auto;color:#FFF}

Kode Javascript
Silahkan simpan arahan javascript di bawah ini di atas arahan </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 memakai jquery terbaru menyerupai 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="Membuat Testimonial Responsive Slide Widget Membuat Testimonial Responsive Slide Widget" 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="Membuat Testimonial Responsive Slide Widget Membuat Testimonial Responsive Slide Widget" 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="Membuat Testimonial Responsive Slide Widget Membuat Testimonial Responsive Slide Widget" 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 sanggup dimengerti dan bermanfaat... Selamat mencoba........

Sumber https://www.kompiajaib.com/

Share this post