Cara Membuat Show hide Chat Box di blog

Cara Membuat Show hide Chat Box di blog | Kali ini kita akan membuat show hide chatbox dari Cbox. Saya pilih Cbox karena penyedia widget chat yang lain seperti SmartChatbox dll katanya udah mau discontinue yaa semacam pemberhentian sistem gitulah... oleh karena itu saya memilih Cbox sebagai penggantinya.

Dan script ini asalnya dari Kang Adhy yang saya utak atik lagiii.. hahaha biar keren lahh.. dan sudah saya tambahkan efek lagi pada bagian chatnya supaya tambahh jozz :v

Sama untuk button shownya saya tambahkan efek animasi pada cssnya, jadi jangan marah yaa kalo CSSnya agak banyak :D.. tombolnya saya buat melayang di sisi kanan Blog, Namun bisa juga dipasang pada menu seperti sebagai contoh bisa anda coba pada blog saya ini.

Atau anda bisa juga mencobanya pada iframe demo di bawah ini dengan tombol melayang.

See the Pen yJjOVo by Bang Reza (@bangreza24) on CodePen.

Gimana ?.. anda tertarik untuk mencobanya, silahkan ikuti langkah-langkahnya di bawah ini.

1. Buka website CBox
2. Masukkan email anda dan silahkan buat akun CBox untuk blog anda, kemudian buka email anda trus dapatkan link menuju chatnya. Link nya akan tampak di email anda seperti di bawah ini.

Welcome to Cbox! Your account name is BlogMazterseo and your quick link is http://my.cbox.ws/BlogMazterseo

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

 <div class='chatbox' id='chatbox'>
<script>
 //<![CDATA[
document.write('<iframe src="http://my.cbox.ws/BlogMazterseo" scrolling="no" frameborder="0" width="100%" height="450px" style="border:0; margin:0; padding: 0;">');
document.write('</iframe>');
//]]>
</script>
<div id='close-chat' onclick='closeChatbox()'>&amp;times;</div>
</div>
<div class='animated-chat tada' id='chat' 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>

4. Silahkan ganti link yang saya tandai warna merah dengan link cbox anda.

5. Kemudian silahkan copy 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:25px;line-height:20px}
#chat,#close-chat,.chatbox{border:1px solid #ccc; box-shadow:1px 0px 3px 0px #C7C7C7}
#chat:after,#chat:before{position:absolute;border-style:solid;content:""}
.chatbox{position:fixed;bottom:0;right:50px;margin:0 0 -1500px;background:linear-gradient(to bottom,#fff 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:58px;border-radius:3px;padding:2px 8px;font-size:12px;position:fixed;bottom:26px;left:690px;background:#4169E1;-webkit-transform:translateZ(0);transform:translateZ(0); color: #fff; }
#chat:before{border-width:10px 11px 0 0;border-color:#ccc transparent transparent;left:7px;bottom:-10px}
#chat:after{border-width:9px 8px 0 0;border-color:#4169E1 transparent transparent;left:8px;bottom:-8px}
#chat:hover{background:#1E90FF;-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:#1E90FF 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... taraaaaaa! selamat tombol chat
anda telah muncul di pojok kanan bawah blog anda :D

Kalau ingin Chat Buttonya di menu juga bisa kok.., silahkan rubah 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.. saran saya (ganti div menjadi span agar tidak error HTML 5), Hasilnya kira-kira seperti ini 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>

Oke... Selamat Mencoba dan Good Luck! :D