Chat Box Dengan Show Hide Button Popup Mesenger

Chat Box Dengan Show Hide Button Popup Mesenger

Bola Hero Gawai

Chat Box Dengan Show Hide Button Popup Mesenger

Chat Box Dengan Show Hide Button Popup Mesenger
Salah satu alat untuk interaksi antara pengunjung blog dengan admin atau pengunjung lainnya selain kolom komentar adalah kolom chatting. Dengan kolom chatting, pengunjung blog bisa lebih bebas berinteraksi untuk membicarakan banyak hal tanpa harus terpaku pada konten postingan, atau mungkin hanya sekedar untuk salam sapa antar pengunjung blog.

Banyak penyedia chat box ini baik yang gratis maupun berbayar, namun kali ini kita akan membuat chat box dengan show hide button popup Messenger karena saya yakin hampir semua orang memiliki akun Facebook. Setelah saya coba, Messenger ini tidak bisa dipasang menggunakan iframe, jadi saya menggunakan popup window untuk menampilkan Messenger.


Bagaimana, tertarik untuk mencobanya? Silahkan ikuti langkahnya di bawah ini.

Silahkan simpan kode css di bawah ini 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>

Jika tombolnya ingin berada di sebelah kanan, silahkan ganti kode left yang saya tandai dengan right.

Kemudian simpan kode di bawah ini di atas kode </body>


<div class="chat_box" id="chat">
  <div class="chatheader" onclick='showhidechat()'>Chat Room Kompi Ajaib
  </div>
  <div class="pesan_chat">
    <p>Hai! Sahabat Kompi bisa chat bareng di sini dengan Messenger,
      <br/> Terima kasih.</p>
    <a href="javascript: void(0)" onclick="popup('https://m.me/kompiajaib');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>

Silahkan sesuaikan kalimatnya, kemudian silahkan ganti kode kompiajaib dengan username profil Facebook Anda atau username fanspage FB blog Anda.


Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

1 Comment

Terimakasih scriptnya, blog saya jadi tambah mantap.

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×