Membuat Testimoni Responsive di Blogger

Daftar Isi

Hallo sobat, saya akan bagikan tentang membuat laman testimoni responsive hanya menggunakan css dan html saja tanpa javascript, jadi cukup ringan. Testimoni merupakan ulasan dari para pelanggan yang telah menggunakan produk atau layanan darimu.

Menggunakan testimoni akan menjadi bukti sosial yang sangat kuat dan mempengaruhi keputusan pembelian calon pelanggan. Dengan mencantumkan testimoni dapat menggaet pelanggan baru.

Saya pernah berkunjung ke suatu blog yang menjual template blogger dengan halaman yang berisi testimoni dari pengguna atau pelanggan sebelumnya. Cukup menarik, menggunakan testimoni ini dapat membangun kepercayaan dan mempengaruhi agar mau membeli produk tersebut

Nah, kali saya bagikan testimoni yang responsive yang cocok untuk situs yang menjual produk atau jasa di blogger.

Membuat Testimoni Responsive

Sebelum kita membahas lebih lanjut tentang membuat testimoni di Blogger, mari kita ketahui mengapa testimoni menjadi elemen yang sangat penting. Ketika seseorang mengunjungi blog atau situs web, mereka cenderung mencari bukti bahwa blog tersebut kredibel dan memberikan nilai tambah bagi mereka. Inilah peran testimoni!

Testimoni disebut juga dengan cerita atau pengalaman positif dari pengguna sebelumnya yang telah menggunakan produk, layanan, atau informasi yang bagikan di blog anda. Saat calon pembaca melihat bahwa orang lain telah mendapatkan manfaat dari apa yang kamu tawarkan, mereka akan merasa lebih percaya dan termotivasi untuk melakukan tindakan selanjutnya, seperti berlangganan dan membeli produk tersebut.

Jadi buat manual ulasannya yang positif untuk menarik pelanggan. Berikut adalah contoh demo yang saya buat.

Menarik bukan? cara membuat testimoni di blogger cukup mudah silahkan simak cara-cara dibawah ini.

Masuk di Blogger, pilih pada Tema dan selanjutnya pilih Edit HTML. Tempelkan kode css berikut ini di atas </style> atau ]]></b:skin>..

.testi{margin:0;padding:0;box-sizing:border-box;font-family:'Poppins',sans-serif;max-width:1200px;margin:auto;padding:0 20px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between}
.testi .box{background:#fff;width:calc(33% - 10px);padding:25px;box-shadow:0 4px 8px rgba(0,0,0,0.15);position:relative;line-height:1.6em;border-radius:10px;overflow:hidden}
.quote::before{content:'';width:60px;height:60px;background:#81b4dc;display:block;border-radius:50%;position:absolute;top:-12px;left:-12px;opacity:.1}
.quote::after{content:'"';position:absolute;left:18px;top:28px;min-width:15px;text-align:center;font-size:50px;color:#17a2b8}
.testi .box .content{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding-top:10px}
.box .info .name{font-weight:600;font-size:17px}
.box .info .url{font-size:16px;font-weight:500;color:#17a2b8}
.box .content .image{height:75px;width:75px;padding:3px;background:#17a2b8;border-radius:50%}
.content .image img{height:100%;width:100%;object-fit:cover;border-radius:50%;border:2px solid #fff}
.box:hover .content .image img{border-color:#fff}
@media (max-width:1045px){.testi .box{width:calc(50% - 10px);margin:10px 0}}
@media (max-width:702px){.testi .box{width:100%}}

Setelah menempelkan kode css tersebut, silahkan buat postingan atau laman yang menampilkan kode html berikut ini.

<div class="testi">
  	<!---Start Testimoni--->
    <div class="box">
       <div class="quote">
      <p>Isi dengan paragraf testimoni.</p>
</div>
      <div class="content">
        <div class="info">
          <div class="name">Khairul Anwar</div>
          <div class="url">www.examples.com</div>
        </div>
        <div class="image">
          <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicjFmcFZQdrd6UMWif45pD240yLZJC7sWJW6dRiN1eEDtVnzJANYwx6B9rUVhRuC9D8mBV0CQK21yaEQyPNLaVnPZa_ywjNyhMzfnWSMiBZxu-r5tu-khr61VtxB7fL2V-0ASqdoEe8fa6FqCWbGzdjv2A5ii_tZYDRA2ad7yGwXxWmptZzn84DphM2JkZ/s200/images.webp" alt="profil">
        </div>
      </div>
    </div>
    <!---End Testimoni--->
    	
    <!---Start Testimoni--->
    <div class="box">
       <div class="quote">
      <p>Isi dengan paragraf testimoni.</p>
</div>
      <div class="content">
        <div class="info">
          <div class="name">Ahmad S.</div>
          <div class="url">www.examples.com</div>
        </div>
        <div class="image">
          <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicjFmcFZQdrd6UMWif45pD240yLZJC7sWJW6dRiN1eEDtVnzJANYwx6B9rUVhRuC9D8mBV0CQK21yaEQyPNLaVnPZa_ywjNyhMzfnWSMiBZxu-r5tu-khr61VtxB7fL2V-0ASqdoEe8fa6FqCWbGzdjv2A5ii_tZYDRA2ad7yGwXxWmptZzn84DphM2JkZ/s200/images.webp" alt="profil">
        </div>
      </div>
    </div>
    <!---End Testimoni--->
    	
    <!---Start Testimoni--->
    <div class="box">
       <div class="quote">
      <p>Isi dengan paragraf testimoni.</p>
      </div>
      <div class="content">
        <div class="info">
          <div class="name">Nuraini B.</div>
          <div class="url">www.examples.com</div>
        </div>
        <div class="image">
          <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicjFmcFZQdrd6UMWif45pD240yLZJC7sWJW6dRiN1eEDtVnzJANYwx6B9rUVhRuC9D8mBV0CQK21yaEQyPNLaVnPZa_ywjNyhMzfnWSMiBZxu-r5tu-khr61VtxB7fL2V-0ASqdoEe8fa6FqCWbGzdjv2A5ii_tZYDRA2ad7yGwXxWmptZzn84DphM2JkZ/s200/images.webp" alt="profil">
        </div>
      </div>
    </div>
    <!---End Testimoni--->
    	
    <!---Start Testimoni--->
    <div class="box">
       <div class="quote">
      <p>Isi dengan paragraf testimoni.</p>
      </div>
      <div class="content">
        <div class="info">
          <div class="name">Joko Susilo</div>
          <div class="url">www.examples.com</div>
        </div>
        <div class="image">
          <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicjFmcFZQdrd6UMWif45pD240yLZJC7sWJW6dRiN1eEDtVnzJANYwx6B9rUVhRuC9D8mBV0CQK21yaEQyPNLaVnPZa_ywjNyhMzfnWSMiBZxu-r5tu-khr61VtxB7fL2V-0ASqdoEe8fa6FqCWbGzdjv2A5ii_tZYDRA2ad7yGwXxWmptZzn84DphM2JkZ/s200/images.webp" alt="profil">
        </div>
      </div>
    </div>
  <!---End Testimoni--->
  </div>

Sesuaikan sendiri isi paragraf testimoni dan gambar profil.

Mungkin warna dan layout kurang suka bisa edit sendiri, sesuaikan menurut pendapatmu. Platfrom blogger tidak ada plugin yang mencantumkam testimoni automatis, jadi membuatnya dengan kreatifitas sendiri.

Penutup

Dalam menjalankan jualan produk ataupun jasa di platform Blogger, memanfaatkan testimoni adalah salah satu strategi yang ampuh untuk membangun kepercayaan, meningkatkan otoritas, dan memotivasi pembaca untuk berinteraksi lebih banyak.

Testimoni menghadirkan bukti bahwa produk atau jasa yang telah kamu tawarkan itu bermanfaat. Jadi, jangan ragu untuk menyematkan fitur testimoni di blogmu dan saksikan dampak positifnya dalam mengembangkan blog yang lebih sukses.

Semoga artikel yang saya buat ini memberikan wawasan tentang membuat testimoni responsive di Blogger. Dengan memanfaatkan testimoni dengan baik, kamu dapat meningkatkan dampak positif. Selamat mencoba dan tetap kreatif dalam mengembangkan blogmu sobat.