Cara Mudah Memasang Facebook Messenger Di Blogger

Cara Mudah Memasang Facebook Messenger Di Blogger - Pada kesempatan ini mamang akan membagikan tutorial cara memasang facebook messenger di blog , sudah banyak pengguna facebook di seluruh dunia . hal tersebut menegaskan dominasi facebook di pasaran sosial media .

salah satu fitur yang sangat populer di facebook yaitu facebook messenger . facebook messenger ini tadinya hanya bisa di buka di website utamanya facebook aja , tetapi seiring berjalannya waktu kini facebook messenger ini berevolusi menjadi aplikasi independent yang berhasil mendapatkan ratting yang baik .

facebook messenger ini memang sangat mudah di gunakan usernya untuk berkomunikasi sesama teman dan facebook messenger ini memiliki fitur call dan video call . bila anda mempunyai bisnis di facebook dan mempunyai fanspage sendiri , facebook messenger ini akan sangat membantu bila di pasang di blog .

dalam tutorial kali ini mamang akan membahas Cara Mudah Memasang Facebook Messenger Di Blogger hanya dengan menggunakan beberapa baris kode .

pertama yang harus kalian lakukan adalah kode HTML untuk menempatkan chat box di setiap halaman website / blog anda :)

Pasang kode berikut di widget atau dimanapun sesuka hatimu :v

<div class="fb-livechat"> 
<div class="sberpikir fb-overlay"></div>
<div class="fb-widget"> 
<div class="sberpikir fb-close"></div>
<div class="fb-page" data-href="https://www.facebook.com/roby014/" data-tabs="messages" data-width="360" data-height="400" data-small-header="true" data-hide-cover="true" data-show-facepile="false"> 
<blockquote cite="https://www.facebook.com/roby014/" class="fb-xfbml-parse-ignore"></blockquote> </div>
<div id="fb-root"></div></div><a href="https://m.me/roby014" title="Chat Kami di Facebook" class="sberpikir fb-button"></a>
</div>

<script src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.9"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script>$(document).ready(function(){var t={delay: 125, overlay: $(".fb-overlay"), widget: $(".fb-widget"), button: $(".fb-button")}; setTimeout(function(){$("div.fb-livechat").fadeIn()}, 8*t.delay), $(".sberpikir").on("click", function(e){e.preventDefault(), t.overlay.is(":visible")?(t.overlay.fadeOut(t.delay), t.widget.stop().animate({bottom: 0, opacity: 0}, 2*t.delay, function(){$(this).hide("slow"), t.button.show()})):t.button.fadeOut("medium", function(){t.widget.stop().show().animate({bottom: "30px", opacity: 1}, 2*t.delay), t.overlay.fadeIn(t.delay)})})});</script>

Dari kode di atas , jangan lupa anda ganti roby014 dengan username facebook fans page anda , untuk melihat usenamenya silahkan buka profile fanspage anda biasanya ada di belakang , contohnya https://www.facebook.com/username

Jika sudah kita tinggal menghias tampilannya menggunakan kode CSS , berikut ini kode CSS yang gampang di ubah dan di sesuaikan dengan blog anda . biasanya di pasang di </style>

CSS<style>.fb-livechat,
.fb-widget {
 display: none
}

.sberpikir.fb-button,
.sberpikir.fb-close {
 position: fixed;
 right: 24px;
 cursor: pointer
}

.sberpikir.fb-button {
 z-index: 1;
 background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEyOCAxMjgiIGhlaWdodD0iMTI4cHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxMjggMTI4IiB3aWR0aD0iMTI4cHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxnPjxyZWN0IGZpbGw9IiMwMDg0RkYiIGhlaWdodD0iMTI4IiB3aWR0aD0iMTI4Ii8+PC9nPjxwYXRoIGQ9Ik02NCwxNy41MzFjLTI1LjQwNSwwLTQ2LDE5LjI1OS00Niw0My4wMTVjMCwxMy41MTUsNi42NjUsMjUuNTc0LDE3LjA4OSwzMy40NnYxNi40NjIgIGwxNS42OTgtOC43MDdjNC4xODYsMS4xNzEsOC42MjEsMS44LDEzLjIxMywxLjhjMjUuNDA1LDAsNDYtMTkuMjU4LDQ2LTQzLjAxNUMxMTAsMzYuNzksODkuNDA1LDE3LjUzMSw2NCwxNy41MzF6IE02OC44NDUsNzUuMjE0ICBMNTYuOTQ3LDYyLjg1NUwzNC4wMzUsNzUuNTI0bDI1LjEyLTI2LjY1N2wxMS44OTgsMTIuMzU5bDIyLjkxLTEyLjY3TDY4Ljg0NSw3NS4yMTR6IiBmaWxsPSIjRkZGRkZGIiBpZD0iQnViYmxlX1NoYXBlIi8+PC9zdmc+) center no-repeat #0084ff;
 width: 40px;
 height: 40px;
 text-align: center;
 top: 270px;
 border: 0;
 outline: 0;
 border-radius: 60px;
 -webkit-border-radius: 60px;
 -moz-border-radius: 60px;
 -ms-border-radius: 60px;
 -o-border-radius: 60px;
 box-shadow: 0 1px 6px rgba(0, 0, 0, .06), 0 2px 32px rgba(0, 0, 0, .16);
 -webkit-transition: box-shadow .2s ease;
 background-size: 80%;
 transition: all .2s ease-in-out
}

.sberpikir.fb-button:focus,
.sberpikir.fb-button:hover {
 transform: scale(1.1);
 box-shadow: 0 2px 8px rgba(0, 0, 0, .09), 0 4px 40px rgba(0, 0, 0, .24)
}

.fb-widget {
 background: #fff;
 z-index: 999;
 position: fixed;
 width: 360px;
 height: 435px;
 overflow: hidden;
 opacity: 0;
 bottom: 0;
 right: 24px;
 border-radius: 6px;
 -o-border-radius: 6px;
 -webkit-border-radius: 6px;
 box-shadow: 0 5px 40px rgba(0, 0, 0, .16);
 -webkit-box-shadow: 0 5px 40px rgba(0, 0, 0, .16);
 -moz-box-shadow: 0 5px 40px rgba(0, 0, 0, .16);
 -o-box-shadow: 0 5px 40px rgba(0, 0, 0, .16)
}

.fb-credit {
 text-align: center;
 margin-top: 8px
}

.fb-credit a {
 transition: none;
 color: #bec2c9;
 font-family: Helvetica, Arial, sans-serif;
 font-size: 12px;
 text-decoration: none;
 border: 0;
 font-weight: 400
}

.sberpikir.fb-overlay {
 z-index: 0;
 position: fixed;
 height: 100vh;
 width: 100vw;
 -webkit-transition: opacity .4s, visibility .4s;
 transition: opacity .4s, visibility .4s;
 top: 0;
 right: 0;
 background: rgba(0, 0, 0, 0);
 display: none
}

.sberpikir.fb-close {
 z-index: 4;
 padding: 0 6px;
 background: #365899;
 font-weight: 700;
 font-size: 11px;
 color: #fff;
 margin: 8px;
 border-radius: 3px
}

.sberpikir.fb-close::after {
 content: 'x';
 font-family: sans-serif
}
</style>

Untuk Mempercepat blog anda supaya tidak lemot setelah pasang messenger ini sebaiknya kode di atas di me-minify kode-kode di atas dengan tool seperti Minifier.

Bagi Pengguna Blogspot dan Wordpress biasanya , kode di atas di tempatkan di widget sidebar . dan bagi pengguna wordpress bisa juga menggunakan plugin yang tersedia .

cukup sekian artikel Cara Mudah Memasang Facebook Messenger Di Blogger , semoga artikel ini bermanfaat bagi anda , jangan lupa beri ratting artikel ini dengan klik memuat komentar dan klik simbol reaction nya :)

salam mamang obet :)

Share this post

ROBY NASURO GUNAWAN

-English My name is roby nasuro gunawan, I come from a small town, I am not notable in the real world but I am famous in cyberspace:) -INDONESIAN Nama saya roby nasuro gunawan , saya berasal dari kota kecil , saya tidak terkenal di dunia nyata tetapi saya terkenal di dunia maya :)

Berlangganan update artikel terbaru via email: