Widget Chat Messenger Show Hide Dengan Effect Drag Move - Agiel Triono

Widget Chat Messenger Show Hide Dengan Effect Drag Move

Baca Juga
thumb




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



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

  • Untuk memasukan gambar silakan upload gambar pada komentar disqus.
  • Untuk memasukan link silahkan cantumkan link pada komentar tanpa menggunakan tag <a>.
  • Untuk menulis huruf bold silahkan gunakan <strong>...</strong> atau <b>...</b>.
  • Untuk menulis huruf italic silahkan gunakan <em>...</em> atau <i>...</i>.
  • Untuk menulis huruf underline silahkan gunakan <u>...</u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike>...</strike>.
  • Untuk menulis kutipan pendek gunakan <q>...</q>.
  • Untuk menulis kutipan panjang gunakan <blockqoute>...</blockqoute>.
  • Untuk menyembunyikan konten panjang gunakan <spoiler>...</spoiler>.
  • Untuk menulis syntax highlighter silahkan gunakan <pre><code>...</code></pre>, dan silahkan parse kode pada tab TOOLS.