Cara Membuat Chat Box Auto Hide Pada Blog

  sumber:http://mari-berbagi244.blogspot.com

 

 

Cara Membuat Chat Box Auto Hide Pada Blog - Sobat blogger, setelah tadi saya share artikel mengenai Cara Membuat Chat Box di Blog, sekarang saya akan buat artikel mengenai Cara Membuat Chat Box Auto Hide Pada blog. Berbeda dengan artikel sebelumnya, dimana chat box ditampilkan pada widget slidebar, kali ini chat box 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. Jika ada kesulitan atau sobat mengalami error dalam pembuatan atau masih ada yang kurang jelas silahkan berkomentar di kolom komentar dan ChatBox. Salam Blogger.

Related Posts:

Tweet