BerlanggananBerlangganan Artikel Gratis Langsung Di Email Anda

Cara Membuat Testimoni Responsive Slide

KrocoNet.com – Cara Membuat Testimoni Responsive Slide,  Testimoni mungkin dibutuhkan untuk mendapatkan kepercayaan pengunjung pada sebuah website yang bergelut dibidang onlineshop, atau penyedia jasa . Mungkin anda sudah mengerti atau paham apa itu testimoni ,jika belum saya akan menjelaskan sedikit pengertian dari testimoni

Testimoni adalah komentar dari para pelanggan atau pengunjung dari pengguna jasa yang memberikan pendapat mereka tentang pelayanan yang diberikan, produk atau jasa yang disuguhkan dan banyak lagi lainnya. Seperti yang sudah saya sebutkan diatas dengan testimoni anda akan lebih bisa mendapatkan kepercayaan dari konsumen untuk menggunakan jasa anda. Tapi tidak 100% orang percaya, hanya beberapa % saja karena banyak Website yang menggunakan testimoni tapi mereka melakukan penipuan terhadap konsumennya.
Maka dari itu  saya akan share widget yang berasal dari mas adhy pemilik website kompi ajaib yang ia dapatkan artikelnya dari sini tentang Bagaimana Cara Membuat Testimoni Responsive Slide dengan menggunakan jQuery slider sehingga dapat menampilkan testimoni satu demi satu secara bergantian atau bisa disebut slide show yang dimana komentar mereka disertai foto dan isi dari komentarnya.
Silahkan Lihat Demonya : Demo 
Cara Buat Testimoni Responsive
  • 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(https://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}
}

Catatan : Jika anda menggunakan template dengan background yang terang silahkan ganti color:#fff yang saya beri tanda merah.

  • Kode Javascript

Silahkan letakkan kode script ini diatas </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>

Catatan: Pastikan anda sudah memasang jQuery Library pada template blog anda, jika belum gunakan kode 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>

Sekian Cara Membuat Testimoni Responsive Slide semoga dapat bermanfaat dan dimengerti , Silahkan terapkan di blog atau toko online anda, Jika ada kritik dan saran silahkan mengisi komentar pada kolom yang telah tersedia, Terima Kasih.