loading...
Memasang Chat Box Messenger Facebook di Blog - Chat Box adalah salah satu sarana di blog yang digunakan admin blog untuk berinteraksi dengan pengunjung/visitor. Sudah banyak layanan yang menyediakan chat box mau itu gratis atau berbayar, tapi kali ini anak sembada akan membagikan chat box dengan messenger facebook popup yang pastinya gratis. Bila teman-teman mau mencobanya, mari kita duduk sama untuk simak langkah-langkah di bawah ini.
Memasang Chat Box Messenger Facebook di Blog
1. Login ke Blogger > Template > Edit HTML
2. Copykan kode di bawah ini tepat di atas kode </head>
<style>
.chat_box {
background: #fff;
width: 250px;
height: 160px;
position: fixed;
bottom: -125px;
left: 60px;
transition: all .3s;
border: 1px solid transparent;
border-radius: 3px 3px 0 0;
-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 0 0 1px 2px;
-moz-box-shadow: rgba(0, 0, 0, 0.0980392) 0 0 1px 2px;
box-shadow: rgba(0, 0, 0, 0.0980392) 0 0 1px 2px;
overflow: hidden;
z-index:1000000;
}
.pesan_chat {
text-align: center;
text-decoration: none;
display: block;
height: 100%;
padding: 5px 5px 15px;
}
.chat_button {
background: #4d90fe;
border: 0;
margin: 0 auto;
padding: 5px 18px;
font-size: 18px;
font-weight: 700;
color: #fff;
text-align: center;
display: inline-block;
border-radius: 3px;
transition: all .3s;
text-decoration: none;
}
.chat_button:hover {
background: #365899;
}
.chatheader {
margin: 0 auto;
padding: 0 10px;
height: 35px;
line-height: 35px;
font-size: 18px;
font-weight: 700;
color: #616161;
text-align: center;
display: block;
cursor: pointer;
}
.pesan_chat p {
color: #616161;
font-size: 16px;
margin: 10px;
}
</style>3. Salin kode di bawah ini tepat kode </body>
<div class="chat_box" id="chat">
<div class="chatheader" onclick='showhidechat()'>Chat Room Anak Sembada
</div>
<div class="pesan_chat">
<p>Hai! Sahabat Sembada bisa chat bareng di sini dengan Messenger,
<br/> Terima kasih.</p>
<a href="javascript: void(0)" onclick="popup('https://m.me/sembadakost');showhidechat()" title="Chat on Messenger">
<span class="chat_button">Chat on Messenger</span></a>
</div>
</div>
<script>
//<![CDATA[
function showhidechat(){var o=document.getElementById("chat");"0px"!==o.style.bottom?o.style.bottom="0px":o.style.bottom="-125px"}function popup(o){var t=650,n=400,e=(screen.width-t)/2,i=(screen.height-n)/2,s="width="+t+", height="+n;return s+=", top="+i+", left="+e,s+=", directories=no",s+=", location=no",s+=", menubar=no",s+=", resizable=no",s+=", scrollbars=no",s+=", status=no",s+=", toolbar=no",newwin=window.open(o,"windowname5",s),window.focus&&newwin.focus(),!1};
//]]>
</script>4. Simpan Template.
Baca Juga : Cara Memasang CSS Minifier di Blogger
Ganti sembadakost dengan ID facebook atau fanspage facebook sobat.
Demikian tutorial dari anak sembada untuk memasang chat box messenger facebook di blog. Semoga bermanfaat. Terima kasih.