Chat Box Dengan Show Hide Button Popup Mesenger

Ditulis oleh: Adhy Suryadi

Ditulis pada: 7/21/2016

Salah satu alat untuk interaksi antara pengunjung blog dengan admin atau pengunjung lainnya selain kolom komentar adalah kolom chatting. Dengan kolom chatting, pengunjung blog bisa 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 membuat chat box dengan show hide button popup Messenger karena saya yakin hampir semua orang memiliki akun Facebook. Setelah saya coba, Messenger ini tidak bisa dipasang menggunakan iframe, jadi saya menggunakan popup window untuk menampilkan Messenger.


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

Silahkan simpan kode css di bawah ini di atas kode </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 kode left yang saya tandai dengan right.

Kemudian simpan kode di bawah ini di atas kode </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 bisa chat bareng di sini dengan Messenger,

      <br/> Terima kasih.</p>

    <a href="javascript: void(0)" onclick="popup('https://m.me/kompiajaib');showhidechat()" title="Chat on Messenger">

      <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, kemudian silahkan ganti kode kompiajaib dengan username profil Facebook Anda atau username fanspage FB blog Anda.