Membuat ChatBox di Blogger

Imajinasi Asha

Halo, perrkenalkan aku Faycha Anastasya. Mau lebih tau tentangku? klik menu about.

Berbagi kebaikan walau hanya sebuah tulisan, mudah-mudahan menjadi ladang amal yang terus didapatkan.

Soundcloud

Ini artikel kedua pada hari ini, ide menulis ini muncul karena ada yang "mupeng" sama chatbox yang ada di blog saya ini (haha). ChatBox ini sebenarnya punya mas Umar Azmar (www.umarazmar.com), saya cari di artikelnya tidak ada cara untuk memasang ChatBox tersebut jadinya saya ambil sendiri dari blognya (maaf mas umar :D). Oke, tidak usah berlama-lama ya (padahal ngetik panjang biar minimal karakter 100 huahua) ikuti caranya dibawah ini.

CARA MEMASANG CHATBOX

Buka blogger masing-masing.
Cari menu Template lalu edit HTML.
Tekan CTRL+F dan cari kode /b:skin

Jika sudah ketemu copy and paste script dibawah ini tepat diatas /b:skin

/* ChatBox imajinasiasha.blogspot.co.id */
.chatbox{transition:all .4s ease-in-out}
#close-chat,.minim-button,.maxi-button,.chat-text{font-weight:700;cursor:pointer;text-align:center;height:20px;line-height:20px}
#close-chat,.chatbox{border:1px solid #A8A8A8}
.chatbox{position:fixed;background:white url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir2m02vAYeqSV5bhY_SR4U9vVGjvjg88uyxsv4I2QC-w5RqpRoDsFYymSKDnqEprABHkSTiTJMPbhCNOyezpwtBeEn1nXXtHiF5-KdzHdTsl526f-N5KnhNEQn9NIxGQ1QUgxsgnLTvw2t/s1600-r/loading.gif") no-repeat 50% 40%;max-width:212px;bottom:0;right:35px;margin:0 0 -370px;border-bottom:none;border-top-right-radius:5px;border-top-left-radius:5px;padding:28px 10px 10px;z-index:96}
#close-chat{position:absolute;top:2px;right:2px;font-size:24px;border:1px solid #dedede;border-radius:5px;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,.maxi-button{position:absolute;top:2px;right:26px;font-size:24px;border:1px solid #dedede;border-radius:3px;width:20px;background:#fefefe}

.chat-text{position:absolute;top:5px;left:10px;font-size:16px;color:#444}
.chat-text span.fa{color:green;font-size:10px!important;line-height:14px;vertical-align:middle;padding-right:5px}
.chat-text .kounter{font-size:14px!important}
.chat-text .kounter:before{content:"(";margin-left:5px;padding-right:1px}
.chat-text .kounter:after{content:")";margin-left:-3px;}
a.on-stats{position:relative!important;z-index:1;top:0;padding:0 0 0 5px;font-size:12px!important;background:white;display:inline-block!important;width:120px}
a.on-stats:before{font-family:FontAwesome;font-size:inherit;content:'\f007';padding-right:5px}

Kemudian cari kode /body dan copy and paste script dibawah ini tepat diatas kode /body

<div class='chatbox' id='chatbox'>
<span class='chat-text'><span class='fa fa-circle'/>Chat Yuk! <span class='kounter'><script src='http://widget.supercounters.com/online_t.js' type='text/javascript'/><script type='text/javascript'>sc_online_t(1194658,&quot;&quot;,&quot;170ddb&quot;);</script></span></span>

<!-- Javascript imajinasiasha.blogspot.co.id -->
<script>
//<![CDATA[
document.write('<div id="chatboxfull" style="width:268px;height:360px;overflow:hidden;margin:auto;padding:0;border:0;">');
document.write('<!--<div style="font-size:0px;position:absolute;left:5px;right:5px;top:30px;bottom:0;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;"><iframe allowtransparency="yes" frameborder="0" width="100%" height="280px" style="position:absolute;top:0;left:0;right:0;bottom:0;" src="//www4.cbox.ws/box/?boxid=4297024&amp;boxtag=l3baj5&amp;sec=main" marginheight="0" marginwidth="0" scrolling="auto" name="cboxmain"></iframe></div>');
document.write('<div style="font-size:0px;position:absolute;left:5px;right:5px;height:70px;overflow:hidden;bottom:10px;"><iframe allowtransparency="yes" frameborder="0" width="100%" height="100%" src="//www4.cbox.ws/box/?boxid=4297024&boxtag=l3baj5&sec=form" marginheight="0" marginwidth="0" scrolling="no" name="cboxform"></iframe></div>--></div>');
//]]>
</script>
<!-- Tutup Javascript imajinasiasha.blogspot.co.id -->

<div id='close-chat' onclick='closeChatbox()'>&#215;</div>
<div id='minim-chat' onclick='minimChatbox()'><span class='minim-button'>-</span></div>
<div id='maxi-chat' onclick='loadChatbox()'><span class='maxi-button'>+</span></div>
</div>

Penjelasan yang di mark biru

★ 1194658 diganti dengan counter blog kalian sendiri (widget.supercounters.com).
★ //www4.cbox.ws/box/?boxid=4297024&boxtag=l3baj5&sec=main diganti dengan link cbox kalian sendiri (www.cbox.ws).
★ //www4.cbox.ws/box/?boxid=4297024&boxtag=l3baj5&sec=form diganti dengan link cbox kalian sendiri (www.cbox.ws).

Terakhir tambahkan script Javascript dibawah ini tepat diatas kode /body

<script type='text/javascript'>//<![CDATA[
if (typeof(jQuery) == 'undefined') {document.write("<scr" + "ipt type=\"text/javascript\"src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js\"></scr" + "ipt>");};

function downloadJSAtOnload3(){var e=document.createElement("script");e.src="//59b0bb16ca9de0c2af83aecd56d7483a85ecef84.googledrive.com/host/0B206UBLwCMmoTVAtRGFmQW0tZlU/allpages.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload3,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload3):window.onload=downloadJSAtOnload3;
//]]></script>