Widget Chat Messenger Show Hide Dengan Effect Drag Move

Hai Selamat Siang 😃 , jumpa lagi dengan Topik Tutorial , dan kali ini saya mau bagi sedikit cara pasang Widget Messenger Dengan Effect Show Hide Dan Dengan Effect Drag Move.
Kalian Dapat Menaruh Nya Dimana Pun Kalian Suka

Recomended Taruh Di Halaman Statis Saja Agar Tidak Mengganggu Kinerja Blog Sobat.
Yuk Kita mulai 😃

Pertama Buat Halaman Kosong Terserah Mau kasih judul apa .

buat suatu ungkapan atau image untuk mempercantik halaman , dan tambahkan Kode Dibawah pada halaman yang kalian kelola.

<style>
/* chat */
.chat_box{background:#fff;width:270px;height:435px;position:fixed;bottom:0px;right:14px;border:none;border-radius:5px 5px 0 0;-webkit-box-shadow:0 10px 50px 0 rgba(0,0,0,0.25);-moz-box-shadow:0 10px 50px 0 rgba(0,0,0,0.25);box-shadow:0 10px 50px 0 rgba(0,0,0,0.25);overflow:hidden;z-index:1000000;display:none}
.pesan_chat{text-align:center;text-decoration:none;display:block;height:100%;padding:5px 5px 15px}
.chatheader{margin:0 auto;padding:0 10px;height:35px;line-height:35px;font-size:16px;font-weight:700;color:#fff;text-align:left;display:block;cursor:pointer;background:#3a5897}
.pesan_chat p{color:#616161;font-size:14px;margin:10px}
.close-chatfb{position:absolute;top:0;right:0;font-family:Arial;font-size:24px;font-weight:700;cursor:pointer;width:24px;color:#fff;height:35px;line-height:35px;text-align:center;opacity:.7}
.close-chatfb:hover,.maxi-chatfb:hover,.mini-chatfb:hover{opacity:1}
.round.hollow{margin:40px 0 0;}
.round.hollow a{border:2px solid #2c4584;border-radius:35px;color:#2c4584;font-size:23px;padding:10px 21px;text-decoration:none;font-family:'Open Sans',sans-serif;}
.round.hollow a:hover{border:2px solid #138be6;border-radius:35px;color:red;color:#000;font-size:23px;padding:10px 21px;text-decoration:none;}
.popup-box-on{display:block!important;}
</style>
<div class="chat_box" id="qnimate">
<div class="chatheader">
Messenger Agiel
</div>
<div class='close-chatfb' id="removeClass">
&#215;</div>
<div class="pesan_chat">
<p>
Hai! Kamu bisa kirim pesan ke Admin di sini, jangan lupa LIKE Agiel ya... Terima kasih.</p>
<script type='text/javascript'>
//<![CDATA[
document.write('<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fagieltriono%2F&tabs=messages&width=250px&height=310px&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=false&appId=308120199335019" width="250px" height="310px" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>');
//]]>
</script>
</div>
</div>

<center>
<h2>
Kalian Mau Chat Dengan Admin ?</h2>
</center>
<div class="round hollow text-center">
<a href="#" id="addClass"><span class="fa fa-facebook"></span> Open Messenger </a>
<script>
//<![CDATA[
function init() {
var vidDefer = document.getElementsByTagName('iframe');
for (var i=0; i<vidDefer.length; i++) {
if(vidDefer[i].getAttribute('data-src')) {
vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
} } }
window.onload = init;
//]]>
</script>
  <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
  <link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet' type='text/css'/>
  <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script type="text/javascript">
 $(function() {    $( "#qnimate" ).draggable({ containment: "window" }); });
</script>
<script type="text/javascript">
  $(function(){
$("#addClass").click(function () {
          $('#qnimate').addClass('popup-box-on');
            });
          
            $("#removeClass").click(function () {
          $('#qnimate').removeClass('popup-box-on');
            });
  })
</script>

Ganti Dengan Plugin Page Kamu.

<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fagieltriono%2F&tabs=messages&width=250px&height=310px&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=false&appId=308120199335019" width="250px" height="310px" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>

Selesai 😃

Bisa Di Taurh Dimana Pun Kalian Suka

RESULT

Inspirate By : http://www.kompiajaib.com/