Cara Membuat Buku Tamu Open Close

Cara Membuat Buku Tamu Open Close

Chatbox atau buku tamu saat ini sering digunakan oleh beberapa blogger untuk mempermudah pembaca berinteraksi dengan admin atau sekedar meninggalakan jejak.
Dan beberapa diantara blogger, memasang chatboxnya di samping dengan mode buka tutup, supaya blognya tidak terlihat sesak namun tetap tampil profesional.

Dan pada postingan ini saya akan membahas Cara Membuat Buku Tamu Buka Tutup Di Blog. Langsung saja lihat langkah-langkah nya di bawah ini.

Berikut langkah-langkahnya :
* Login ke Blogger
* lalu pilih Tata letak
* Klik Tambah Gadget/Widget dan Copy dan paste kode HTML berikut pada box konten :

<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('https://sites.google.com/site/ojel88/_/rsrc/1281597152186/home/tabs2.gif') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #000000;
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 HTML Buku Tamu Sobat

<br/>
Mau punya buku tamu seperti ini?<br/>
Klik
<a href="http://fauzischolovers.blogspot.com/2013/06/cara-membuat-buku-tamu-buka-tutup-di.html">
disini
</a>

<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>

</div>

</div>

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

Catatan : Pada Teks berwarna merah "Kode HTML Buku Tamu Sobat" , ganti dengan kode HTML cbox sobat.setelah selesai klik simpan.

Selamat mencoba.

NB: Jika belum punya akun Cbox/Buku Tamu Silahkan Lihat Disini

Share :