iklan bagian Header

Cara Membuat Chat Box Keren dengan Bootstrap

Dalam postingan ini saya memberi Anda desain chat box keren menggunakan boostrap 4 dengan html dan css tambahan. Kita akan sama- belajar membuat desain layout kotak obrolan flat design yang keren. desain chat box ini untuk live chatbox.

Cara Membuat Chat Box Keren dengan Bootstrap

Desain kotak obrolan atau chat box merupakan salah satau komponen yang sering ada pada web yang berhubungan dengan costumer atau pelanggan untuk saling berkomunikasi atau saling tanya jawab. jika kamu ingin atau punya rencana untuk menambahkan fitur chat box di web anda. kamu bisa ikuti cara-cara dibawah ini atau menjadikannya referensi untuk dikembangkan.

Desain layout chatbox ini kita akan menggunakan framework boostrap 4, karena sudah wajar disaat sekarang penggunaan framework untuk mempermudah pekerjaan koding. selain itu ada juga tambahan css modifikasi yang ditambahkan dalam desain kotak obrolan kali ini.

Desain kotak pesan ini ini mirip seperti facebook, gmail, google plus. yang kita buat sekarang adalah desain chat box live atau langsung.

Daripada berlama-lama lagi, yuk kita buat chat box nya dengan membuat file baru dengan notepad / sublime / teks editor serupa. Silahkan buat dalam satu project atau folder agar lebih mudah di pahami. New File > Beri nama Index.html > Paste kan kode dibawah ini dan SAVE.

<!doctype html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="custom.css">
  </head>
  <body>
    <div class="container">
        <div class="row pt-3">
            <div class="col-lg-3 m-0 chat-main">
                <div class="row">
                    <div class="col-md-12 chat-header rounded-top p-2">
                        <div class="row">
                            <div class="col-md-2 image">
                                <img src="http://nicesnippets.com/demo/man01.png" class="rounded">
                            </div>
                            <div class="col-md-7 user-detail pt-2">
                                <h6 class="pt-1">Alex Steve</h6>
                                <i class="fa fa-circle active ml-1" aria-hidden="true"></i>
                            </div>
                            <div class="col-md-3 options text-right pt-2">
                                <i class="fa fa-ellipsis-h mr-1 hide-chat-box"></i>
                                <i class="fa fa-times hide-chat-box"></i>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12  chat-content p-0 bg-white border border-top-0">
                        <ul class="pl-3 pr-3 pt-1 mb-1">
                            <li class="p-2 mb-1 rounded">
                                <span class="float-right time">12:00</span>
                                <p class="m-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                            </li>
                            <li class="p-2 mb-1 rounded">
                                <p class="m-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                tempor incididunt ut labore et dolore magna aliqua.</p>
                            </li>
                            <li class="p-2 mb-1 rounded">
                                <p class="m-0">This is the nice one place in world.</p>
                            </li><hr>
                            <li class="p-2 mb-1 rounded bg-info text-white">
                                <span class="float-right time text-white">12:10</span>
                                <p class="m-0">Good Morning.</p>
                            </li>
                            <li class="p-2 mb-1 rounded">
                                <span class="float-right time">12:00</span>
                                <p class="m-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                            </li>
                            <li class="p-2 mb-1 rounded">
                                <p class="m-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                tempor incididunt ut labore et dolore magna aliqua.</p>
                            </li>
                            <li class="p-2 mb-1 rounded">
                                <p class="m-0">This is the nice one place in world.</p>
                            </li><hr>
                            <li class="p-2 mb-1 rounded bg-info text-white">
                                <span class="float-right time text-white">12:10</span>
                                <p class="m-0">Good Morning.</p>
                            </li>

                        </ul> 


                        <p class="text-center mb-2 sender font-italic">Stephen</p>
                        <div class="msg-box p-2">
                            <div class="row">
                                <div class="col-md-9">
                                    <input type="text" class="form-control" placeholder="message ...">
                                </div>
                                <div class="col-md-3 pl-0">
                                    <button class="btn btn-success">Send</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </body>
</html>
Jika sudah, sekarang kamu buat file baru lagi untuk kode CSS nya. New File > Kasi Nama Custom.css > Pastekan kode dibawah ini dan SAVE.

.chat-main{
    bottom: 0;
    right:120px;
    position: fixed;
}
.chat-header{
    background: #E5EFC1;
    border:1px solid #D7DF71;
}
.image img{
    height: 40px;
    width: 40px;
}
.user-detail h6{
    display: inline-block;
}
.user-detail .active{
    color: #32B92D;
    font-size: 12px;
}
.options i{
    color: #a1a1a1;
    font-size: 19px;
    cursor: pointer;
}
.chat-content, .chat-content .sender, .user-detail h6{
    font-size: 14px;
}
.chat-content ul{
    height: 260px;
    overflow-x: scroll;
    overflow-x: hidden;
}
.chat-content ul li{
    list-style: none;
    background: #F5F5F5;
}
.chat-content .msg-box{
    background: #e1e1e1;
}
.chat-content .msg-box .send-btn{
    background: #39AEA9;
}
.chat-content .time{
    font-size: 10px;
    color: #a1a1a1;
}
Jika berhasil, maka hasilnya akan seperti dibawah ini:

Cara Membuat Chat Box Keren dengan Bootstrap HTML CSS

Bgaimana bagus bukan? sekarang kamu tinggal kreasikan dan kombinasikan kedalam kodingan kamu yang lain agar menjadi kesatuan yang utuh dan chat box nya bisa dapat digunakan. Chat box ini cocok untuk web yang ingin langsung berkomunikasi dengan pelanggan atau live chat.

Semoga kamu suka dengan desainnya, jika kamu suka kamu bisa bagikan keteman-teman kamu yang lain. dan jika ada pertanyaan dan masukkan seputar ini, silahkan berikan komentar dan pendapatmu di kolom kemntar kami. happy coding!

0 Response to "Cara Membuat Chat Box Keren dengan Bootstrap"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel