Saturday 20 April 2013

Cara membuat AUTO HIDE CBOX

Setelah saya posting tentang CARA MEMBUAT CBOX / CHATBOX, sekarang saya mau posting tentang cbox yang bisa membuka dan menutup sendiri,atau di sebut juga auto hide.

Ini sangat bermanfaat sekali untuk yang punya blog yang tempat untuk menyimpan widgetnya sudah penuh.

Caranya :

  1. Masuk ke blog anda.
  2. Masuk ke tata letak / layout lalu klik add gadget,dan pilih tambahkan HTML / javascript.
  3. Lalu copykan HTML dibawah ini:

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://2.bp.blogspot.com/-lNt98-CvXao/UTP_btUtapI/AAAAAAAAA64/usIno32mZ9M/s1600/finger21.blogspot.com+bukutamu.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 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+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
LETAKAN KODE / HTML CBOX ANDA DISINI
<div style="text-align: center;"><span style="font-size: 10px;"><span style="font-family: &quot;Trebuchet MS&quot;,sans-serif;">Supported by <a href=" http://finger21.blogspot.com/2013/04/cara-membuat-cbox-chatbox.html " target="_blank">Suka-suka Blog</a></span></span></div><div style="text-align:right"><a href="javascript:showHideGB()">
[tutup]
</a>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div>

Lalu save dan selesai.

2 comments:

  1. ok mksih..
    tlah sya coba dan berhasil..
    visit pandak-software.blogspot.com

    ReplyDelete
  2. cara memasang di wordpress gimana gan??

    ReplyDelete