Cara Mudah Buat Widget Testimoni Di Blog Keren
Hay para blogger bertemu dengan saya lagi kali ini saya akan berikan bocoran buat widget Testimonial widget ini sangat penting buat kalian yang menjual produk kalian di Blog. Jika Anda seorang pedagang 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.
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.
Sehingga memasang widget testimoni di website itu sangat penting apabila Anda menjual barang-barang atau produk lainnya secara online.
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
- Pertama kalian masuk ke dashboard blog kalian
- Terus klik halaman
- Selanjutnya kalian bisa buat halaman baru atau pun menambah widget di halaman yang sudah ada.
- copy kode dibawah ini dan pastekan pastikan dalam mode html bukan compose
<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>Nama Testimi<span>Pekejaan atau apapun tentang dia</span></h3>
</div>
<div class="testimoni">
<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>Nama Testimi<span>Pekejaan atau apapun tentang dia</span></h3>
</div>
<div class="testimoni">
dan Terakhir tinggal kalian save dan lihat hasilnya demonya dibawah ini
note: 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> jika sudah terpasang kalian bisa melewati cara terakir ini
Mampirnesia sangat keren tutor blogging yang lengkap membuat saya betah belajar di mampirnesia
note: 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> jika sudah terpasang kalian bisa melewati cara terakir ini
<link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
Mampirnesia sangat keren tutor blogging yang lengkap membuat saya betah belajar di mampirnesia
Yudha WahyuAdmin Mampirnesia
Yudha Wahyu Pratama
Humanity Balanced Religion ⤵️ Success Before 30 Mahasiswa, Investor , Pecinta Hewan,IT & Alam, Aktivis
