Membuat Show Hide Chatbox Dari Smartchatbox

Setelah sebelumnya kita menciptakan chat button dengan Google+ Hangout, sekarang kita akan menciptakan show hide chatbox dari SmartChatbox. Saya pilih chatbox dari SmartChatbox alasannya yaitu desainnya yang keren sanggup memakai background gambar yang sanggup dipilih dan diganti-ganti sesuai selera, mendukung gravatar, dan beberapa custom lainnya. Untuk chatbox premium sanggup mendukung sambungan SSL.

Dan sesudah aku coba, chatbox dari SmartChatbox ini sanggup kita akali biar js-nya tidak mengakibatkan blocking render js yaitu dengan meng-ekstrak js-nya dan dipasang dengan inline js.

Dan untuk button show chatbox-nya aku menambahkan efek animasi, jadi jangan heran jikalau CSS-nya agak banyak. Button-nya aku buat melayang di sisi kiri bawah blog, namun sanggup juga dipasang pada sajian ibarat sebagai tumpuan sanggup Anda coba di sajian blog ini di atas (jika aku belum mencopotnya hehehe....).

Atau sanggup 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 ibarat di bawah ini.

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

Kemudian silahkan copy aba-aba url js ibarat yang aku marking di atas dan paste di address kafetaria browser Anda kemudian Enter. Silahkan copy semua aba-aba yang ada di halamannya, biasanya ibarat ini.

Dan silahkan gunakan aba-aba di bawah ini dan simpan di atas aba-aba </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 aba-aba KODE EKSTRAK SMARTCHATBOX JS ini dengan aba-aba yang didapat dari ibarat gambar di atas sehingga kira-kira menjadi ibarat 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 aba-aba CSS di bawah ini dan simpan di atas aba-aba </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 aba-aba 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 aba-aba position:fixed menjadi position:relative kemudian hapus aba-aba bottom:30px;left:30px; kemudian silahkan CUT aba-aba <div id="chat" class="animated-chat tada" onclick="loadChatbox()">Chat</div> dari langkah pertama dan simpan pada aba-aba html sajian blog Anda (ganti div menjadi span biar tidak error HTML5), kira-kira menjadi ibarat 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....
Sumber https://www.kompiajaib.com/

Share this post