Chat Box Dengan Show Hide Button Popup Mesenger

Salah satu alat untuk interaksi antara pengunjung blog dengan admin atau pengunjung lainnya selain kolom komentar ialah kolom chatting. Dengan kolom chatting, pengunjung blog dapat lebih bebas berinteraksi untuk membicarakan banyak hal tanpa harus terpaku pada konten postingan, atau mungkin hanya sekedar untuk salam sapa antar pengunjung blog.

Banyak penyedia chat box ini baik yang gratis maupun berbayar, namun kali ini kita akan menciptakan chat box dengan show hide button popup Messenger sebab saya yakin hampir semua orang mempunyai akun Facebook. Setelah saya coba, Messenger ini tidak dapat dipasang memakai iframe, jadi saya memakai popup window untuk menampilkan Messenger.

DEMO

Bagaimana, tertarik untuk mencobanya? Silahkan ikuti langkahnya di bawah ini.

Silahkan simpan arahan css di bawah ini di atas arahan </head>

 <style>
 .chat_box {
   background: #fff;
   width: 250px;
   height: 160px;
   position: fixed;
   bottom: -125px;
   left: 60px;
   transition: all .3s;
   border: 1px solid transparent;
   border-radius: 3px 3px 0 0;
   -webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 0 0 1px 2px;
   -moz-box-shadow: rgba(0, 0, 0, 0.0980392) 0 0 1px 2px;
   box-shadow: rgba(0, 0, 0, 0.0980392) 0 0 1px 2px;
   overflow: hidden;
   z-index:1000000;
 }
 
 .pesan_chat {
   text-align: center;
   text-decoration: none;
   display: block;
   height: 100%;
   padding: 5px 5px 15px;
 }
 
 .chat_button {
   background: #4d90fe;
   border: 0;
   margin: 0 auto;
   padding: 5px 18px;
   font-size: 18px;
   font-weight: 700;
   color: #fff;
   text-align: center;
   display: inline-block;
   border-radius: 3px;
   transition: all .3s;
   text-decoration: none;
 }
 
 .chat_button:hover {
   background: #365899;
 }
 
 .chatheader {
   margin: 0 auto;
   padding: 0 10px;
   height: 35px;
   line-height: 35px;
   font-size: 18px;
   font-weight: 700;
   color: #616161;
   text-align: center;
   display: block;
   cursor: pointer;
 }
 
 .pesan_chat p {
   color: #616161;
   font-size: 16px;
   margin: 10px;
 }
 </style>

Jika tombolnya ingin berada di sebelah kanan, silahkan ganti arahan left yang saya tandai dengan right.

Kemudian simpan arahan di bawah ini di atas arahan </body>

 <div class="chat_box" id="chat">
   <div class="chatheader" onclick='showhidechat()'>Chat Room Kompi Ajaib
   </div>
   <div class="pesan_chat">
     <p>Hai! Sahabat Kompi dapat chat bareng di sini dengan Messenger,
       <br/> Terima kasih.</p>
     <a href="javascript: void(0)" onclick="popup('https://m.me/kompiajaib');showhidechat()" title="Chat Box Dengan Show Hide Button Popup Mesenger">
       <span class="chat_button">Chat on Messenger</span></a>
   </div>
 </div>
 <script>
 //<![CDATA[
 function showhidechat(){var o=document.getElementById("chat");"0px"!==o.style.bottom?o.style.bottom="0px":o.style.bottom="-125px"}function popup(o){var t=650,n=400,e=(screen.width-t)/2,i=(screen.height-n)/2,s="width="+t+", height="+n;return s+=", top="+i+", left="+e,s+=", directories=no",s+=", location=no",s+=", menubar=no",s+=", resizable=no",s+=", scrollbars=no",s+=", status=no",s+=", toolbar=no",newwin=window.open(o,"windowname5",s),window.focus&&newwin.focus(),!1};
 //]]>
 </script>

Silahkan sesuaikan kalimatnya, lalu silahkan ganti arahan kompiajaib dengan username profil Facebook Anda atau username fanspage FB blog Anda.



Sumber https://www.kompiajaib.com/

Share this post