Membuat Widget Atau Buku Tamu di Pojok Dengan System Buka Tutup

Mungkin pada halaman blog kamu sudah penuh dengan dengan widget dan kamu ingin memasang widget dengan system buka tutup di bagian atas, dan kamu bertanya bagaimana caranya. nah langsung saja berikut adalah caranya :

Copy Dan Pastekan Kode Dibawah ini ke blog kamu dengan menambah widget html dan save

<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 merah dengan link gambar
ganti teks warna hijau dengan kode widget kamu


sekian dari kami semoga bermanfaat
Tags:
أحدث أقدم