Cara Membuat Kotak Komentar Sederhana dengan HTML dan CSS
Hallo teman-teman, Bertemu kembali dengan saya dan masih diwebsite ini. Seperti lazim ya teman-teman, semoga masih diberikan medis dan kebahagiaan agar dapat kembali semangat pada mencari informasi atau ingin mengupgrade skill didunia blog.
Di kesempatan kali ini saya akan membahas mengenai Cara Membangun Kotak Komentar Sederhana dengan HTML dan CSS. ditutorial ini saya menggunakan sebuah styntax html5 yaitu fieldset, lumayan gampang dan rapih seandainya menggunakan fieldset ini. Kalau teman-teman belum mengetahui apa itu fieldset silahkan teman-teman baca pembahasan saya mengenai fieldset dibawah ini :
– https://www.kursuswebsite.org/cara-penggunaan-tag-fieldset-pada-form-html/
Oke saya rasa telah lumayan paham ya teman-teman dan sekarang ini kita seketika saja dimulai Cara Membangun Kotak Komentar Sederhana dengan HTML dan CSS. pertama-tama silahkan jalankan/run text-editor yang teman-teman gunakan, lalu ketiklah/copy script HTML seperti dibawah ini :
<div class=container>
<fieldset>
<legend>Komentar</legend>
<div class=kotak>
<span>Murihat</span>:<br><hr>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. when an unknown printer took a galley of type and scrambled it to make a type specimen book....</p>
</div>
<div class=kotak>
<span>Rizal</span>:<br><hr>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. when an unknown printer took a galley of type and scrambled it to make a type specimen book....</p>
</div>
</fieldset>
</div>
Kalau telah dengan HTMLnya, langkah berikutnya teman-teman tambahkan script style CSSnya seperti dibawah ini :
<style>
*{margin:0; padding: 0}
.container{width: 800px; margin: auto;}
fieldset{width: 400px; padding: 10px;}
.kotak{border: 1px solid grey; padding: 5px; margin:5px 0; overflow: hidden;}
</style>
Karenanya hasil dari kedua script diatas akan menjadi seperti dibawah ini :
<html>
<head>
<meta charset=UTF-8>
<title>Kotak Komentar</title>
<style>
*{margin:0; padding: 0}
.container{width: 800px; margin: auto;}
fieldset{width: 400px; padding: 10px;}
.kotak{border: 1px solid grey; padding: 5px; margin:5px 0; overflow: hidden;}
</style>
</head>
<body>
<div class=container>
<fieldset>
<legend>Komentar</legend>
<div class=kotak>
<span>Murihat</span>:<br><hr>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. when an unknown printer took a galley of type and scrambled it to make a type specimen book....</p>
</div>
<div class=kotak>
<span>Rizal</span>:<br><hr>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. when an unknown printer took a galley of type and scrambled it to make a type specimen book....</p>
</div>
</fieldset>
</div>
</body>
</html>
Oke seandainya telah seperti diatas karenanya kemudian silahkan teman-teman simpan, dan coba teman-teman jalankan/run dibrowser yang teman-teman gunakan. Kalau benar karenanya hasilnya akan terlihat seperti di gambar dibawah ini :
Bagaimana teman-teman? Lumayan gampang ya. Jadi contoh sederhananya kurang lebih seperti itu pada merancang kotak komentar. Kalau teman-teman kurang tertarik dengan design sederhana diatas silahkan teman-teman modifikasi sesuai keinginan teman-teman dengan rujukan dasarnya seperti diatas.
Oke kalau demikian itu lumayan demikianlah pembahasan kali ini mengenai Cara Membangun Kotak Komentar Sederhana dengan HTML dan CSS. kurang lebih nya mohon maaf dan semoga bermanfaat.
Terimakasih
Sumber https://kursuswebsite.org
