»

Cara Membuat Buku Tamu Auto Hide di Blog

buku tamu cbox
       Menurut saya "Buku Tamu" adalah salah satu widget blog yang memungkinkan Sahabat berkomunikasi dengan para tamu di blog Sahabat. Yah, Kurang lebih seperti itulah pengertian "Buku Tamu". Gambar yang sebelah kiri ini contoh hasilnya. 
        Sedangkan Auto hide Shuotbox adalah efek yang akan membuat buku tamu muncul tanpa di klik dan tersembunyi tanpa di klik pula melainkan hanya dengan mengarahkan pointer mouse Sahabat ke buku tamu tersebut.
       
Sahabat yang pengen memasang widget ini, silahkan masukkan kode berikut di HTML/Javascript blog milik Sahabat. Iya dong!!, kalau milik orang lain, punya orang lain dong yang bagus.
hahaha.. 

<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://i1108.photobucket.com/albums/h405/christian410/ghtrf.png') no-repeat;
}

.gbcontent {
float:left;
border:1px solid #000000;
-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 - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="300" height="275" src="http://www4.cbox.ws/box/?boxid=4100717&amp;boxtag=ebc39c&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain4-4100717" style="border:#FFFFFF 1px solid;" id="cboxmain4-4100717"></iframe></div>
<div><iframe frameborder="0" width="300" height="75" src="http://www4.cbox.ws/box/?boxid=4100717&amp;boxtag=ebc39c&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform4-4100717" style="border:#FFFFFF 1px solid;border-top:0px" id="cboxform4-4100717"></iframe></div>
</div>
<!-- END CBOX -->
<br />
<div style="text-align:center">
<span style="float:right; color:#000000;">Get this <a target="_blank" href="http://christiantatelu.blogspot.com/2012/03/cara-membuat-buku-tamu-auto-hide-di.html"> widget! </a></span>
</div>
</center></div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (50-gb.offsetWidth).toString() + "px";
</script>

</div>
 

Caranya :
  1. Klik tata letak > Tambah gadget > HTML/Javascript
  2. Masukkan kodenya di kotak yang di sediakan.
  3. Klik Save
      Ganti kode yang berwara biru dengan kode buku tamu milik Sahabat. Bagi Sahabat yang belum punya buku tamu silahkan buat dulu di fibox, shoutchamp atau pada penyedia chatbox gratis lainnya.
 
Catatan untuk Sahabat:
"Sahabat. Kalau tulisan ini bagus, kasih tau ke Sahabat blogger lainnya ya, kalau buruk, kasih tau ke Saya!"  
"Terima Kasih"

Postingan terkait:

— — Add Comment —

Belum ada tanggapan untuk "Cara Membuat Buku Tamu Auto Hide di Blog"

Post a Comment

Subscribe to: Post Comments (Atom)