CARA MEMBUAT FORM TESTIMONIAL DI BLOG

byAnissa Auliasari -
testimoni itu bagian dari strategi bisnis
testimoni itu bagian dari strategi bisnis
Banyak situs bisnis membuat form testimoni untuk meyakinkan pelanggan bahwa situs mereka berharga dan dapat dipercayai sebagai tempat bertransaksi. Persoalannya seberapa menarik form tersebut dibuat, saya selalu menyarankan kesederhaan. Namun pembuatannya tidak jauh jauh dari elemen elemen HTML, contoh berikut dapat kalian terapkan, tinggal memodifikasi link eksternalnya:
<style>
.container {
border: 2px solid #ccc;
background-color: #eee;
border-radius: 5px;
padding: 16px;
margin: 16px 0
}
.container::after {
content: "";
clear: both;
display: table;
}
.container img {
float: left;
margin-right: 20px;
border-radius: 50%;
}
.container span {
font-size: 20px;
margin-right: 15px;
}
@media (max-width: 500px) {
.container {
text-align: center;
}
.container img {
margin: auto;
float: none;
display: block;
}
}
</style>
</head>
<body>
<h2>Testimonials</h2>
<div class="container">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1D8veXDLyQcq8f86SPxOhWCzDvM_9aoD4uI0p3Yu9KpEMki3eXl5zdhrrKBiBbhDBZ-PIW2RqwJXxID2DiOY3B2H89FyqFMRPpvzsaqzfW4H1jMqDBNYDkYYLOSx47u9uwn-Adnh5Llb2/s1600/20190716_222604.jpg" alt="Avatar" style="width:90px">
<p><span>John Alitta.</span> CEO at Mighty Schools.</p>
<p>Ediblogtema is smarter by it simplify.</p>
</div>
<div class="container">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQE54HXMkNLN8n1RF2iALyKTPHut0qxXwUO76vmgtFWqKrv_iqw" alt="Avatar" style="width:90px">
<p><span>Marlina.</span> Moslemat Hijab Shop.</p>
<p>Saya banyak belajar dari sini, editblogtema tidak pelit dalam berbagi, terutama mbak Anissa Auliasari, terimakasih!</p>
</div>
<div class="container">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiaOQJ4DYgOWZVA-6IPtGhi2wnlRb2AOOSWgiEtlO694JGIB_m78K68JqEPE_kjE20PcFtybHk8UAknR1hboLoxzr_J7OtobyHCRknltNNmBttECw-Ancnoeoojl_ThaifHmbTxCYLrVHm/s1600/pngtree-hand-painted-cartoon-glasses-girl-avatar-quiet-cute-elegant-care-image_1096709.jpg" alt="Avatar" style="width:90px">
<p><span>Selly.</span> Teacher.</p>
<p>I visited once and I will check it again.</p>
</div>
Tampilan visual penerapan kode di atas adalah seperti berikut:

Testimonials

Avatar John Almighty. CEO at Mighty Business Schools.
Ediblogtema is smarter by it simplify.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
Avatar Marlina. Moslemat Hijab Shop.
Saya banyak belajar dari sini, editblogtema tidak pelit dalam berbagi, terutama mbak Anissa Auliasari, terimakasih!
Avatar Anissa Auliasari. Student, writter in editblogtema.
Aku menulis disini dan walaupun dengan segala kelebihan dan kekuranganku, aku yakin situs ini akan berkembang dengan misi mulia: berbagi ilmu modern untuk generasi muda dan atau orang orang yang membutuhkannya.
  Jika kalian selalu mengikuti tutorial editblogtema, yaitu tutorial dari saya Anissa pada umumnya, kalian akan mengerti bagaimana memanfaatkan penulisan kode kode HTML pada opsi penulisan HTML (bukan compose)

Selamat belajar!
Tags

1 Komentar

Silahkan berkomentar sesuai dengan topik kita ya...

  1. Ride RockFebruari 14, 2022

    Terimakasih kode nya, semoga anda diberkahi kesehatan selalu

    BalasHapus
Lebih baru Lebih lama

Formulir Kontak