Tuesday, August 9, 2016

Widget Chat Messenger Show Hide Dengan Effect Drag Move

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/

Penggunaan Markup
  • Untuk memasukan gambar dan youtube link silahkan taruh link gambar dan youtube link tanpa tag <img> dan <iframe>.
  • Untuk menulis huruf bold silahkan gunakan [strong]KONTEN[/strong] atau [b]KONTEN[/b].
  • Untuk menulis huruf italic silahkan gunakan [em]KONTEN[/em] atau [i]KONTEN[/i].
  • Untuk menulis huruf underline silahkan gunakan [u]KONTEN[/u].
  • Untuk menulis huruf strikethrought silahkan gunakan [strike]KONTEN[/strike].
  • Untuk menulis kode HTML silahkan gunakan [code]KONTEN[/code] atau [pre]KONTEN[/pre] atau [pre][code]KONTEN[/code][/pre], dan silahkan parse dulu kodenya pada kotak parser di bawah ini.

Penggunaan Parse Kode Dan Emoticon Tidak Berlaku Di Ponsel.
Show EmoticonHide Emoticon Off Topic