Cara Membuat Widget Testimonial di Blog

Cara Membuat Widget Testimonial di Blog

Kali ini saya akan membuat sebuah widget testimonial sederhana dengan kode html dan css untuk dipasang pada blog atau website Anda.

Widget ini sebenarnya hampir mirip dengan widget author box, namun ada sedikit desain yang membuatnya sedikit berbeda dengan widget profil penulis tersebut.

Di sini saya menambahkan tanda petik seperti quote atau perkataan yang diucapkan oleh pelanggan Anda sehingga widget ini dinamakan sebagai widget testimoni card.

Jika Anda seorang pedagan atau penjual online yang mengandalkan website pribadi atau blog sebagai tempat untuk menampilkan barang dagangan Anda, maka yang paling penting dan harus ada di dalam website Anda yaitu testimoni dari pelanggan yang sudah pernah membeli atau menggunakan layanan dan jasa yang Anda miliki.

Dengan menampilkan widget testimonial di blog atau website, tentu akan menambah kepercayaan calon pembeli terhadap Anda.

Sehingga memasang widget testimoni di website itu sangat penting apabila Anda menjual barang-barang atau produk lainnya secara online.

Nah, pada kesempatan kali ini saya akan membuat sebuah widget testimoni menggunakan kode html dan css saja, tentu tidak akan membuat loading blog atau website Anda menjadi berat.

Cara Membuat Widget Testimonial di Halaman Blogger


1. Masuk ke Blogger.com
2. Klik Halaman
3. Silahkan buat halaman baru atau edit salah satu halaman yang ada
4. Kemudian pastikan Anda berada dibagian Compose


Compose - Testmonial

5. Masukkan kode HTML dan CSS ini:

<style>
.testimoni {
  font-family: 'Roboto', Arial, sans-serif;
  position: relative;
  float: left;
  overflow: hidden;
  margin: 10px 1%;
  min-width: 230px;
  max-width: 315px;
  width: 100%;
  color: #ffffff;
  text-align: left;
  line-height: 1.4em;
  background-color: #d6dbff;
  padding-top: 120px;
  border-radius: 10px;
}
.testimoni * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.testimoni img {
  max-width: 100%;
  vertical-align: top;
  opacity: 0.85;
}
.testimoni .pic {
  width: 100%;
  background-color: #2961ff;
  padding: 25px;
  position: relative;
}
.testimoni .pic:before {
  position: absolute;
  content: '';
  bottom: 100%;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 55px 0 0 400px;
  border-color: transparent transparent transparent #2961ff;
}
.testimoni .profile {
  border-radius: 50%;
  position: absolute;
  bottom: 100%;
  left: 25px;
  z-index: 1;
  max-width: 90px;
  opacity: 1;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}
.testimoni h3 {
  font-size: 1.3em;
  margin: 25px;
  font-weight: 300;
  position: absolute;
  top: 0;
  right: 0;
  text-align: right;
}
.testimoni h3 span {
  display: block;
  font-size: 0.65em;
  color: #2980b9;
}
.testimoni p {
  margin: 0 0 10px;
  padding: 0 0 30px;
  letter-spacing: 1px;
  font-style: italic;
  font-weight: 300;
}
.testimoni p:after {
  font-family: 'FontAwesome';
  content: "\201C";
  position: absolute;
  font-size: 180px;
  line-height: 1em;
  color: #3a40ff;
  font-style: normal;
  content: "\201D";
  right: 20px;
  bottom: -105px;
}
</style>
<div class="testimoni">
    <div class="pic"><img src="https://instagram.fcgk8-2.fna.fbcdn.net/vp/f7724395822a1ecdbbc5e2e0c9d751fc/5BEFCC20/t51.2885-19/s320x320/36136511_2123433711204178_4166035719258636288_n.jpg" alt="Profile" title="Profile" class="profile" />
        <p>He has been very professional and very clear in all communications, which I appreciate.</p>
    </div>
    <h3>Ficri P.<span>Web Designer</span></h3>
</div>
<div class="testimoni">
    <div class="pic"><img src="https://instagram.fcgk8-2.fna.fbcdn.net/vp/d5f7ba3445ca5f7331c1af137fda8a6b/5BF7F22E/t51.2885-19/s320x320/38170706_2095171754054300_307298068145897472_n.jpg" alt="Profile" title="Profile" class="profile" />
        <p>We are very pleased with our new brand identity. It has been a great experience working with him.</p>
    </div>
    <h3>Pebriyana F.<span>Graphic Designer</span></h3>
</div>

6. Silahkan edit seperlunya, seperti mengganti nama, jabatan / kota, gambar / foto, dan tulisannya
7. Silahkan klik Simpan atau Publikasikan

Anda juga bisa menyimpan widget testimoni ini di sidebar blog atau di bagian postingan blog, namun yang paling cocok menurut saya untuk widget testimonial ini disimpan pada halaman blogger.

Jangan lupa untuk menambahkan kode css bundle font awesome ini agar tanda kutip bisa muncul. Silahkan simpan kode ini di atas kode </body>

<link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

Itulah artikel mengenai cara membuat widget testimonial di blog, selamat mencoba. Semoga bermanfaat.
Cara Manual Cuman hobi nulis tentang tutorial blog jadi deh blog cara manual.

6 Komentar untuk "Cara Membuat Widget Testimonial di Blog"

  1. kang kalo mau nambah kolomnya lagi gmn caranya.?
    itu demo kan cm 2 testi..hehe
    bantu yak

    BalasHapus
    Balasan
    1. Halo,
      Kalau mau tambah kolom atau kotak testimoni, silahkan copy kode berikut:
      <div class="testimoni">
      <div class="pic"><img src="https://instagram.fcgk8-2.fna.fbcdn.net/vp/d5f7ba3445ca5f7331c1af137fda8a6b/5BF7F22E/t51.2885-19/s320x320/38170706_2095171754054300_307298068145897472_n.jpg" alt="Profile" title="Profile" class="profile" />
      <p>We are very pleased with our new brand identity. It has been a great experience working with him.</p>
      </div>
      <h3>Pebriyana F.<span>Graphic Designer</span></h3>
      </div>

      Hapus
  2. keren, nyari inspirasi buat cara buat testimoni slider recent comment, kalau ada sob bisa ei bagikan.

    BalasHapus
  3. Bermanfaat sekali ilmunya kang, izin pake kodenya ya kang di blog toko saya. Terimakasih sebelumnya

    BalasHapus
Jika ada yang masih kurang jelas, silahkan untuk bertanya pada kolom komentar di bawah ini atau dengan menghubungi kami di halaman kontak.

1. Centang kotak Notify me untuk mendapatkan notifikasi komentar.
2. Komentar kami moderasi, dan tidak semuanya dipublish.
3. Semua komentar dengan menambahkan link akan dihapus dan tidak akan dipublikasikan.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel