Menu Close

Cara Membuat Testimoni Responsive Slide

Cara Membuat Testimoni Responsive Slide – Halo Indonesian Blogger, Testimoni sangat dibutuhkan untuk mendapatkan kepercayaan yang lebih dari calon costumer pada sebuah website yang bergelut dibidang onlineshop, atau penyedia jasa.

Baca: Cara Pasang Widget Most Commented Di Blogger

Mungkin Anda sudah mengerti atau paham apa itu testimoni, jika belum saya jelaskan sedikit. Testimoni adalah feedback dari para pelanggan atau pengunjung dari pengguna jasa yang memberikan pendapat mereka tentang pelayanan yang diberikan.

Seperti yang sudah saya sebutkan diatas dengan testimoni anda akan lebih bisa mendapatkan kepercayaan dari konsumen untuk menggunakan jasa anda. Tapi tidak langsung 100% orang akan percaya dengan testimoni yang Anda suguhkan, mereka juga akan analisa.

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 feedback mereka akan disertai foto dan isi dari feedback yang mereka berikan tentang pelayanan, produk dan jasa Anda.

Cara Membuat Testimoni Responsive Slide

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:#ffff dengan warna lain yang lebih gelap.

Javascript

Letakan script ini diatas < / body > (tanpa spasi)

<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>

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>

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 tips kali ini 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.

Related Posts

6 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *