Membuat ShoutMix (ChatBox) Tersembunyi

ShoutMix yaitu sebuah widget yang berupa ChatBox. ChatBox ini berbentuk persegi yang dapat digunakan untuk chat. Fungsinya bisa untuk tempat untuk meninggalkan pesan dari pengunjung ke pemilik bahkan pemilik ke pengunjung. Sebelumnya saya juga pernah memposting bagaimana "Cara Memasang ShoutMix" dan kini saya tinggal memberikan bagaimana cara untuk menyembunyika ShoutMix di sisi halaman blog Anda yang antinya bisa dibuka dan ditutup kembali. Hal Seperti ini banyak dilakukan untuk memperluas tempat pada halaman blog atau bahkan didalam blog Anda terlalu penuh widget dan bingung untuk menempatkan widget shoutmix Berikut cara untuk menyembunyikan ShoutMix (Chatt Box):

• Anda harus masuk dulu ke akun blog kamu
• Setelah masuk di dashboard, maka klick Tata Letak
• Lalu kamu akan masuk ke Elemen Laman
• Tambah gatget
• Kamu pilih aja HTML/Java Script
• Lalu Copy kode dibawah ke HTML/Java Script
  

<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/AVvXsEiIsXml7TkbwkpZg7HDzszBQ80vuZpKeYowkGTGx_C9TjfNDuu2A55mv-h-tQYH5BQHrNaAiN2pZG4U6ntoE1bXKvWhEJS3sdLVrc5SVsnVWu5mqCMFVD-igQO2qEZandsXiZrnylYea6aU/') 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">

<Letakan Kode ShoutMix Kamu disini>
<div style="text-align:right">
<a href="http://rezarezong.blogspot.com/2009/07/cara-membuat-shoutmix-buku-tamu.html">
[Pasang Widget]
</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>

• Simpan Gatget
• Lihat Blog
• Lalu kamu tinggal lihat hasilnya