Cara Membuat Widget Testimonial di Blog - Responsive

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

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

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

• Masuk ke Blogger.com
• Klik Halaman 
• Silahkan buat halaman baru
• Kemudian pastikan anda berada di bagian compose dan ubah ke mode html
• Masukan kode HTML / CSS dibawah 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>
<br />
<div class="testimoni">
<div class="pic">
<img alt="Profile" class="profile" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKUjzyOteYdgCe2nltJI7lq1mMFEIPetPwnFBzwCzuSl3-4kLt5mw9BmiEnRWpDDcJsmkgh4Yh9j_D6CBMBJDEEYZiznIot7fdVTUWidxTVa5SdqG7Ikp2b7IN8fTg5Z3ai9Xg9nBzTSU/s1600/use.png" title="Profile" />
        <br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tincidunt risus in urna ultrices sagittis ac eu lectus. Sed at cursus mi. Integer ac felis mattis, ultrices elit a, imperdiet leo. Duis accumsan cursus tortor, in tempor turpis condimentum sit amet. Nullam et eros ac enim posuere scelerisque. Aliquam vel erat sed mi aliquam commodo a id lorem. Aenean vitae ex in magna tincidunt laoreet vel at tortor. Fusce a justo sed dolor maximus volutpat. Curabitur sit amet volutpat lacus. Maecenas interdum finibus libero, volutpat facilisis urna hendrerit at.</div>
<h3>
DEMO 1</h3>
</div>
<div class="testimoni">
<div class="pic">
<img alt="Profile" class="profile" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKUjzyOteYdgCe2nltJI7lq1mMFEIPetPwnFBzwCzuSl3-4kLt5mw9BmiEnRWpDDcJsmkgh4Yh9j_D6CBMBJDEEYZiznIot7fdVTUWidxTVa5SdqG7Ikp2b7IN8fTg5Z3ai9Xg9nBzTSU/s1600/use.png" title="Profile" />
        <br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tincidunt risus in urna ultrices sagittis ac eu lectus. Sed at cursus mi. Integer ac felis mattis, ultrices elit a, imperdiet leo. Duis accumsan cursus tortor, in tempor turpis condimentum sit amet. Nullam et eros ac enim posuere scelerisque. Aliquam vel erat sed mi aliquam commodo a id lorem. Aenean vitae ex in magna tincidunt laoreet vel at tortor. Fusce a justo sed dolor maximus volutpat. Curabitur sit amet volutpat lacus. Maecenas interdum finibus libero, volutpat facilisis urna hendrerit at.</div>
<h3>
DEMO 2</h3>
</div>
<div class="testimoni">
<div class="pic">
<img alt="Profile" class="profile" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKUjzyOteYdgCe2nltJI7lq1mMFEIPetPwnFBzwCzuSl3-4kLt5mw9BmiEnRWpDDcJsmkgh4Yh9j_D6CBMBJDEEYZiznIot7fdVTUWidxTVa5SdqG7Ikp2b7IN8fTg5Z3ai9Xg9nBzTSU/s1600/use.png" title="Profile" />
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tincidunt risus in urna ultrices sagittis ac eu lectus. Sed at cursus mi. Integer ac felis mattis, ultrices elit a, imperdiet leo. Duis accumsan cursus tortor, in tempor turpis condimentum sit amet. Nullam et eros ac enim posuere scelerisque. Aliquam vel erat sed mi aliquam commodo a id lorem. Aenean vitae ex in magna tincidunt laoreet vel at tortor. Fusce a justo sed dolor maximus volutpat. Curabitur sit amet volutpat lacus. Maecenas interdum finibus libero, volutpat facilisis urna hendrerit at.</div>
<h3>
DEMO 3</h3>
</div>
<div class="testimoni">
<div class="pic">
<img alt="Profile" class="profile" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKUjzyOteYdgCe2nltJI7lq1mMFEIPetPwnFBzwCzuSl3-4kLt5mw9BmiEnRWpDDcJsmkgh4Yh9j_D6CBMBJDEEYZiznIot7fdVTUWidxTVa5SdqG7Ikp2b7IN8fTg5Z3ai9Xg9nBzTSU/s1600/use.png" title="Profile" />
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tincidunt risus in urna ultrices sagittis ac eu lectus. Sed at cursus mi. Integer ac felis mattis, ultrices elit a, imperdiet leo. Duis accumsan cursus tortor, in tempor turpis condimentum sit amet. Nullam et eros ac enim posuere scelerisque. Aliquam vel erat sed mi aliquam commodo a id lorem. Aenean vitae ex in magna tincidunt laoreet vel at tortor. Fusce a justo sed dolor maximus volutpat. Curabitur sit amet volutpat lacus. Maecenas interdum finibus libero, volutpat facilisis urna hendrerit at.</div>
<h3>
DEMO 4</h3>
</div>
<div class="testimoni">
<div class="pic">
<img alt="Profile" class="profile" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKUjzyOteYdgCe2nltJI7lq1mMFEIPetPwnFBzwCzuSl3-4kLt5mw9BmiEnRWpDDcJsmkgh4Yh9j_D6CBMBJDEEYZiznIot7fdVTUWidxTVa5SdqG7Ikp2b7IN8fTg5Z3ai9Xg9nBzTSU/s1600/use.png" title="Profile" />
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tincidunt risus in urna ultrices sagittis ac eu lectus. Sed at cursus mi. Integer ac felis mattis, ultrices elit a, imperdiet leo. Duis accumsan cursus tortor, in tempor turpis condimentum sit amet. Nullam et eros ac enim posuere scelerisque. Aliquam vel erat sed mi aliquam commodo a id lorem. Aenean vitae ex in magna tincidunt laoreet vel at tortor. Fusce a justo sed dolor maximus volutpat. Curabitur sit amet volutpat lacus. Maecenas interdum finibus libero, volutpat facilisis urna hendrerit at.</div>
<h3>
DEMO 5</h3>
</div>
<div class="testimoni">
<div class="pic">
<img alt="Profile" class="profile" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKUjzyOteYdgCe2nltJI7lq1mMFEIPetPwnFBzwCzuSl3-4kLt5mw9BmiEnRWpDDcJsmkgh4Yh9j_D6CBMBJDEEYZiznIot7fdVTUWidxTVa5SdqG7Ikp2b7IN8fTg5Z3ai9Xg9nBzTSU/s1600/use.png" title="Profile" />
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tincidunt risus in urna ultrices sagittis ac eu lectus. Sed at cursus mi. Integer ac felis mattis, ultrices elit a, imperdiet leo. Duis accumsan cursus tortor, in tempor turpis condimentum sit amet. Nullam et eros ac enim posuere scelerisque. Aliquam vel erat sed mi aliquam commodo a id lorem. Aenean vitae ex in magna tincidunt laoreet vel at tortor. Fusce a justo sed dolor maximus volutpat. Curabitur sit amet volutpat lacus. Maecenas interdum finibus libero, volutpat facilisis urna hendrerit at.</div>
<h3>
DEMO 6</h3>
</div>

• Silahkan edit seperlunya, seperti mengganti nama, tulisan, foto dan lainnya
• Kemudian klik Simpan dan Publikasikan

Kesimpulan

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.

✖

Bagikan:

• Bagikan melalui Facebook Bagikan melalui Twitter Bagikan melalui Pinterest Bagikan melalui Whatsapp Bagikan melalui Linkedin Bagikan melalui Telegram

Subscribe Our Newsletter