Show Hide Chatbox With Minimize Button

Show Hide Chatbox With Minimize Button

Bola Hero Gawai

Show Hide Chatbox With Minimize Button

Show Hide Chatbox With Minimize Button
Sebelumnya saya sudah sharing tentang cara membuat show hide chatbox, namun ada sedikit masalah ketika tombol Chat dibuat statis pada sebuah elemen seperti navigasi atau lainnya di bagian atas blog seperti pada blog ini. Artinya, tidak ada tombol standby di bawah blog ketika chatbox ditutup (close) dan pengguna harus mengangkat kursor lagi ke atas blog untuk klik tombol Chat.

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

Silahkan gunakan kode-kode di bawah ini:

1. Gunakan kode CSS di bawah ini, silahkan ganti kode 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 kode HTML-nya silahkan ganti dengan kode di bawah ini (simpan di atas kode </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 ketika Chatbox di-minimize terlalu ke atas atau ke bawah, silahkan atur angka -460px pada javascript di atas yang saya marking.

3. Untuk menampilkan tombol Chat-nya silahkan simpan kode 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.



Share this:

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

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

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!

×
×
×