Memasang Chat Box Messenger Facebook di Blog

Memasang Chat Box Messenger Facebook di Blog - Chat Box adalah salah satu sarana di blog yang digunakan admin blog untuk berinteraksi dengan pengunjung/visitor. Sudah banyak layanan yang menyediakan chat box mau itu gratis atau berbayar, tapi kali ini anak sembada akan membagikan chat box dengan messenger facebook popup yang pastinya gratis. Bila teman-teman mau mencobanya, mari kita duduk sama untuk simak langkah-langkah di bawah ini.

Memasang Chat Box Messenger Facebook di Blog

1. Login ke Blogger > Template > Edit HTML

2. Copykan kode di bawah ini tepat 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>

3. Salin kode di bawah ini tepat kode </body>

<div class="chat_box" id="chat">
  <div class="chatheader" onclick='showhidechat()'>Chat Room Anak Sembada
  </div>
  <div class="pesan_chat">
    <p>Hai! Sahabat Sembada bisa chat bareng di sini dengan Messenger,
      <br/> Terima kasih.</p>
    <a href="javascript: void(0)" onclick="popup('https://m.me/sembadakost');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>

4. Simpan Template.


Baca Juga : Cara Memasang CSS Minifier di Blogger

Ganti sembadakost dengan ID facebook atau fanspage facebook sobat.

• Demo

Demikian tutorial dari anak sembada untuk memasang chat box messenger facebook di blog. Semoga bermanfaat. Terima kasih.

Share This