Membuat Chat Box Auto Hide di Blog

Membuat Chat Box Auto Hide di Blog - Kali ini saya akan share Tutorial Membuat Chat Box Auto Hide di Blog yang telah saya pakai di sisi kanan blog ini

Auto hide Shoutbox adalah efek yang akan membuat Chat Box muncul tanpa di klik dan tersembunyi tanpa di klik pula ( di lewati pointer mouse ), hanya beda sedikit dengan buku tamu show / hide. Anda yang tertarik memasang widget ini, silahkan masukkan kode berikut diHTML/Javascript blog Anda.



Berikut ini adalah tutorial Membuat Chat Box Auto Hide di Blog.

Masukkan script codingan ini ke dalam tab HTML/Javascript.

<style type="text/css">#gb{position:fixed;top:20px;z-index:+1000;}* html #gb{position:relative;}
.gbtab{height:150px;width:50px;float:left;background:url('http://i1108.photobucket.com/albums/h405/christian410/ghtrf.png') no-repeat;}
.gbcontent {float:left;border:1px solid #000000;-moz-border-radius-bottomleft:5px;-webkit-border-radius-bottomleft:5px;-o-border-radius-bottomleft:5px;-khtml-border-radius-bottomleft:5px;-moz-border-radius-topright: 5px;-moz-border-radius-topleft: 5px;background: #F2F2F2; url() no-repeat bottom;padding:10px;}
</style>
<script type="text/javascript">function showHideGB(){var gb = document.getElementById("gb");var w = gb.offsetWidth;gb.opened ? moveGB(0, 51-w) : moveGB(30-w, 0);gb.opened = !gb.opened;}function moveGB(x0, xf){
var gb = document.getElementById("gb");var dx = Math.abs(x0-xf) > 25 ? 25 : 1;var dir = xf>x0 ? 1 : -1;var x = x0 + dx * dir;gb.style.right = x.toString() + "px";if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 5);}}</script>
<div id="gb"><div class="gbtab" onmouseover="showHideGB()"> </div>
<div class="gbcontent"><center>
<script id="sid0010000021393775937">(function() {function async_load(){s.id="cid0010000021393775937";s.src='http://st.chatango.com/js/gz/emb.js';s.style.cssText="width:250px;height:360px;";s.async=true;s.text='{"handle":"haikalshiddiq","styles":{"b":60,"f":50,"l":"999999","q":"999999","r":100,"s":1}}';var ss = document.getElementsByTagName('script');for (var i=0, l=ss.length; i < l; i++){if (ss[i].id=='sid0010000021393775937'){ss[i].id +='_';ss[i].parentNode.insertBefore(s, ss[i]);break;}}}var s=document.createElement('script');if (s.async==undefined){if (window.addEventListener) {addEventListener('load',async_load,false);}else if (window.attachEvent) {attachEvent('onload',async_load);}}else {async_load();}})();</script>
<br /><div style="text-align:center"><span style="float:right; color:#000000;">Get this <a target="_blank" href="http://haikalshiddiq.blogspot.com/2013/03/membuat-chat-box-auto-hide-di-blog.html"> widget! </a></span></div></center></div><script type="text/javascript">var gb = document.getElementById("gb");gb.style.right = (50-gb.offsetWidth).toString() + "px";</script>
</div>

Nah Caranya :

1. Klik rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript
2. Masukkan kodenya di kotak yang di sediakan.
3. Klik Save 

Tambahan :
Ganti kode yang berwara merah tersebut dengan Chat Box tamu milik Anda. Anda yang belum punya buku tamu silahkan buat terlebih dahulu di Website Chatango ( seperti blog ini ) , fibox, shoutchamp atau pada penyedia chatbox gratisan lainnya.

Demikian tutorial Membuat Chat Box Auto Hide di Blog saya buat.

Semoga Bermanfaat yah artikel yang saya share pada kesempatan kali ini

:D

-----

Sumber : http://christiantatelu.blogspot.com/2012/03/cara-membuat-buku-tamu-auto-hide-di.html dengan berbagai perubahan..