Membuat Show Hide Chatbox Dari SmartChatbox

Membuat Show Hide Chatbox Dari SmartChatbox

Bola Hero Gawai

Membuat Show Hide Chatbox Dari SmartChatbox

Membuat Show Hide Chatbox Dari SmartChatbox
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.

Chatbox Dari SmartChatbox
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....

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!

×
×
×