Membuat Live Chat Fanspage Di Blogspot

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

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

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

1. Silahkan Copy kode CSS dibawah ini, dan Paste di atas kode </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 kode dibawah ini, dan Paste di atas kode </body>

<div class="chat_box" id="chat">

  <div class="chatheader" onclick='showhidechat()'>Messenger WarungInter.net

  </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 bisa kirim pesan ke Admin di sini, jangan lupa LIKE Warung Internet 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="fb:page Facebook Social Plugin" 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 kode warunginter.net menjadi domain blog kamu (Ada 2) dan warunginternet dengan username fanspage kamu

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

4. Selesai

Oke saya rasa cukup artikel untuk menambahkan live chat fanspage di blogspot, semoga artikel bisa bermanfaat untuk kamuu.

Berbagi :