Monday, April 16, 2012

Cara Memasang Widget Auto Hide Cbox

Cara Memasang Widget Auto Hide Cbox - Postingan kali ini salemharp blog akan berbagi tips tentang cara memasang widget cbox dengan "behavior" (tingkah laku) auto hide yang ada seperti di blog saya sekarang.
Jika sobat belum tahu fungsi dari layanan cbox ini saya kasih tahu deh, hehehe
cbox merupakan layanan jasa chatting, tapi jika kamu belum mempunya script dari cbox maka kamu harus daftar dulu di situs resmi nya silahkan cek di http://www.cbox.ws/


Ok, Langsung aja kita coba praktekan.
1. Login dulu di blogger sobat,, (hehehe ya iyalah masa login ke facebook)
2. pilih rancangan -> tambah gadget
3. pilih yang html/java script
4. pastekan kode dibawah ini

<style type="text/css">
#gb{
position:fixed;
top:40px;
z-index:+1000;
}* html #gb{position:relative;}
.gbtab{
height:150px;
width:50px;
float:left;
background:url('http://img22.imageshack.us/img22/8941/tabs2.gif') no-repeat;
}

.gbcontent {
float:left;
border:1px solid #BB0000;
-moz-border-radius-bottomleft:10px;
-webkit-border-radius-bottomleft:10px;
-o-border-radius-bottomleft:10px;
-khtml-border-radius-bottomleft:10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-topleft: 10px;
background: #000000 url(http://1.bp.blogspot.com/_O84nraTVNhw/TVAOSS5OUpI/AAAAAAAAAPs/SjzZrVNr21w/s1600/api.gif) 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>
 Pastekan kode cbox kamu disini
<br />
<div style="text-align:center">
<a onclick="showHideGB()" class="tips-fade" title="klik untuk tutup chattingbox">
<center><hr /><img src="http://i1042.photobucket.com/albums/b429/Farix_2010/CloseComment-1.png" /><hr /></center>
</a>
</div>
</center></div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (50-gb.offsetWidth).toString() + "px";
</script></div>
5. Simpan dan lihat hasilnya

Selamat Mencoba.. :)

7 komentar:

  1. banner sdh saya pasang blik sob, thanks ea XD

    ReplyDelete
  2. Blogwalking Sob, saya dari Semar Bingung's Weblog. Salam kenal, salam persahabatan, dan bila berkenan silakan berkunjung ke blog saya. Thank.

    ReplyDelete
  3. posting interesting and easy to digest ... regards blogwalking friend :)

    ReplyDelete

Jika kamu ingin berkomentar di blog ini, dimohon untuk tidak berkata kasar, porno maupun sara.
Salemharp akan senang jika kamu menghargai setiap postingan dengan berkomentar di bawah ini..

Follow Salemharp Blog

 
Copyright © . Salemharp Blog - Posts · Comments
Developer By Roni Semendawai || Powered by Blogger