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 => rancangan => elemen halaman => tambah gadget (terserah pada posisi gadget yang mana).
(Kode Dibawah Ini Hanya Untuk Script HIDE, Belum termasuk kode shoutboxnya)
<style type="text/css">
#gb {
position:fixed;
top:<-! Masukan jarak dalam satuan px -!>;
z-index: 1000;
}
* html #gb {
position:relative;
}
.gbtab {
margin-top:<-! Masukan jarak dalam satuan px -!>;
height:110px;
width:30px;
float:right;
cursor:pointer;
background:url(<!- Masukan url gambar 30x110px -!>) no-repeat top;
}
.gbtab:hover {
margin-top:<-! Masukan jarak dalam satuan px -!>;
height:110px;
width:30px;
float:right;
cursor:pointer;
background:url(<-! Masukan jarak dalam satuan px -!>
) no-repeat top;
}
.gbcontent {
float:right;
border:3px solid #ff8800;
background:#ffffff;
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.left = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
<!- Masukan Code ShoutMix disini -!>
<div style="text-align:left">
<a href="javascript:showHideGB()">[close]</a>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.left = (30-gb.offsetWidth).toString() + "px";
</script>
</div>
Keterangan : huruf merah bisa diganti terserah kita.
kemudian disimpan.
Selamat Mencoba..^.^
