Testimoni pelanggan di Blogger dapat menjadi salah satu elemen penting untuk membangun kepercayaan pengunjung, terutama bagi Anda yang mengelola blog toko online, menawarkan jasa, menjual produk digital, atau menggunakan Blogspot sebagai halaman promosi.
Ulasan dari pelanggan dapat memberikan gambaran mengenai pengalaman orang lain setelah menggunakan produk atau layanan. Agar tampilannya lebih menarik, testimoni dapat disusun dalam bentuk slider otomatis sehingga beberapa ulasan dapat ditampilkan secara bergantian tanpa memenuhi seluruh area halaman.
Pada tutorial ini, kita akan membuat widget testimoni slider otomatis di Blogger menggunakan HTML dan CSS. Kode dibuat sederhana, responsive, dan tidak membutuhkan plugin tambahan. Slider akan berpindah secara otomatis menggunakan animasi CSS.
Apa Itu Widget Testimoni Slider?
Widget testimoni slider adalah komponen yang digunakan untuk menampilkan beberapa ulasan pelanggan dalam satu area dengan sistem pergantian tampilan. Setiap testimoni akan muncul secara bergantian sehingga ruang yang digunakan tetap relatif ringkas.
Format seperti ini cocok digunakan pada halaman bisnis, landing page, blog jasa, toko online, maupun halaman profil digital yang ingin menampilkan pengalaman pelanggan.
Keuntungan Menampilkan Testimoni Pelanggan
Testimoni dapat membantu calon pelanggan memperoleh informasi tambahan sebelum memutuskan menggunakan produk atau layanan. Beberapa manfaat yang dapat diperoleh antara lain:
- Meningkatkan kepercayaan pengunjung melalui pengalaman pelanggan sebelumnya.
- Memberikan social proof yang dapat menjadi pertimbangan sebelum melakukan pembelian.
- Membuat halaman bisnis terlihat lebih profesional dan informatif.
- Menghemat ruang halaman karena beberapa testimoni ditampilkan secara bergantian.
- Responsive sehingga dapat digunakan pada desktop maupun perangkat mobile.
- Mudah disesuaikan dengan identitas visual dan kebutuhan blog.
Kode Widget Testimoni Slider Otomatis Blogger
Berikut kode lengkap yang dapat digunakan untuk membuat slider testimoni otomatis di Blogspot. Kode ini menggunakan HTML dan CSS tanpa JavaScript untuk menjalankan animasi pergantian slide.
<!-- Widget Testimoni Slider -->
<style>
.testi-container {
width: 100%;
max-width: 600px;
margin: 20px auto;
overflow: hidden;
position: relative;
background: #f9f9f9;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
box-sizing: border-box;
text-align: center;
}
.testi-wrapper {
display: flex;
animation: slide 12s infinite;
}
.testi-item {
min-width: 100%;
box-sizing: border-box;
}
.testi-text {
font-style: italic;
color: #555;
font-size: 16px;
line-height: 1.6;
margin: 0 0 20px;
}
.testi-author {
font-weight: bold;
color: #333;
margin: 0;
}
.testi-stars {
color: #ffcc00;
margin-bottom: 10px;
letter-spacing: 2px;
}
/* Animasi Slider */
@keyframes slide {
0% {
transform: translateX(0);
}
33% {
transform: translateX(0);
}
38% {
transform: translateX(-100%);
}
66% {
transform: translateX(-100%);
}
71% {
transform: translateX(-200%);
}
100% {
transform: translateX(-200%);
}
}
/* Responsive */
@media screen and (max-width: 600px) {
.testi-container {
padding: 25px 18px;
}
.testi-text {
font-size: 15px;
}
}
</style>
<div class="testi-container">
<div class="testi-wrapper">
<!-- Testimoni 1 -->
<div class="testi-item">
<div class="testi-stars" aria-label="Rating 5 dari 5">★★★★★</div>
<p class="testi-text">
"Produknya sangat berkualitas dan pengirimannya sangat cepat.
Saya sangat puas dengan pelayanannya."
</p>
<p class="testi-author">
- Ahmad Subagja
</p>
</div>
<!-- Testimoni 2 -->
<div class="testi-item">
<div class="testi-stars" aria-label="Rating 5 dari 5">★★★★★</div>
<p class="testi-text">
"Pelayanan admin sangat ramah dan responsif.
Prosesnya juga mudah dan informasinya jelas."
</p>
<p class="testi-author">
- Siti Sarah
</p>
</div>
<!-- Testimoni 3 -->
<div class="testi-item">
<div class="testi-stars" aria-label="Rating 5 dari 5">★★★★★</div>
<p class="testi-text">
"Awalnya saya masih ragu, tetapi setelah mencoba
hasilnya sesuai dengan kebutuhan saya."
</p>
<p class="testi-author">
- Budi Santoso
</p>
</div>
</div>
</div>Penjelasan Cara Kerja Widget Testimoni
Widget tersebut terdiri dari container utama, wrapper slider, dan beberapa item testimoni. Setiap item memiliki lebar 100% sehingga hanya satu testimoni yang terlihat dalam satu waktu.
Container Testimoni
.testi-container {
width: 100%;
max-width: 600px;
overflow: hidden;
}
Container digunakan untuk membatasi area widget. Properti overflow: hidden membuat bagian slide yang berada di luar container tidak terlihat.
Testimoni dengan Lebar Penuh
.testi-item {
min-width: 100%;
}Setiap testimoni menggunakan lebar minimal 100 persen dari container. Dengan struktur tersebut, setiap slide akan menempati satu area penuh sebelum berpindah ke testimoni berikutnya.
Animasi Slider
Pergantian testimoni dikendalikan oleh @keyframes slide. Dalam contoh ini terdapat tiga testimoni yang berpindah secara otomatis selama 12 detik dan kemudian kembali ke slide awal.
Cara Memasang Widget Testimoni di Blogger
Setelah kode siap, Anda dapat memasangnya melalui menu Tata Letak Blogger. Metode ini tidak mengharuskan Anda mengubah struktur utama template.
Langkah 1: Buka Dashboard Blogger
Masuk ke dashboard Blogger, kemudian pilih blog yang ingin Anda pasang widget testimoni. Setelah itu buka menu Tata Letak atau Layout.
Langkah 2: Tambahkan Gadget
Pilih area tempat widget ingin ditampilkan. Anda dapat menggunakan bagian Sidebar, Footer, atau area layout lain yang menyediakan opsi untuk menambahkan gadget.
Klik Tambahkan Gadget, kemudian pilih HTML/JavaScript.
Langkah 3: Masukkan Kode
Pada bagian judul, Anda dapat mengosongkannya atau menggunakan judul seperti Kata Pelanggan Kami. Selanjutnya tempelkan seluruh kode HTML dan CSS ke dalam kolom konten.
Langkah 4: Simpan dan Periksa Tampilan
Setelah kode selesai ditempelkan, klik Simpan. Kemudian buka halaman blog untuk melihat widget testimoni.
Periksa tampilan menggunakan komputer dan smartphone untuk memastikan ukuran widget sudah sesuai dengan layout template Blogger Anda.
Cara Mengubah Isi Testimoni
Anda dapat mengganti teks contoh dengan testimoni pelanggan yang sebenarnya. Perubahan dapat dilakukan pada bagian testi-text dan testi-author.
Contohnya:
<p class="testi-text">
"Tulis pengalaman pelanggan di sini."
</p>
<p class="testi-author">
- Nama Pelanggan
</p>Sebaiknya gunakan ulasan yang memang diberikan oleh pelanggan dan pastikan penggunaannya sesuai dengan izin atau ketentuan yang berlaku. Hindari membuat testimoni fiktif seolah-olah berasal dari pelanggan nyata.
Cara Mengubah Jumlah Testimoni
Secara default, kode di atas menggunakan tiga testimoni. Jika Anda ingin menambahkan testimoni keempat atau lebih, struktur HTML dapat ditambahkan dengan elemen testi-item.
Namun, bagian animasi @keyframes slide juga harus disesuaikan karena persentase perpindahan pada contoh tersebut dibuat khusus untuk tiga slide.
Untuk tiga testimoni, pola animasinya menggunakan perpindahan:
translateX(0)
translateX(-100%)
translateX(-200%)Jika jumlah slide bertambah, posisi perpindahan dan durasi animasi perlu dihitung ulang agar setiap testimoni dapat tampil dengan benar.
Cara Mengubah Kecepatan Slider
Kecepatan pergantian testimoni dapat diubah melalui nilai durasi animasi berikut:
animation: slide 12s infinite;Misalnya Anda ingin slider berjalan lebih lambat, ubah menjadi:
animation: slide 18s infinite;Sebaliknya, angka yang lebih kecil akan membuat seluruh siklus animasi berjalan lebih cepat. Sesuaikan durasinya dengan panjang teks testimoni agar pengunjung memiliki waktu yang cukup untuk membaca.
Cara Mengubah Warna dan Desain Widget
Tampilan widget dapat disesuaikan dengan warna utama template Blogger. Misalnya, warna latar belakang dapat diubah melalui:
background: #f9f9f9;Sementara warna bintang rating dapat diubah melalui:
.testi-stars {
color: #ffcc00;
}
Anda juga dapat menyesuaikan border-radius, box-shadow, ukuran font, padding, dan lebar maksimum agar widget lebih menyatu dengan desain blog.
Tips Membuat Widget Testimoni Lebih Profesional
Selain memperhatikan desain, kualitas informasi yang ditampilkan juga sangat penting. Testimoni sebaiknya dibuat ringkas, mudah dibaca, dan relevan dengan produk atau layanan yang ditawarkan.
- Gunakan testimoni pelanggan asli.
- Tampilkan nama pelanggan sesuai izin penggunaan yang diberikan.
- Gunakan kalimat yang singkat dan mudah dipahami.
- Sesuaikan warna widget dengan identitas visual website.
- Pastikan ukuran teks nyaman dibaca melalui smartphone.
- Jangan menampilkan terlalu banyak testimoni dalam satu widget.
- Pastikan animasi tidak terlalu cepat.
Apakah Testimoni Slider Bisa Meningkatkan Penjualan?
Testimoni dapat membantu memberikan social proof dan menjadi informasi tambahan bagi calon pelanggan. Pengunjung yang sedang mempertimbangkan suatu produk atau layanan dapat melihat pengalaman pelanggan lain sebelum mengambil keputusan.
Namun, widget testimoni tidak secara otomatis menjamin peningkatan penjualan. Efektivitasnya dapat dipengaruhi oleh kualitas produk, harga, reputasi bisnis, desain halaman, penawaran, kualitas traffic, dan berbagai faktor lainnya.
Karena itu, gunakan testimoni sebagai bagian dari keseluruhan strategi halaman penjualan, bukan sebagai satu-satunya faktor untuk meningkatkan konversi.
Apakah Widget Ini Berat untuk Blogger?
Contoh widget ini hanya menggunakan HTML dan CSS untuk struktur serta animasinya. Tidak ada library JavaScript pihak ketiga yang diperlukan untuk menjalankan slider otomatis.
Meskipun demikian, performa halaman tidak hanya ditentukan oleh widget ini. Ukuran gambar, script iklan, widget lain, font eksternal, dan berbagai elemen pada template juga dapat memengaruhi waktu pemuatan halaman.
Karena itu, sebaiknya tetap gunakan kode secara efisien dan lakukan pengujian performa setelah menambahkan widget ke blog.
Kesimpulan
Cara membuat widget testimoni slider otomatis di Blogger dapat dilakukan dengan HTML dan CSS tanpa menggunakan plugin atau JavaScript tambahan untuk animasi. Dengan desain yang sederhana dan responsive, widget ini dapat ditempatkan pada sidebar, footer, landing page, maupun halaman promosi.
Anda dapat mengganti isi testimoni, nama pelanggan, warna, ukuran, dan durasi animasi sesuai kebutuhan. Yang paling penting, gunakan testimoni yang benar-benar berasal dari pelanggan agar informasi yang ditampilkan tetap dapat dipercaya.
Jika digunakan dengan desain halaman yang tepat, testimoni dapat menjadi elemen pendukung yang membantu calon pelanggan memahami pengalaman pengguna lain sebelum mempertimbangkan produk atau layanan Anda.
FAQ Widget Testimoni Slider Blogger
1. Apa itu widget testimoni slider di Blogger?
Widget testimoni slider adalah komponen yang menampilkan beberapa ulasan pelanggan secara bergantian dalam satu area halaman Blogger.
2. Apakah widget testimoni ini membutuhkan JavaScript?
Tidak. Animasi slider pada contoh ini menggunakan CSS melalui @keyframes, sehingga tidak membutuhkan JavaScript untuk menjalankan pergantian slide.
3. Apakah widget testimoni bisa digunakan di smartphone?
Bisa. Widget menggunakan lebar 100 persen dan media query untuk menyesuaikan padding serta ukuran teks pada layar yang lebih kecil.
4. Bagaimana cara mengubah isi testimoni?
Anda dapat mengganti teks pada bagian dengan class testi-text dan nama pelanggan pada bagian dengan class testi-author.
5. Apakah jumlah testimoni bisa ditambah?
Bisa. Anda dapat menambahkan elemen testi-item, tetapi bagian @keyframes slide juga perlu disesuaikan dengan jumlah slide yang digunakan.
6. Bagaimana cara memperlambat pergantian testimoni?
Ubah durasi pada properti animation. Contohnya, dari 12s menjadi 18s agar siklus animasi berjalan lebih lambat.
7. Apakah testimoni slider otomatis meningkatkan penjualan?
Tidak ada jaminan. Testimoni dapat membantu memberikan social proof dan informasi tambahan kepada calon pelanggan, tetapi hasil penjualan dipengaruhi oleh banyak faktor lainnya.
8. Apakah testimoni yang ditampilkan harus asli?
Sebaiknya gunakan testimoni pelanggan yang benar-benar ada dan pastikan penggunaannya sesuai dengan izin atau ketentuan yang berlaku. Hindari membuat ulasan fiktif yang seolah-olah berasal dari pelanggan nyata.