Teman-teman yang sudah terbiasa berbelanja di online shopt pasti sudah tidak asing lagi dengan kata testimoni ya, tampilan testimoni di buat untuk memberikan kepercayaan kepada pembeli baru, bahwa berbelanja di shop itu aman, dan bagaimanan pelayanan atau barang yang telah di berikan apakah baik atau sebaliknnya kita bisa tau, dari sebuah testimoni yang di berikan, oke kalau begitu disini kita akan mencoba cara membuat tampilan testimonial sederhana, jangan kemana-mana simak terus ya teman-teman.
Oke ketika teman-teman bisa menulis testimoni yang jelas harus sudah membeli produk dari penjual tersebut maka baru di berikan hak untuk penilaian toko tersebut, tapi disin saya tidak akan mencoba membuat testimoni ya, membuat si tetapi hanya sekedar cara membuat tampilan testimonial sederhana, disini saya masih menggunakan library materialize, saya membuatnnya menggunakan modals ya teman-teman sama seperti artikel saya sebelumnya tetapi ini efeknya berbeda ya teman-teman saya lihat seperti tampilan penilain, oke dari pada basa-basi lagi kita akan coba langsung membuatnnya:
<!DOCTYPE html>
<html>
<head>
<title>Cara Membuat Tampilan Testimonial Sederhana</title>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<-e-style type="text/css">
.container{
width: 1000px;
margin: auto;
}
.tes{
background: lavender;
margin-bottom: 5px;
}
</style>
</head>
<body>
<div class="container">
<h1>Cara Membuat Tampilan Testimonial Sederhana</h1>
<!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Kumpulan Testimonial</a>
<!-- Modal Structure -->
<div id="modal1" class="modal bottom-sheet">
<div class="modal-content tes">
<h4>Pembeli Kesatu</h4>
<p>Terimakasih Barang sudah sampai dengan selamat</p>
</div>
<div class="modal-content tes">
<h4>Pembeli Kedua</h4>
<p>Terimakasih Barang sudah sampai dengan selamat yah</p>
</div>
<div class="modal-content tes">
<h4>Pembeli Ketiga</h4>
<p>Barang biasa-biasa aja</p>
</div>
<div class="modal-content tes">
<h4>Pembeli Keempat</h4>
<p>Buset Super Cepat maknyus</p>
</div>
<div class="modal-content tes">
<h4>Pembeli Kelima</h4>
<p>Pelayanan baik, penjualnya ganteng</p>
</div>
<div class="modal-content tes">
<h4>Pembeli Keenam</h4>
<p>Barangnya baik apa lagi barangnya penjual</p>
</div>
<div class="modal-content tes">
<h4>Pembeli Ketujuh</h4>
<p>Terimakasih, besok lagi COD aja om, bisa.</p>
</div>
<div class="modal-footer">
<a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
</div>
</div>
<!--Import jQuery before materialize.js-->
<-e-script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<-e-script type="text/javascript" src="js/materialize.min.js"></script>
<-e-script type="text/javascript">
$(document).ready(function(){
// the "href" attribute of the modal trigger must specify the modal ID that wants to be triggered
$('.modal').modal();
});
</script>
</div>
</body>
</html>
Jangan lupa hilangkan tanda -e- nya, oke bagaimana hasilnya perhatikan gambar berikut ini:
ketika kita klik “testimonial kami” akan muncul kolom hasil tampilan di bawah ini ya teman-teman, oke saya rasa cukup sampai disini dulu belajar kita tentang cara membuat tampilan testimonial sederhana, semoga bermanfaat dan sampai jumpa pada artikel selanjutnnya terimakasih.