Membuat Live Chat Fanspage Di Blogspot

Baca Juga

Jika kau ingin memiliki live chat pada blogmu yang memakai platform Blogspot tidak ada salahnya memakai fitur ini, selain terihat keren pastinya juga sambil promosi Fanspage kau kan hehee

Sebenarnya fitur ini tidak berinteraksi secara pribadi anatara pengunjung dan admin, interaksi akan terjadi di fanspage messenger atau melalui aplikasi messenger atau di messenger.com dan dapat juga di facebook

Jika kau ingin tetap mencoba memasangnya silahkan perhatikan langkah - langkah berikut ini :

1. Silahkan Copy aba-aba CSS dibawah ini, dan Paste di atas aba-aba </head>

<style type="text/css">  .chat_box {    background: #fff;    width: 270px;    height: 435px;    position: fixed;    bottom: -400px;    right: 60px;    transition: all .3s;    border: none;    border-radius: 5px 5px 0 0;    -webkit-box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.25);    -moz-box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.25);    box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.25);    overflow: hidden;    z-index:1000000;  }  .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;  }  .maxi-chatfb,  .mini-chatfb {    position: absolute;    top: 0;    right: 20px;    font-family: Arial;    font-weight: 700;    cursor:pointer;    width:18px;    color: #fff;    text-align:center;    opacity: .7;  }  .maxi-chatfb {    font-size: 24px;    height:30px;    line-height:30px;  }  .mini-chatfb {    font-size: 20px;    height:25px;    line-height:25px;    display: none;  }  .close-chatfb:hover,  .maxi-chatfb:hover,  .mini-chatfb:hover{    opacity:1;  }  </style>  

2. Silahkan Copy aba-aba dibawah ini, dan Paste di atas aba-aba </body>

<div class="chat_box" id="chat">    <div class="chatheader" onclick='showhidechat()'>Messenger Mamankdzgn    </div>      <div class='close-chatfb' onclick='hidechatfb()'>&#215;</div>      <div class='maxi-chatfb' id='maxi-chatfb' onclick='showhidechat()'>&amp;square;</div>      <div class='mini-chatfb' id='mini-chatfb' onclick='showhidechat()'>&#95;</div>    <div class="pesan_chat">      <p>Hai! Kamu dapat kirim pesan ke Admin di sini, jangan lupa LIKE  ya... Terima kasih.</p>      <script type='text/javascript'>  //<![CDATA[  document.write('<iframe name="f11b13dc65e614" width="250px" height="310px" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="no" title="Membuat Live Chat Fanspage Di Blogspot" data-src="https://www.facebook.com/v2.5/plugins/page.php?adapt_container_width=true&amp;app_id=&amp;channel=https%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter%2Fr%2Fbz-D0tzmBsw.js%3Fversion%3D42%23cb%3Df100e25f3ae8bb8%26domain%3Dwarunginter.net%26origin%3Dhttps%253A%252F%252Fwarunginter.net%252Ff8f907cf72f9a4%26relation%3Dparent.parent&amp;container_width=0&amp;height=310&amp;hide_cover=true&amp;href=https%3A%2F%2Fwww.facebook.com%2Fwarunginternet%2F&amp;locale=en_US&amp;sdk=joey&amp;show_facepile=false&amp;show_posts=true&amp;small_header=true&amp;tabs=messages&amp;width=250" style="border: none; visibility: visible; width: 250px; height: 310px;" class=""></iframe>');  //]]>  </script>    </div>  </div>    <script>  //<![CDATA[  function showhidechat() {    var o = document.getElementById("chat");    "0px" !== o.style.bottom ? o.style.bottom = "0px" : o.style.bottom = "-400px";    var o = document.getElementById("maxi-chatfb");    "none" !== o.style.display ? o.style.display = "none" : o.style.display = "block";    var o = document.getElementById("mini-chatfb");    "block" !== o.style.display ? o.style.display = "block" : o.style.display = "none";  };  function hidechatfb() {    var e = document.getElementById("chat").style.display = "none";  };  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>  

3. Ganti aba-aba warunginter.net menjadi domain blog kau (Ada 2) dan warunginternet dengan username fanspage kamu

Baca Juga : Cara Membuat Live Chat Tawk.to Di Website

4. Selesai

Oke aku rasa cukup artikel untuk menambahkan live chat fanspage di blogspot, biar artikel dapat bermanfaat untuk kamuu.