Show Hide Chatbox With Minimize Button

Sebelumnya aku sudah sharing perihal cara menciptakan show hide chatbox, namun ada sedikit dilema dikala tombol Chat dibentuk statis pada sebuah elemen ibarat navigasi atau lainnya di bab atas blog ibarat pada blog ini. Artinya, tidak ada tombol standby di bawah blog dikala chatbox ditutup (close) dan pengguna harus mengangkat kursor lagi ke atas blog untuk klik tombol Chat.

Untuk itu aku menambahkan tombol minimize dan maximize pada show hide chatbox sehingga chatbox dapat disembunyian dengan standby di bawah blog dan untuk menampilkannya tinggal klik lagi chatbox-nya sehingga tidak perlu untuk mencari tombol Chat lagi ibarat yang dapat dilihat pada animasi gif di atas.

Silahkan gunakan kode-kode di bawah ini:

1. Gunakan aba-aba CSS di bawah ini, silahkan ganti aba-aba CSS yang sudah Anda gunakan dari tutorial sebelumnya.

 #chat,#chat:after,.chatbox{transition:all .4s ease-in-out}
 #chat,#close-chat,.minim-button,.maxi-button,.chat-text{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:#fff;border-bottom:none;padding:28px 10px 10px;z-index:100000}
 #close-chat{position:absolute;top:2px;right:2px;font-size:24px;border:1px solid #dedede;width:20px;background:#fefefe;z-index:2}
 #minim-chat,#maxi-chat{position:absolute;top:0;left:0;width:100%;height:20px;line-height:20px;cursor:pointer;z-index:1}
 .minim-button{position:absolute;top:2px;right:26px;font-size:24px;border:1px solid #dedede;width:20px;background:#fefefe}
 .maxi-button{position:absolute;top:2px;right:26px;font-size:24px;border:1px solid #dedede;width:20px;background:#fefefe;}
 .chat-text{position:absolute;top:5px;left:10px;font-size:16px;}
 #chat{width:40px;border-radius:3px;padding:2px 8px;font-size:12px;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)}
 }

2. Untuk aba-aba HTML-nya silahkan ganti dengan aba-aba di bawah ini (simpan di atas aba-aba </body>)

 <div class="chatbox" id="chatbox">
 <span class="chat-text">Chatting Yuk!</span>
 <script>
 //<![CDATA[
 KODE EKSTRAK SMARTCHATBOX JS
 //]]>
 </script>
 <div id="close-chat" onclick="closeChatbox()">&times;</div>
 <div id="minim-chat" onclick="minimChatbox()"><span class="minim-button">&minus;</span></div>
 <div id="maxi-chat" onclick="loadChatbox()"><span class="maxi-button">&plus;</span></div>
 </div>
 <script>
 //<![CDATA[
 function loadChatbox(){var e=document.getElementById("minim-chat");e.style.display="block";var e=document.getElementById("maxi-chat");e.style.display="none";var e=document.getElementById("chatbox");e.style.margin="0";}
 function closeChatbox(){var e=document.getElementById("chatbox");e.style.margin="0 0 -1500px 0";}
 function minimChatbox(){var e=document.getElementById("minim-chat");e.style.display="none";var e=document.getElementById("maxi-chat");e.style.display="block";var e=document.getElementById("chatbox");e.style.margin="0 0 -460px 0";}
 //]]>
 </script>

Untuk mengganti KODE EKSTRAK SMARTCHATBOX JS silahkan simak lagi postingan sebelumnya.

Jika ternyata dikala Chatbox di-minimize terlalu ke atas atau ke bawah, silahkan atur angka -460px pada javascript di atas yang aku marking.

3. Untuk menampilkan tombol Chat-nya silahkan simpan aba-aba di bawah ini di mana Anda ingin menampilkannya.

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

Live demonya silahkan coba pada iframe di bawah ini.




Sumber https://www.kompiajaib.com/

Share this post