Sebelumnya aq udah buat tutorial cara membuat cbox, klo yang belum tau caranya klik aja disini, dan untuk kali ini aq mu share bagaimana caranya membuat cbox keren melayang di sebelah kanan blog, buat aq sih ni lumayan untuk mempercepat loading blog, berikut caranya.
Silahkan siapkan kode cbox anda yang telah anda buat
Login dulu ke akun blogger kamu, klik rancangan dan tambah gatget HTML/Javascript , dan copas kode script dibawah ini
<style type="text/css">
#gb{
position:fixed;
top:20px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:90px;
width:29px;
float:left;
cursor:pointer;
background:url('http://i997.photobucket.com/albums/af96/fauzan_zifa/Untitled-1-11.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #000000;
background:#FFFFF;
padding:2px;
}
</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">
<!-- BEGIN CBOX - www.cbox.ws - v001 -->
Copas kode cbox yang telah kamu buat disini
<!-- END CBOX -->
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>
Kemudian copas kode anda di tulisan yang berwarna biru pada kode script diatas, hasilnya kira-kira seperti ini
<style type="text/css">
#gb{
position:fixed;
top:20px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:90px;
width:29px;
float:left;
cursor:pointer;
background:url('http://i997.photobucket.com/albums/af96/fauzan_zifa/Untitled-1-11.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #000000;
background:#FFFFF;
padding:2px;
}
</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">
<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="200" height="230" src="http://www7.cbox.ws/box/?boxid=41535&boxtag=6v8whj&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain7-415435" style="border:#000000 1px solid;" id="cboxmain7-415435"></iframe></div>
<div><iframe frameborder="0" width="200" height="70" src="http://www7.cbox.ws/box/?boxid=415435&boxtag=6v8whj&sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform7-415435" style="border:#000000 1px solid;border-top:0px" id="cboxform7-415435"></iframe></div>
</div>
<!-- END CBOX -->
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>
Tulisan yang warna merah itu gambar tombol popup cboxnya, silahkan anda edit sesuai yang anda inginkan. seperti apa hasilnya..? ni dibawah
 |
| Cbox ketika tertutup |
 |
| Cbox ketika terbuka |
