Membuat Tampilan Chat Messages Dengan HTML dan CSS

Hallo Dumenity…?!?

Selamat datang kembali di website tips dan trik Dumet School, berjumpa kembali dengan saya pada pembahasan tips dan trik seputar dunia website. Pada kesempatan kali ini saya akan memberikan tips tentang Membuat Tampilan Chat Messages Dengan HTML dan CSS yang mana tampilan yang nanti kita akan buat untuk layout website untuk tampilan chating antara admin dan customer dengan menggunakan html dan css. Khususnya untuk teman – teman yang saat ini sedang bingung untuk membuat sebuah layout website untuk tampilan chating, nah cocok sekali artikel ini untuk teman – teman sebagai tambahan refrensi nya.

Untuk itu ikuti terus artikel cara Membuat Tampilan Chat Messages Dengan HTML dan CSS ini, langsung saja kita implementasikan dengan menyiapkan text editornya kemudian tambahkan script html nya di bawah ini

<!DOCTYPE html>
<html>
<head>
  <title>Membuat Tampilan Chat Messages Dengan HTML dan CSS</title>
</head>
<body>

<h2>View Chat Messages Dumet School</h2>

<div class="container">
  <img src="1.png">
  <p>Hallo selamat datang di kursus webmaster Dumet School. Apa kamu ingin mengambil kursus webmaster..??</p>
  <span class="right">13:00</span>
</div>

<div class="container gelap">
  <img src="2.png" class="m_right">
  <p>Saya sudah mendaftar kelas untuk webmaster Ultimate, mohon segera di proses agar saya langsung bisa masuk kelas.</p>
  <span class="left">1:01</span>
</div>


</body>
</html>

Kemudian save dengan nama index.html, dan jalankan pada browsernya, Maka hasil sementara seperti gambar di bawah ini

Untuk image teman – teman siapkan image apa saja ya, pada tampilan di atas ini saya membuat 2 buah chat. Berikutnya kita tambahkan style css nya

<style>
body {
 margin: 0 auto;
 max-width: 800px;
 padding: 0 20px;
}
.container {border: 2px solid #dedede; background-color: #f1f1f1; border-radius: 5px; padding: 10px; margin: 10px 0;}
.gelap {border-color: #ccc; background-color: #ddd;}
.container::after {content: ""; clear: both; display: table;}
.container img {float: left; max-width: 60px; width: 100%; margin-right: 20px; border-radius: 50%;}
.container img.m_right {float: right; margin-left: 20px; margin-right:0;}
.right {float: right; color: #575252;}
.left {float: left; color: #3b3939;}
</style>

Jika sudah, save dan refrsh pada browsernya. Maka hasilnya seperti gambar di bawah ini

Maka jika saya manu menambahkan tampilan chat di bawah nya tinggal saya copy saja grup class nya dan mengganti kata – katanya

Maka jika saya save dan refresh pada browsernya maka hasilnya seperti di bawah ini

Bagaimana, cukup mudah bukan..??

Sekian pada artikel kali ini tentang Membuat Tampilan Chat Messages Dengan HTML dan CSS semoga bermanfaat dan bisa menjadi tambahan pengetahuan untuk membuat studi case yang berbeda. Kita jumpa lagi pada artikel yang akan datang, terimakasih dan sampai jumpa.

Membuat Tampilan Chat Messages Dengan HTML dan CSS

Kategori