Buat Buku Tamu Blog Tersembunyi di Layar Jendela

Kali ini JombloPost bakal kasih tutorial bagaimana cara membuat Buku Tamu seperti yang ada di blog ini, bagaimana agar cara membuat Buku Tamu tersembunyi dan setelah di klik bakal keluar. manfaat dibuatnya tampilan buku tamu seperti ini agar lebih irit tempat di tampilan blog kalian, selain itu juga lebih minimalis.

Langsung saja, disini buku tamu yang saya gunakan melalui cbox.ws . jika kalian belum mempunyai buku tamu tersebut silahkan daftarkan akun anda di http://cbox.ws setelah mendaftar kalian harus mengkonfirmasi melalui email dan silahkan buka email kalian kemudian ikuti tautan yang diberikan admin cbox.ws
Langkah-langkah setelah anda mendaftar cbox.ws ikuti langkah berikut ini :

Pertama
masukan nama pengguna dan pasword kalian.

Kedua
setelah berhasil masuk, aturlah rancangan design cbox seperti yang anda inginkan, namun jika tidak ingin dirubah silahkan langsung saja klik Publish, dan lihat di bagian bawah tertuliskan 'Copy to Clipboard!'. kodenya contohnya seperti ini

<!-- 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=778666&amp;boxtag=dwwl95&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain7-778666" style="border:#ababab 1px solid;" id="cboxmain7-778666"></iframe></div>
<div><iframe frameborder="0" width="200" height="75" src="http://www7.cbox.ws/box/?boxid=778666&amp;boxtag=dwwl95&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform7-778666" style="border:#ababab 1px solid;border-top:0px" id="cboxform7-778666"></iframe></div>
</div>
<!-- END CBOX -->

Ketiga
setelah kalian mengcopy code yang serupa seperti diatas (ingat, jangan copy paste kode yang ini, silahkan punyai akun cbox sendiri) kalian masuk pada akun blogger kalian.

Keempat
setelah masuk, langsung saja ke tata letak dan tambahkan widget (terserah dimana letaknya) pilih yang tambahkan HTML/javascript dan pastekan kode cbox anda.

Kelima
setelah anda mempaste kode tersebut, tambahkan kode :

<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://lh4.ggpht.com/_jn57XA2jLxY/SmCHl1YEsxI/AAAAAAAAAXQ/HshHClEVcvY/tabs.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">

kode tersebut raruh diatas  <!-- BEGIN CBOX - www.cbox.ws - v001 -->

Keenam
ini langkah terakhir, copy kode ini : 

<a href="http://jomblopost.blogspot.com">
[Blogspot]
</a>|<a href="javascript:showHideGB()">
[tutup]
</a>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div>

taruh kode diatas diakhir kode, atau bawah kode <!-- END CBOX -->


semoga berhasil dan bermanfaat, selamat mencoba.