Cara Mudah Memasang Facebook Messenger Kedalam Blog

Artikel Kang Wira kali ini akan membahas tentang Cara Mudah Memasang Facebook Messenger Kedalam Blog yang dapat memudahkan para pengunjung blog untuk berinteraksi dengan admin blog tersebut via Facebook Chat.

Tutorial yang saya bagikan kali ini 100% bekerja pada blog.

Agar teman-teman bisa melihat contoh demo Facebook Messenger yang sudah saya terapkan pada blog dumi saya, teman-teman bisa tekan tombol demonya dibawah ini.



D E M O

Cara penerapannya, kamu bisa langsung perhatikan tutorial dibawah ini dan langsung dipraktekkan dalam blog utama kamu. Langkah pertama yang kamu harus kamu lakukan adalah menyalin kode CSS dibawah ini

<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 posisi tombolnya ingin berada di sebelah kanan, ganti kode left yang saya tandai dengan right

Selanjutnya, kamu masuk ke menu edit HTML didalam blog, kemudian tempel kode diatas tepat diatas kode </head>

Pada langkah selanjutnya silahkan kamu salin Kode dibawah ini lalu tempelkan tepat diatas kode </body>.

<div class="chat_box" id="chat">
  <div class="chatheader" onclick='showhidechat()'>Chat Room
  </div>
  <div class="pesan_chat">
    <p>Kamu bisa chat bareng Admin di sini dengan Messenger,
      <br/> Terima kasih.</p>
    <a href="javascript: void(0)" onclick="popup('https://m.me/admin.kangwira');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 kamu rubah kalimatnya sesuai keinginan kamu, dan ganti tulisan yang saya tandai berwarna merah dengan dengan Username Profile Facebook kamu.

Simpan, Lalu lihatlah hasilnya dalam blog.

Sekian Toturial Cara Mudah Memasang Facebook Messenger Kedalam Blog kali ini, baca juga Cara Cepat Posting Masal Kesemua Group Facebook.

Silahkan isi komentar dibawah ini apabila ada pertanyaan. Terimakasih