Cara Membuat Widget Messenger Facebook Di Blog

14:07:00
Cara Membuat Widget Messenger Facebook Di Blog

Selamat datang agan atau agan wati kali ini saya akan berbagi tentang hal blogging, kali ini saya akan berbagi tentang cara membuat widget Messenger Facebook di blog. Pasti kalian sudah tidak awam dengan Messenger di Facebook. Messenger adalah layanan yang diberikan oleh Facebook untuk melakukan aktivitas chat dengan teman-teman anda yang memiliki Facebook.



Dengan adanya messenger lebih memudahkan untuk berkomunikasi dengan seseorang yang jauh. Hal ini dapat dimanfaatkan dalam hal blogging yaitu membuat widget Messenger pada blog anda. Hal ini akan lebih jauh memudahkan para pengunjung untuk melakukan kontak atau memberikan pesan kepada kita sebagai pemilik blog.



Langsung saja untuk tutorial cara membuat widget Messenger Facebook di blog :

Langkah

1. Login pada blog anda masing-masing,

2. Setelah itu pada menu dashboard pilih menu template,

3. Setelah itu pilih menu edit html,

4. Setelah itu cari kode </b:skin> atau </style> dengan cara
Ctrl
+
F
,

5. Setelah itu copy script css di bawah ini,

 .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;
}
6. Setelah itu paste script css tersebut tepat di atas kode </b:skin> atau </style>,

7. Setelah itu cari kode </body> dengan cara
Ctrl
+
F
,

8. Setelah itu copy script html dan javascript di bawah ini,

 <div class='chat_box' id='chat'>
  <div class='chatheader' onclick='showhidechat()'>Messenger Renaldy Ways
  </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()'>_</div>
  <div class='pesan_chat'>
    <p>Hai! Kamu sekarang bisa kirim pesan ke Admin di sini, jangan lupa like fanspage kami, 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%3Drenaldyways.com%26origin%3Dhttps%253A%252F%252Frenaldyways.com%252Ff8f907cf72f9a4%26relation%3Dparent.parent&amp;container_width=0&amp;height=310&amp;hide_cover=true&amp;href=https%3A%2F%2Fwww.facebook.com%2Frenaldyways%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>
 

Jangan lupa untuk mengganti renaldyways dengan ID Facebook atau Fanspage Facebook anda serta mengganti renaldyways.com dengan alamat blog anda!



9. Setelah itu paste script html dan javascript tersebut di atas kode </body>,

10. Simpan template.

Demo

Cara Membuat Widget Messenger Facebook Di Blog




Nah itu saja dari saya semoga bermanfaat, jangan lupa bagikan serta tinggalkan komentar anda, terima kasih.


Referensi Script http://www.kompiajaib.com/2016/07/membuat-kirim-pesan-messenger-fanspage.html

Share this

I'm CEO & Founder in http://caritema.com & http://renaldyways.blogspot.com/


Artikel Menarik Lainnya

Next Article
Next Post
Previous Article
Previous Post
Cara style text di komentar Disqus dan Blogger:
  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.
  • Untuk menggunakan emoji di bawah ini cukup copy kode tersebut dan beri jarak 1 spasi untuk menampilkan emoji pada kolom komentar Blogger.
Parser Kode
FAQ
Emotikon

Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger
Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

2 Comments

Achmad Production 8 December 2016 at 14:42

Sangat Bagus Gan Akhirnya Saya Tau Cara Membuat Widget Di Blog :D

Renaldy Ramadani 8 December 2016 at 17:39

Terima kasih telah berkunjung, hehe :D