Cara Menghiden SHOUT BOX

Cara Membuat Hide Shoutbox - Waktu buka facebook pagi ini saya mendapatkan pesan dari salah seorang teman yang bergabung di group"Info Seputar Internet". Isi pesan tersebut menanyakan bagaimana caramembuat hide shoutbox yang ada pada beberapa blogger. Oleh karena itu saya berinisiatif untuk menerbitkan artikelnya pada blog ini, hitung-hitung buat catatan pribadi saya. Untuk shoutbox sendiri ada berbagai macam pendapat dari kalangan blogger, ada yang menganggap perlu dan ada juga yang menganggap tidak perlu. Bagi saya semua tergantung kebutuhan dan untuk seorang newbie seperti saya shoutbox masih saya butuhkan.
Kelebihan shoutbox dengan tampilan hide shoutbox yaitu meminimalkan penggunaan widget pada blog apalagi untuk tampilan blog 2 kolom. Sayang sekali hide shoutbox ini tidak bekerja otomatis pada browser ponsel.


Untuk menerapakam pada blog seperti biasa anda login dulu ke blogger pilih => tata letak => elemen halaman => tambah gadget (terserah pada posisi gadget yang mana).

Selanjutnya copy kode dibawah ini dan ganti tulisan "Masukkan kod Shout Box di sini" dengan kode shoubox anda lalu paste pada halaman penempatan gadget.


<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/AVvXsEjM0zhAt11eGCZKFHh4bO2c-Av-rDA38pICg90L2VhsySgL5ZTcDJhmZ4ru-WeBGhwWmHdzeltxlZgY0yKK_nSMhBJoJxSJieV4-t_vnc2V2-j0ZSJKT8VYbDZcKMTY7dsO52NKFRAg9VFu/s320/tabs.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">
Masukkan kod Shout Box di sini
<div style="text-align:right">
<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>

Setelah itu silahkan klik "simpan"
Apabila tidak ada kesalahan maka hasilnya akan seperti ini :