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 :
- Klik rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript
- Masukkan kodenya di kotak yang di sediakan.
- Klik Save
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..
8 Comments
Benyamin S. :
ReplyDelete" JANGAN DIBAJAK, TUHAN NGELIAT "
(h) b-( [-( (f)
Berkunjung Titik titik sama dengan minta kunjungan balik azhariian.blogspot.com
:-t join balik yah azhariian.blogspot.com
Deletesip, udah bro, makasih atas kunjungannya ya :-)
DeleteMakasih tutornya Boss... Salam blogger... :-# (h)
ReplyDeletesip, sama sama ya, kalo ada kesulitan atau ada error post disini aja ya (o)
Deleteane dah jadi followers agan..klo agan berkenan tolong folbeck ya.. :)) :>)
ReplyDeletehttp://blogeaphiep.blogspot.com/
oke gan, siap, makasih buat follownya ya
Delete:)
ga bisa kenapa yah pas script nya diganti malah eror
ReplyDeletePlease keep in mind that post it must kind and polite comments.
Thank you for your attention.