Membuat Show Hide Chatbox Dari SmartChatbox

Ditulis oleh: Adhy Suryadi

Ditulis pada: 10/28/2015

Setelah sebelumnya kita membuat chat button dengan Google+ Hangout, kini kita akan membuat show hide chatbox dari SmartChatbox. Saya pilih chatbox dari SmartChatbox karena desainnya yang keren bisa menggunakan background gambar yang bisa dipilih dan diganti-ganti sesuai selera, mendukung gravatar, dan beberapa custom lainnya. Untuk chatbox premium bisa mendukung sambungan SSL.

Dan setelah saya coba, chatbox dari SmartChatbox ini bisa kita akali agar js-nya tidak menyebabkan blocking render js yaitu dengan meng-ekstrak js-nya dan dipasang dengan inline js.

Dan untuk button show chatbox-nya saya menambahkan efek animasi, jadi jangan heran jika CSS-nya agak banyak. Button-nya saya buat melayang di sisi kiri bawah blog, namun bisa juga dipasang pada menu seperti sebagai contoh bisa Anda coba di menu blog ini di atas (jika saya belum mencopotnya hehehe....).

Atau bisa dicoba pada iframe demo di bawah ini dengan button melayang.


Jika tertarik untuk mencobanya, silahkan ikuti langkah-langkahnya di bawah ini.

1. Silahkan masuk ke http://www.smartchatbox.com/ dan klik tombol Create SmartChatbox dan silahkan buat chatbox untuk blog Anda. Kemudian dapatkan kodenya. Biasanya akan tampak seperti di bawah ini.

<script type="text/javascript" src="//www3.smartchatbox.com/shoutbox/start.php?key=90162xxxx"></script>

Kemudian silahkan copy kode url js seperti yang saya marking di atas dan paste di address bar browser Anda kemudian Enter. Silahkan copy semua kode yang ada di halamannya, biasanya seperti ini.

Dan silahkan gunakan kode di bawah ini dan simpan di atas kode </body>.

<div class='chatbox' id='chatbox'>

<script>

//<![CDATA[

KODE EKSTRAK SMARTCHATBOX JS

//]]>

</script>

<div id='close-chat' onclick='closeChatbox()'>&amp;times;</div>   

</div>

<div id="chat" class="animated-chat tada" onclick="loadChatbox()">Chat</div>

<script>

//<![CDATA[

function loadChatbox(){var e=document.getElementById("chat");e.style.display="none";var e=document.getElementById("chatbox");e.style.margin="0";}

function closeChatbox(){var e=document.getElementById("chat");e.style.display="block";var e=document.getElementById("chatbox");e.style.margin="0 0 -1500px 0";}

//]]>

</script>

Silahkan ganti kode KODE EKSTRAK SMARTCHATBOX JS ini dengan kode yang didapat dari seperti gambar di atas sehingga kira-kira menjadi seperti di bawah ini.

<div class='chatbox' id='chatbox'>

<script>

//<![CDATA[

document.write('<div id="smartchatbox_img90162xxxx" style="width: 220px; height: 450px; overflow: hidden; margin: auto; padding: 0; border: 1px solid #000000;  background: url(\'http://www3.smartchatbox.com/shoutbox/img/backgrounds/16_small.jpg\') 50% 50%; ">');

document.write('<div id="smartchatbox90162xxxx" style="width: 220px; height: 450px; overflow: hidden; margin: auto; padding: 0; border:0; ">');

document.write('<iframe src="http://www3.smartchatbox.com/shoutbox/sb.php?key=90162xxxx" scrolling="no" frameborder="0" width="220px" height="450px" style="border:0; margin:0; padding: 0;">');

document.write('</iframe></div></div>');

//]]>

</script>

<div id='close-chat' onclick='closeChatbox()'>&amp;times;</div>   

</div>

<div id="chat" class="animated-chat tada" onclick="loadChatbox()">Chat</div>

<script>

//<![CDATA[

function loadChatbox(){var e=document.getElementById("chat");e.style.display="none";var e=document.getElementById("chatbox");e.style.margin="0";}

function closeChatbox(){var e=document.getElementById("chat");e.style.display="block";var e=document.getElementById("chatbox");e.style.margin="0 0 -1500px 0";}

//]]>

</script>

2. Kemudian silahkan copy kode CSS di bawah ini dan simpan di atas kode </head>

<style type='text/css'>

/*<![CDATA[*/

#chat,#chat:after,.chatbox{transition:all .4s ease-in-out}

#chat,#close-chat{font-weight:700;cursor:pointer;font-family:Arial,sans-serif;text-align:center;height:20px;line-height:20px}

#chat,#close-chat,.chatbox{border:1px solid #A8A8A8}

#chat:after,#chat:before{position:absolute;border-style:solid;content:""}

.chatbox{position:fixed;bottom:0;left:50px;margin:0 0 -1500px;background:linear-gradient(to bottom,#fefefe 0,#d1d1d1 100%);border-bottom:none;padding:10px;z-index:100000}

#close-chat{position:absolute;top:-10px;right:-10px;font-size:24px;border-radius:100%;width:20px;background:#fefefe}

#chat{width:40px;border-radius:3px;padding:2px 8px;font-size:12px;position:fixed;bottom:30px;left:30px;background:#fff;-webkit-transform:translateZ(0);transform:translateZ(0)}

#chat:before{border-width:10px 11px 0 0;border-color:#A8A8A8 transparent transparent;left:7px;bottom:-10px}

#chat:after{border-width:9px 8px 0 0;border-color:#fff transparent transparent;left:8px;bottom:-8px}

#chat:hover{background:#ddd;-webkit-animation-name:hvr-pulse-grow;animation-name:hvr-pulse-grow;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-direction:alternate;animation-direction:alternate}

#chat:hover:after{border-color:#ddd transparent transparent!important}

.animated-chat{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}

@-webkit-keyframes tada{0%{-webkit-transform:scale(1)}

10%,20%{-webkit-transform:scale(.9)rotate(-3deg)}

30%,50%,70%,90%{-webkit-transform:scale(1.1)rotate(3deg)}

40%,60%,80%{-webkit-transform:scale(1.1)rotate(-3deg)}

100%{-webkit-transform:scale(1)rotate(0)}

}

@keyframes tada{0%{transform:scale(1)}

10%,20%{transform:scale(.9)rotate(-3deg)}

30%,50%,70%,90%{transform:scale(1.1)rotate(3deg)}

40%,60%,80%{transform:scale(1.1)rotate(-3deg)}

100%{transform:scale(1)rotate(0)}

}

.tada{-webkit-animation-name:tada;animation-name:tada}

@-webkit-keyframes hvr-pulse-grow{to{-webkit-transform:scale(1.1);transform:scale(1.1)}

}

@keyframes hvr-pulse-grow{to{-webkit-transform:scale(1.1);transform:scale(1.1)}

}

/*]]>*/

</style>

Selesai...silahkan save edit HTML dan coba refresh halaman blog Anda, maka tombol chat akan muncul di pojok kiri bawah blog Anda.

Kalau ingin menyimpan chat button-nya di menu, silahkan rubah pada kode CSS di bawah ini.

#chat{width:40px;border-radius:3px;padding:2px 8px;font-size:12px;position:fixed;bottom:30px;left:30px;background:#fff;-webkit-transform:translateZ(0);transform:translateZ(0)}

Silahkan ganti kode position:fixed menjadi position:relative lalu hapus kode bottom:30px;left:30px; kemudian silahkan CUT kode <div id="chat" class="animated-chat tada" onclick="loadChatbox()">Chat</div> dari langkah pertama dan simpan pada kode html menu blog Anda (ganti div menjadi span agar tidak error HTML5), kira-kira menjadi seperti di bawah ini.

<div class="menu">

<ul>

<li>bla bla bla</li>

<li>bla bla bla</li>

<li>bla bla bla</li>

<li><span id="chat" class="animated-chat tada" onclick="loadChatbox()">Chat</span></li>

</ul>

</div>

Selamat mencoba....