Membuat Buku Tamu atau widget Show Hidden di Pojok Blog

widget ini akan berada di pojok blog dengan tombol show hidden (jika di sorot oleh kurusor maka widgetnya akan tampil)

bagi kamu yang ingin mencobanya ikuti langkah berikut

copy kode berikut dan pastekan di blog kamu


<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://i736.photobucket.com/albums/xx6/keymastersolution/Buku%20Tamu_zpsbiwccizh.jpg') no-repeat;}
.gbcontent {float:left;border:1px solid #ccc;
-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 - v4.3 -->

<br />
<div id="cboxdiv" style="font-size: 0; line-height: 0; margin: 0 auto; position: relative; width: 300px;">
<div style="-webkit-overflow-scrolling: touch; border: 0px solid; height: 272px; overflow-y: auto; overflow: auto; position: relative;">
<iframe allowtransparency="yes" frameborder="0" height="100%" id="cboxmain3-3484595" marginheight="0" marginwidth="0" name="cboxmain3-3484595" scrolling="auto" src="http://www3.cbox.ws/box/?boxid=3484595&amp;boxtag=729wsw&amp;sec=main" width="100%"></iframe></div>
<div style="border-top: 0px; border: 0px solid; height: 108px; overflow: hidden; position: relative;">
<iframe allowtransparency="yes" frameborder="0" height="100%" id="cboxform3-3484595" marginheight="0" marginwidth="0" name="cboxform3-3484595" scrolling="no" src="http://www3.cbox.ws/box/?boxid=3484595&amp;boxtag=729wsw&amp;sec=form" width="100%"></iframe></div>
</div>
<!-- END CBOX -->


</center>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (50-gb.offsetWidth).toString() + "px";
</script>

</div></div>




Catatan :
Ganti teks warna hijau dengan link gambar
ganti teks warna merah dengan kode widget kamu

sekian dari kami semoga bermanfaat
Previous Post Next Post