Cara Membuat Buku Tamu Auto Hide di Blogspot

Auto hide Shuotbox adalah efek yang akan membuat buku tamu muncul tanpa di klik dan tersembunyi tanpa di klik pula ( di lewati pointer mouse/lewatan pertama muncul lewat lagi nutup ). Ini akan membuat mudah sobat dalam menaruh buku tamu dan ringkas tidak muncul pada urutan di sidebar namun berada disamping blogspot.

Kok lupa…. Ada tambahan lagi,, sobat yang belum mempunyai buku tamu bisa langsung daftar link cbox atau penyedia buku tamu seperti kang zain gunakan. Sobat bisa daftar DI SINI dijamin langsung jadi dan ikuti petunjuknya langkah awal sobat klik sign up setelah masuk isi daftarnya dan setelah selesai langsung log in. setelah itu sobat bisa pilih tampilannya. klo dah dipilih ambil codenya dan ikuti tutorialnya dibawah ini: 

• Seperti biasa sobat mesti login dulu ke blog sobat
• Silahkan klik Rancangan
• Klik elemen laman
• Klik tambah gadget/add gadget
• Klik opsi HTML/Javascript
• Silahkan sobat Copy dan Paste Kode HTML di bawah ini dan jangan lupa di 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://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="200" height="305" src="http://www7.cbox.ws/box/?boxid=688387&amp;boxtag=crh1t1&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain7-688387" style="border:#ababab 1px solid;" id="cboxmain7-688387"></iframe></div>

<div><iframe frameborder="0" width="200" height="75" src="http://www7.cbox.ws/box/?boxid=688387&amp;boxtag=crh1t1&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform7-688387" style="border:#ababab 1px solid;border-top:0px" id="cboxform7-688387"></iframe></div>

</div>

<!-- END CBOX -->

<br />

<div style="text-align:center">

<span style="float:right; color:#000000;">Get this <a target="_blank" href="http://softwaremaniapc.blogspot.com/2012/12/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>

Catatan Penting :

Untuk kode yang berwarna merah sobat ganti dengan kode buku tamu milik sobat. Seperti dalam blog ini menggunakan cbox yang sudah kang zain terangkan diatas.

Sampai disini tutorial Modifikasi Blog dengan judul Cara Membuat Buku Tamu Auto Hide di Blogspot dan tunggu tutorial berikutnya. hehe