Cara Pasang Widget Testimoni Slider Otomatis di Blogspot untuk Meningkatkan Penjualan

Menampilkan testimoni pelanggan adalah salah satu cara paling efektif untuk membangun kepercayaan atau social proof bagi pengunjung blog Anda. Jika Anda mengelola blog toko online atau menawarkan jasa melalui Blogspot, widget testimoni yang bergerak otomatis (slider) akan membuat tampilan website terlihat lebih profesional dan dinamis.

Pada tutorial kali ini, kita akan membuat widget testimoni slider yang ringan menggunakan kombinasi HTML dan CSS murni. Kode ini sudah responsif, artinya tampilannya akan tetap rapi baik diakses melalui komputer maupun perangkat mobile.

Kode HTML dan CSS Testimoni Slider

Silakan salin kode lengkap di bawah ini. Kode ini sudah mencakup struktur tampilan, gaya desain, dan fungsi slider otomatis tanpa memerlukan plugin tambahan yang berat.

<!-- Widget Testimoni Slider by Tutorial Blog -->
<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);
  font-family: Arial, sans-serif;
  text-align: center;
}
.testi-wrapper {
  display: flex;
  transition: transform 0.5s ease-in-out;
}
.testi-item {
  min-width: 100%;
  box-sizing: border-box;
}
.testi-text {
  font-style: italic;
  color: #555;
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 20px;
}
.testi-author {
  font-weight: bold;
  color: #333;
}
.testi-stars {
  color: #ffcc00;
  margin-bottom: 10px;
}

/* Animasi Sederhana */
@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%); }
}

.testi-wrapper {
  animation: slide 12s infinite;
}
</style>

<div class="testi-container">
  <div class="testi-wrapper">
    
    <!-- Testimoni 1 -->
    <div class="testi-item">
      <div class="testi-stars">★★★★★</div>
      <p class="testi-text">"Produknya sangat berkualitas dan pengirimannya sangat cepat. Saya sangat puas belanja di sini!"</p>
      <p class="testi-author">- Ahmad Subagja</p>
    </div>

    <!-- Testimoni 2 -->
    <div class="testi-item">
      <div class="testi-stars">★★★★★</div>
      <p class="testi-text">"Pelayanan admin sangat ramah dan responsif. Recomended banget buat yang cari jasa profesional."</p>
      <p class="testi-author">- Siti Sarah</p>
    </div>

    <!-- Testimoni 3 -->
    <div class="testi-item">
      <div class="testi-stars">★★★★★</div>
      <p class="testi-text">"Awalnya ragu, tapi setelah mencoba ternyata hasilnya luar biasa. Blog saya jadi makin keren!"</p>
      <p class="testi-author">- Budi Santoso</p>
    </div>

  </div>
</div>

Cara Memasang Widget di Blogger

Untuk memasang kode tersebut di blog Anda, silakan ikuti langkah-langkah mudah di bawah ini.

Pertama, silakan masuk ke dashboard Blogger Anda. Kemudian pilih menu Tata Letak (Layout) di bilah navigasi sebelah kiri. Tentukan posisi di mana Anda ingin menampilkan testimoni tersebut, misalnya di Sidebar atau di bagian Footer.

Kedua, klik pada tombol Tambah Gadget. Sebuah jendela pop-up akan muncul, silakan cari dan pilih opsi HTML/JavaScript. Di dalam kolom judul, Anda bisa mengosongkannya atau memberi nama seperti Kata Pelanggan Kami.

Ketiga, tempelkan (paste) kode HTML dan CSS yang sudah Anda salin sebelumnya ke dalam kotak konten yang tersedia. Terakhir, klik Simpan dan lihat hasilnya di blog Anda.

Cara Mengedit Isi Testimoni

Anda bisa menyesuaikan isi testimoni dengan mengubah teks di dalam tag p yang memiliki class testi-text dan testi-author. Ganti nama pelanggan dan kalimat ulasan sesuai dengan data asli yang Anda miliki. Pastikan tidak menghapus tanda kutip atau tag penutup agar tampilan tidak berantakan.

Jika Anda ingin menambah jumlah testimoni, Anda perlu menyesuaikan persentase pada bagian @keyframes slide di dalam kode CSS agar transisinya tetap mulus. Namun, untuk pemula, tiga slide sudah cukup ideal untuk menjaga kecepatan loading halaman blog tetap stabil.

Dengan memasang widget ini, blog Anda tidak hanya terlihat lebih menarik secara visual, tetapi juga memberikan rasa aman bagi calon pembeli baru untuk bertransaksi dengan Anda.