Cara membuat Chatbox sembunyi

Setelah Memberikan Cara membuat Chatbox (Buku Tamu) . Sekarang saya akan memberikan cara menyembunyikan Widget atau Chat Box (buku tamu) di kanan. Bagi blog yang tidak mempunyai banyak ruang di blognya, pasti cara ini sangat di perlukan, karena Widget-widget yang di tempel di blog hanya mengotori/Mengurangi space di blog. Langsung saja caranya sebagai berikut :

1. Login ke blogger terlebih dahulu.
2. Setelah itu Buka Rancangan - Elemen Laman.
3. Tambah Widget - Html/javascript
4. Copy paste Code berikut di sana

<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWD1Vjq2YiqDgP8QS0lhkquKpp6p06kl3RbfvawsNafbq3E2RGE7C8aXmnRiDmCRq0nLsfFAkBKJ27Y1cwaNlA8G98LV_RdzYVJvPU1ZCHcf0MMQNnez_U0ChhU9c3cSQxPWP715Kp2pM/s1600/cbred-LEFT+copyasasd.png') no-repeat;
}
.gbcontent{
float:left;
border:6px solid #de7300;
background:#F5F5F5;
padding:5px;
}
</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">

Ganti Dengan Code Script Chat Box (Buku Tamu) Kamu



Get This <a href="http://berserkboys.blogspot.com/2012/01/cara-menyembunyikan-widget-atau-gadget.html">Gadget</a></div>
<div style="text-align: right;">
    <a href="javascript:showHideGB()">
    Close
    </a></div>

    </div>

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

5. Ganti tulisan yang berwarna Merah erw dengan script chat box kamu, jika belum memiliki chat box silahkan klik di sini

6. Lalu simpan.
Selamat Anda memiliki tampilan Chatbox baru.

Jika anda belum membuat chat box, silahkan klik link di bawah ini untuk membuat chat boxnya

CHATBOX

Sumber : Idsena

Tweet