Cara Membuat Chat Box Auto Hide Pada Blog

Sobat blogger, sekarang saya akan berbagi mengenai Cara Membuat Chat Box Auto Hide Pada blog. Yang mana chat box ini akan dibuat dengan efex auto hide di samping blog saat kursor mouse mengenai chat box sobat.

Kegunaan dari efek chat box auto hide ini adalah untuk meminimalkan / mengefisienkan halaman blog sobat agar terlihat lebih dinamis dan tidak terlalu panjang kebawah.

Jika sobat berminat pada efek auto hide chat box ini silahkan sobat ikuti langkah-langkah dibawah ini :

• Login ke akun blog sobat masing-masing.
• Pilih Tata Letak =>> Add Gedget/Tambah Gedget =>> Pilih HTML/Javascript.
• Kemudian Copy kode dibawah ini :

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

<!-- BEGIN CBOX - www.cbox.ws - v001 -->

<div id="cboxdiv" style="text-align: center; line-height: 0">

<div><iframe frameborder="0" width="200" height="305" src="http://www7.cbox.ws/box/?boxid=799750&amp;boxtag=g5nje&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain7-799750" style="border:#ababab 1px solid;" id="cboxmain7-799750"></iframe></div>

<div><iframe frameborder="0" width="200" height="75" src="http://www7.cbox.ws/box/?boxid=799750&amp;boxtag=g5nje&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform7-799750" style="border:#ababab 1px solid;border-top:0px" id="cboxform7-799750"></iframe></div>

</div>

<!-- END CBOX -->

<br />

<div style="text-align:center">

<span style="float:right; color:#000000;"><a href="http://mari-berbagi244.blogspot.com/2013/04/cara-membuat-chat-box-auto-hide-pada.html" 

target="_blank">.: Get this 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>

• Ganti Kode yang berwarna Biru dengan Script kode Chat Box sobat.
• Terakhir sobat klik Simpan. Kemudian liat hasilnya.

Demikian artikel mengenai Cara Membuat Chat Box Auto Hide Pada Blog. Semoga artikel yang saya buat ini dapat berguna dan bermanfaat bagi sobat yang membutuhkan.




Sumber: http://mari-berbagi244.blogspot.com/2013/04/cara-membuat-chat-box-auto-hide-pada.html