Cara Mudah Membuat Testimonial Slider di Website

Selamat datang di The Royal Moringa. Pada artikel sebelumnya, saya membahas mengenai cara membuat simple slideshow di blog. Slideshow sendiri dapat difungsikan sebagai widget untuk menampilkan gambar yang anda sukai. Pada kesempatan kali ini, saya akan membahas bagaimana cara membuat widget testimonial dalam bentuk slider. Jadi widget ini akan menampilkan komentar maupun pesan-pesan dari pembaca atau pelanggan website anda. Apa isi pesannya? Isinya bisa berupa kepuasan pelanggan terhadap produk yang anda tawarkan kepada mereka atau kesan selama menggunakan layanan di website anda dan sebagainya. Testimonial slider sebagian besar digunakan oleh website yang menjual produk/layanan seperti jasa membangun dan renovasi rumah, salon, hotel, travel agent, dan berbagai hal yang berhubungan dengan bisnis dan komunikasi. Tetapi widget ini juga boleh dipasang di blog anda yang suka berbagi informasi pada pembaca. Nah, bagi anda yang tertarik ingin memasang widget testimonial di blog/website anda silakan simak langkah-langkah berikut.

1. Log in ke akun blog anda > Pada dashboard pilih Theme > Edit HTML

2. Copy dan paste kode script berikut sebelum ]]></b:skin>. Anda bisa mencari kode tersebut dengan menggunakan CTRL + F.

#responsive-container {
width:1140px;
margin:auto;
}
.testimonial {
    height:500px;
    width:100%;
    padding:1em;
    margin:1em auto;
}

.testimonial div {
    text-align:center;
    vertical-align:middle;
    color:#999966;
    font-family:monospace;
    font-size:1.5em;
}
.testimonial h2{
 font-size:30px;
 font-weight:300;
 margin: 25px 0px 48px 0px;
 width: 100%;
 text-align: center;
}
.testimonial img{
margin:0 1em 0 1em;
border-radius:100%;
width:200px;
height:200px;
}
.testimonial p{
text-align:center;
vertical-align:middle;
color:#222;
font-family:Arial;
font-size:20px;
}
.testimonial h3{
 font-size:15px;
 text-align: center;
}
#slideshow1 {   
    background:transparent;
}
#slideshow2 {   
    background:transparent;
}
#slideshow3 {   
    background:transparent;
}
#slideshow4 {   
    background:transparent;
}

3. Setelah itu copy dan paste kode javaScript berikut sebelum </head> sebagai pengaturan animasi slide yang berjalan

<script type="text/javaScript">
function startSlides(start, end, delay) {
        setTimeout(slideshow(start,start,end, delay), delay);
    }
    function slideshow(frame, start, end, delay) {
        return (function() {
        $('#slideshow' + frame).fadeOut();
        if (frame == end) { frame = start; } else { frame += 1; }
        setTimeout(function(){$('#slideshow' + frame ).fadeIn();}, 850);
        setTimeout(slideshow(frame, start, end, delay), delay + 850);
    })
    }
    // usage: startSlides(first frame, end frame, delay time);
    startSlides(1, 4, 5000);
</script>

4. Berikutnya anda menuju bagian <body> kemudian copy dan paste kode script HTML berikut sesuai dengan keinginan anda dimana widget testimonial akan ditaruh. Pada umumnya widget testimonial diletakkan sebelum atau di atas footer. Jika anda menghendaki widget ini diletakkan di atas footer maka cari kode script yang mengawali widget footer anda seperti <div class="footer-widget">. Setiap template memiliki nama footer yang berbeda.

<div id="responsive-container">
<div class="testimonial">
  <h2>
Testimonials</h2>
<div id="slideshow1">
  <img src="URL GAMBAR ANDA"/>
<p>
Lorem Ipsum dolor sit amet, consectetur adipisicing elit,sed do 

euismod tempor incididunt ut labore et dolore magnaaliqua, ut enim.</p>
<div>
Nama 1</div>
<h3>
Jabatan 1</h3>
</div>
<div id="slideshow2" style="display: none">
        <img src="URL GAMBAR ANDA"/>
<p>
Lorem Ipsum dolor sit amet, consectetur adipisicing elit,sed do 

euismod tempor incididunt ut labore et dolore magnaaliqua, ut enim.</p>
<div>
Nama 2</div>
<h3>
Jabatan 2</h3>
</div>
<div id="slideshow3" style="display: none">
         <img src="URL GAMBAR ANDA"/>
<p>
Lorem Ipsum dolor sit amet, consectetur adipisicing elit,sed do 

euismod tempor incididunt ut labore et dolore magnaaliqua, ut enim.</p>
<div>
Nama 3</div>
<h3>
Jabatan 3</h3>
</div>
<div id="slideshow4" style="display: none">
         <img src="URL GAMBAR ANDA"/>
<p>
Lorem Ipsum dolor sit amet, consectetur adipisicing elit,sed do 

euismod tempor incididunt ut labore et dolore magnaaliqua, ut enim.</p>
<div>
Nama 4</div>
<h3>
Jabatan 4</h3>
</div>
</div>
</div>

5. Silakan anda ubah URL GAMBAR ANDA dan lengkapi isian komentar berupa nama, komentar, dan jabatan yang bersangkutan > Save Theme

Anda boleh mengganti jenis huruf, warna, ukuran huruf dari pengaturan di atas sesuai dengan selera anda. Perlu diperhatikan, gambar yang ditampilkan nanti akan berbentuk lingkaran/circle maka dari itu pastikan bahwa gambar yang anda gunakan berbentuk persegi/square (kotak). Jika gambar anda berbentuk persegi panjang maka hasilnya akan berbentuk oval, untuk itu silakan anda crop terlebih dahulu menggunakan aplikasi edit foto yang anda miliki. Terima kasih telah membaca!

6 Comments

muhammad daffaDecember 19, 2019 at 8:48 AM
itu maksimal 4 aja ya slide nya? gabisa di tambahin
EnricoDecember 19, 2019 at 8:57 AM
Hi Daffa, untuk menambah slide lagi silakan anda duplikat tag "slideshow" tersebut pada kode HTML begitu juga pada kode CSS. Selamat mencoba.
YOMA LondreFebruary 20, 2020 at 1:26 PM
gak bisa responsive ya
AdminApril 16, 2020 at 11:17 PM
ga responsif..
Admin SafiraJuly 26, 2021 at 1:00 PM
animasi slide nya gak jalan

Emoji

(y)

hihi

:-)

:-d

;(

;-(

@-)

:>)

(o)

(p)

:-s

(m)

8-)

:-t

:-b

b-(

:-#

=p~

x-)

(k)

The Royal Moringa

Cara Mudah Membuat Testimonial Slider di Website

Post a Comment

6 Comments

Popular Posts

Cara Mudah Membuat Form Pendaftaran di Blog

Perbedaan Penulisan Sumber Kutipan & Daftar Pustaka

Cara Menyimpan File Dokumen Line di Android

Categories

Footer Menu Widget

The Royal Moringa

Cara Mudah Membuat Testimonial Slider di Website

You may like these posts

Post a Comment

6 Comments

Social Plugin

Popular Posts

Cara Mudah Membuat Form Pendaftaran di Blog

Perbedaan Penulisan Sumber Kutipan & Daftar Pustaka

Cara Menyimpan File Dokumen Line di Android

Categories

Footer Menu Widget