cara membuat chat box tersembunyi/buka tutup

Membuat buku tamu melayang/sembunyi disisi kanan blog dan bisa dibuka tutup berguna untuk menghemat ruang sidebar blog. Ruang yang sebelumnya terpakai buku tamu cbox mungkin bisa digunakan untuk pasang histats, pasang Facebook fanpage, atau lainnya.

Sebelumnya, kang asep sule sudah memberikan tutorial cara pasang buku tamu cbox silahkan baca dulu postingan tentang cara pasang buku tamu chatbox diblog. chatbox yang digunakan adalah menggunakan layanan gratis dari cbox karena untuk shoutmix tidak lagi gratis.

Buku tamu yang akan dipasang melayang maksudnya bukan melayang-layang seperti terbang kemana-mana, tapi buku tamu tersebut berada diatas blog dan posisinya sebelah kanan dan akan muncul saat diklik tombol buku tamunya. Bila diklik lagi tombol buku tamunya, buku tamu chatbox akan menghilang/sembunyi ke pinggir.

Okeh, tanpa panjang lebar silahkan langsung copy paste kode/script berikut ke gadget HTML/Javascript di blog:

<style type="text/css">
#gb{
position:fixed;
top:50px;
right:0px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBPl7u0moOx_5L66PPVuKDdyXVEqrakXwuVc6VLTvsLdUeYa_DhwIP7SkWep3dg0xLDFOJrbYrhdoEVD6o1oeV8rFe_jY7GwzesE2bRCvUR_Ry-NnvBRlGs6gJO9dP6Ko1e3rIlm8KdgFG/') 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 CBOX DISINI

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

</div>

</div>

var gb = document.getElementById("gb");
if (window.opera) {
gb.style.right = (30-gb.offsetWidth).toString() + "px";
}else {
gb.style.right = (-gb.offsetWidth).toString() + "px";
}

Hapus text yang diberi warna merah diatas dan tempatkan kode HTML cbox disitu.

Demikian tadi tutorial cara membuat buku tamu melayang/sembunyi, semoga bermanfaat dan menjadikan blog lebih indah dan atraktif dengan adanya buku tamu melayang tersebut.

Sumber : http://kangasepsule.blogspot.com