Membuat Tampilan Chat Messages Dengan HTML dan CSS

Hallo Dumenity…?!?



Selamat datang kembali di laman tips dan trik Source Code Aplikasi, berjumpa kembali dengan saya di pembahasan tips dan trik seputar dunia laman. Di kesempatan kali ini saya akan memberikan tips mengenai Membuat Tampilan Chat Messages Dengan HTML dan CSS yang mana tampilan yang nanti kita akan bikin bagi layout laman bagi tampilan chating antara admin dan customer dengan menggunakan html dan css. Khususnya bagi teman – teman yang dikala ini sedang bingung bagi merancang sebuah layout laman bagi tampilan chating, nah cocok sekali artikel ini bagi teman – teman selaku tambahan refrensi nya.



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



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

<h2>View Chat Messages Source Code Aplikasi</h2>

<div class=container>
  <img src=1.png>
  <p>Hallo selamat datang di kursus webmaster Source Code Aplikasi. 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 telah mendaftar kelas bagi webmaster Ultimate, mohon segera di proses agar saya seketika dapat masuk kelas.</p>
  <span class=left>1:01</span>
</div>


</body>
</html>


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



Selamat



Bagi image teman – teman siapkan image apa saja ya, di tampilan di atas ini saya merancang 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>


Seandainya telah, save dan refrsh di browsernya. Karenanya hasilnya seperti gambar di bawah ini



Selamat



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



Selamat



Karenanya sekiranya saya save dan refresh di browsernya karenanya hasilnya seperti di bawah ini



Selamat



Bagaimana, lumayan gampang bukan..??



Demikianlah di artikel kali ini mengenai Membuat Tampilan Chat Messages Dengan HTML dan CSS semoga bermanfaat dan dapat menjadi tambahan pengetahuan bagi merancang studi case yang berbeda. Kita jumpa lagi di artikel yang akan datang, terimakasih dan hingga jumpa.




Sumber https://kursuswebsite.org

Popular posts from this blog

Perbedaan Antara Keyup dan Keydown Pada jQuery

Even di javascript adalah sebuah suatu yang terjadi di element tertentu, maksudnya yaitu suatu respon atau aksi yang di lakukan oleh user dimana kegiatan tersebut akan memicu jalannya script javascript yang terdapat di blog tersebut. Di javascript terdapat banyak event namun di pembahasan kali ini kita akan membahas mengenai Perbedaan Antara Keyup dan Keydown Di jQuery, Keyup adalah sebuah event yang akan di jalankan ketika tombol dilepaskan di di keyboard, dan sedangkan Keydown adalah sebuah event ketika tombol ditekan di keyboard.
Read more

Membuat Table Warna Berselang dengan PHP

Image
Selamat datang di blog Source Code Aplikasi, masih dengan File yang kemarin, tapi sekarang ini kita akan menggunakan Framework Bootstrap dan Membangun Table Warna Berselang dengan PHP, jadi jangan lupa yang kemarin praktekin dulu yah teman teman link nya yang ini . oka seketika saja kita praktekan.
Read more