buku tamu melayang


Membuat buku tamu melayang/sembunyi disisi kanan blog dan bisa dibuka tutup berguna untuk menghemat ruang sidebar blog. Ruang yang sebelumnya terpakai buku tamu cbox
mungkin bisa digunakan untuk pasang histats, pasang Facebook fanpage, atau lainnya.
<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/-mrsZX_-WDkk/Te5tiGXpqNI/AAAAAAAAAZg/hDLjMWDN6_U/s1600/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">
<!-- 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=677567&amp;boxtag=cp4twg&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain7-677567" style="border:#ababab 1px solid;" id="cboxmain7-677567"></iframe></div>
<div><iframe frameborder="0" width="200" height="75" src="http://www7.cbox.ws/box/?boxid=677567&amp;boxtag=cp4twg&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform7-677567" style="border:#ababab 1px solid;border-top:0px" id="cboxform7-677567"></iframe></div>
</div>
<!-- END CBOX -->

<div style="text-align:right">
<a href="http://toufikhidayat.blogspot.com/2012/05/cara-membuat-buku-tamu-tersembunyi-pada.html">[Pasang Ini Juga]</a>><a href="javascript:showHideGB()">
[Tutup]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>



tempatkan kode HTML cbox tulisan berwarna MERAH.
Demikian tadi tutorial cara membuat buku tamu melayang/sembunyi, semoga bermanfaat dan menjadikan blog lebih indah dan atraktif dengan adanya buku tamu melayang tersebut.
sumber  : http://kangasepsule.blogspot.ca

Tidak ada komentar:

Poskan Komentar