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 ) , fiboxshoutchamp 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

8 komentar:

  1. Benyamin S. :

    " JANGAN DIBAJAK, TUHAN NGELIAT "

    (h) b-( [-( (f)

    Berkunjung Titik titik sama dengan minta kunjungan balik azhariian.blogspot.com

    ReplyDelete
    Replies
    1. :-t join balik yah azhariian.blogspot.com

      Delete
    2. sip, udah bro, makasih atas kunjungannya ya :-)

      Delete
  2. Makasih tutornya Boss... Salam blogger... :-# (h)

    ReplyDelete
    Replies
    1. sip, sama sama ya, kalo ada kesulitan atau ada error post disini aja ya (o)

      Delete
  3. ane dah jadi followers agan..klo agan berkenan tolong folbeck ya.. :)) :>)

    http://blogeaphiep.blogspot.com/

    ReplyDelete
    Replies
    1. oke gan, siap, makasih buat follownya ya
      :)

      Delete
  4. ga bisa kenapa yah pas script nya diganti malah eror

    ReplyDelete

Post komentarnya yang baik dan sopan. serta jangan SPAM/SARA/Flamming yaa :D

Terima Kasih atas perhatiannya.

 
Top