In Feed Ads

Cara Menciptakan Chat Box Keren Dengan Bootstrap

Dalam postingan ini aku memberi Anda desain chat box keren memakai boostrap 4 dengan html dan css tambahan. Kita akan sama- berguru menciptakan desain layout kotak dialog flat design yang keren. desain chat box ini untuk live chatbox.

Dalam postingan ini aku memberi Anda desain chat box keren memakai boostrap  Cara Membuat Chat Box Keren dengan Bootstrap

Desain kotak dialog atau chat box merupakan salah satau komponen yang sering ada pada web yang bekerjasama dengan costumer atau pelanggan untuk saling berkomunikasi atau saling tanya jawab. bila kau ingin atau punya rencana untuk menambahkan fitur chat box di web anda. kau sanggup ikuti cara-cara dibawah ini atau menjadikannya acuan untuk dikembangkan.

Desain layout chatbox ini kita akan memakai framework boostrap 4, sebab sudah masuk akal disaat kini penggunaan framework untuk mempermudah pekerjaan koding. selain itu ada juga pemanis css modifikasi yang ditambahkan dalam desain kotak dialog kali ini.

Desain kotak pesan ini ini menyerupai mirip facebook, gmail, google plus. yang kita buat kini yakni desain chat box live atau langsung.

Daripada berlama-lama lagi, yuk kita buat chat box nya dengan menciptakan file gres dengan notepad / sublime / teks editor serupa. Silahkan buat dalam satu project atau folder supaya lebih gampang di pahami. New File > Beri nama Index.html > Paste kan instruksi 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, kini kau buat file gres lagi untuk instruksi CSS nya. New File > Kasi Nama Custom.css > Pastekan instruksi 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 kesudahannya akan menyerupai dibawah ini:

Dalam postingan ini aku memberi Anda desain chat box keren memakai boostrap  Cara Membuat Chat Box Keren dengan Bootstrap

Bgaimana manis bukan? kini kau tinggal kreasikan dan kombinasikan kedalam kodingan kau yang lain supaya menjadi kesatuan yang utuh dan chat box nya sanggup mampu digunakan. Chat box ini cocok untuk web yang ingin pribadi berkomunikasi dengan pelanggan atau live chat.

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

Berlangganan update artikel terbaru via email:

0 Response to "Cara Menciptakan Chat Box Keren Dengan Bootstrap"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel