Cara Membuat Tampilan Testimonial Sederhana
Teman-teman yang telah terbiasa berbelanja di online shopt pasti telah tak asing lagi dengan kata testimoni ya, tampilan testimoni di bikin bagi memberikan kepercayaan kepada pembeli baru, bahwa berbelanja di shop itu aman, dan bagaimanan pelayanan atau barang yang telah di berikan apakah bagus atau sebaliknnya kita dapat tau, dari sebuah testimoni yang di berikan, oke kalau demikian itu disini kita akan mencoba cara merancang tampilan testimonial sederhana, jangan kemana-mana simak terus ya teman-teman.
Oke ketika teman-teman dapat menulis testimoni yang jelas mesti telah membeli produk dari penjual tersebut karenanya baru di berikan hak bagi penilaian toko tersebut, tapi disin saya tak akan mencoba merancang testimoni ya, merancang si tetapi hanya sekedar cara merancang 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 di basa-basi lagi kita akan coba seketika membuatnnya:
<!DOCTYPE html>
<html>
<head>
<title>Cara Merancang 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 laman 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 Merancang 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 telah hingga dengan selamat</p>
</div>
<div class=modal-content tes>
<h4>Pembeli Kedua</h4>
<p>Terimakasih Barang telah hingga 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 bagus, penjualnya ganteng</p>
</div>
<div class=modal-content tes>
<h4>Pembeli Keenam</h4>
<p>Barangnya bagus apa lagi barangnya penjual</p>
</div>
<div class=modal-content tes>
<h4>Pembeli Ketujuh</h4>
<p>Terimakasih, besok lagi COD aja om, dapat.</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 lumayan hingga disini dulu belajar kita mengenai cara merancang tampilan testimonial sederhana, semoga bermanfaat dan hingga jumpa di artikel selanjutnnya terimakasih.
Sumber https://kursuswebsite.org
