Cara Menyembunyikan Shoutbox di Blog

Seperti pada umumnya, para blogger selalu meletakkan shoutbox di sidebar maupun footer sehingga akan menghabiskan tempat, terlebih lagi blog yang isinya banyak mengandung iklan atau promosi apapun. Nah..untuk mengatasi hal demikian, ada baiknya kalo shoutbox tadi kita hiden atau sembunyikan, tetapi tetap ada tanda. Lalu bagaimana Cara Menyembunyikan Shoutbox di Blog? Tujuannya adalah agar blog kelihatan lebih simpel dan tidak terlalu ramai.

Perhatikan langkah-langkahnya sebagai berikut:
1. Seperti biasa Login akun blogger anda, bila sudah masuk di dashboard
2. Klik design kemudian cari Page Element dan klik add a gadget
3. Pilihlah HTML/javascript.
4. Copy dan pastekan script di bawah ini ke dalam html/javascript tadi

<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://2.bp.blogspot.com/-hp5hb7Z7Gvk/TmzEhhJZRmI/AAAAAAAAGgo/vmECDANflYw/s320/shoutbox.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #666666;
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 Shoutbox Anda Disini

<div style="text-align:right"><a href="http://bebasbekarya.blogspot.com/2011/10/cara-menyembunyikan-shoutbox-di-blog.html" target="_blank"><Blog Tutorial Untuk Indonesia></a>
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

Catatan: Gantikan "Kode Shoutbox Anda Disini" dengan kod shoutbox anda.

5. Save dan lihat hasilnya.

Catatan:

Secara default, tab shoutbox adalah berwarna hijau, silahkan ganti warna menurut yang anda suka, caranya ganti saja url gambar yang anda mahu. Cari kode gambar di bawah ini:

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://2.bp.blogspot.com/-hp5hb7Z7Gvk/TmzEhhJZRmI/AAAAAAAAGgo/vmECDANflYw/s320/shoutbox.png') no-repeat;
}

Url yang berwarna merah tadi adalah Url gambar, silahkan pilih dan copy gambar di bawah ini dengan klik kanan > save image url.

Bila artikel ini masih ada kekurangan dalam penyajiannya, silahkan share melalui kolom komentar. Semoga postingan tentang Cara Menyembunyikan Shoutbox di Blog ini memberikan manfaat kepada semua. Oke...sampai disini saja...keep blogging.