Cara Membuat Chatbox Dari SmartChatbox di Blog

Perkembangan dunia IT khususnya di Sosial media sekarang ini semakin pesat, ada banyak aplikasi yang bermunculan salh satunya adalah media Chatbox, dulu saat Yahoo masih berjaya ada aplikasi sosial media namanya Yahoo Messenger kemudian disusul dengan munculnya camfrog, facebook dan sebagainya. Aplikasi sosial media ini saling bersaing dan memberikan pelayanan chating yang Gratis.

Kemudian tidak mau kalah Google pun meluncurkan aplikasi sejenis dan aplikasi Google+ dan Google Hangout yang sampai dengan saat ini aplikasi tersebut masih bertahan dan terus berkembang. Membahas Aplikasi sosial media Chatbox di postingan kali ini akan dibahas Cara Membuat Chatbox Dari SmartChatbox di Blog yang akan terpasang di Blog kita gunanya untuk menambah layanan dan chat kepada pengunjung setia blog yang nantinya bisa saling bertukar informasi dan saling berinteraksi kepada admin blog dan juga pengunjung lainnya, tentu hal ini sangat menarik bukan, penasaran bagaimana Cara Membuat Chatbox Dari SmartChatbox di Blog, yuk mari kita simak bersama.

Aplikasi Chatbox dari SmartBox ini menurut saya sangat bagus karena kita bisa mengganti background sesuai selera mata, kemudian disediakan juga Gravatar dan masih banyak settingan yang bisa di custom dan bahkan nih jika sobat langganan yang Premium bisa menggunakan sambungan SSL. Untuk Sobat yang tertarik untuk memasangnya di blog agar loadingnya tidak berat dan lama bisa kita akali dengan mengekstrak js-nya agar tidak menyebabkan blocking render js kemudian bisa dipasang dengan inline js. 

Di Aplikasi Chatbox dari SmartBox ini ditampilakan secara show hide kemudian ditambahkan efek animasi dan jangan kaget kalau kode CSS-nya agak banyak dipasang, kemudian Button-nya pun saya tampilkan melayang tepat di sebelah kiri dibawah blog tapi sesuai selera sobat mau dipindahkan diatas pun juga boleh lebih jelasnya bisa dilihat demo iframe dibawah ini.




Nah bagaimana sobat penasaran dan ingin mencobanya, mari kita simak berikut ini.

Langkah Pertama
Sobat masuk ke http://www.smartchatbox.com kemudian klik tombol Create SmartChatbox lalu silahkan buat chatbox nantinya untuk dipasang di blog, setelah itu cari kodenya lebih jelasnya seperti ini.

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

Setelah ketemu silahkan sobat salin kode diatas yang ditandai yaitu kode url js kemudian paste ke browser sobat setelah tampil sobat salin semua kode yang tampil di halaman tersebut ke notepad terlebih dahulu, biasanya seperti tampilan dibawah ini

Setelah disalin ke notepad perhatikan kode dibawah ini salin dan simpan kode ini tepat diatas kode </body> di edit HTML.

<div class='chatbox' id='chatbox'>
<script>
//<![CDATA[
KODE 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>

Perhatikan kode yang ditandai KODE SMARTCHATBOX silahkan sobat isi dengan kode Hasil Ekstrak dari Smartchatbox yang sudah sebelumnya di salin di notepad yang nantinya akan seperti 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://www.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://www.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>

Langkah Ke Dua
Langkah selanjutnya sobat salin kode CSS dibawah ini lalu tempel tepat diatas </head> pada Edit HTML

<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>

Setelah itu silahkan simpan Edit HTML-nya lalu refresh blog sobat dan Selesai...SmartChatbox akan tampail di pojok bawah sebelah kiri di blog sobat, nah itu jika ingin ditempatkan di bawah namun bagaimana jika sobat ingin tempatkan chat button smartchatbox di menu, perhatikan kode dibawah ini dan ikuti langkah-langkahnya dengan merubah di kode CSS-nya

#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)}

Perhatikan kode yang ditandai position:fixed rubah jadi position:relative kemudian sobat hapus kode bottom:30px;left:30px; setelah itu pindahkan atau CUT kode <div class="animated-chat tada" id="chat" onclick="loadChatbox()">chat</div> yang diambil dari kode pada langkah pertama diatas kemudian simpan di kode html menu blog sobat perhatikan silahkan ganti div rubah ke span tujuannya agar tidak terjadi error HTML5, gambarannya seperti dibawah ini

<div class="menu">
<ul>
<li>bla bla</li>
<li>bla bla</li>
<li>bla bla</li>
<li><span id="chat" class="animated-chat tada" onclick="loadChatbox()">Chat</span></li>
</ul>
</div>

Dan Selesai...bagaimana sobat penasaran ingin mencobanya, perhatikan baik-baik penempatan kodenya, ada baiknya sobat backup terlebih dahulu templatenya jika terjadi error bisa dikembalikan seperti semula, selamat mencoba.