Cara Buat ShoutBox berada di tepi blog

Ingin menjimatkan ruang semasa memasang Shoutbox.?? Tip ini akan membantu korang untuk menampilkan shoutbox di halaman tanpa  memakan space or ruang, kerana widget ini  disembunyikan di samping Body Blog korangdy blog.

Ikuti langkah berikut:

1.Klick pada Design dan Pilih Add Gadget
2.kemudian pilih html/javascript dan Copy dan Paste kod di bawah ini


<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://i219.photobucket.com/albums/cc282/garam63/SHOUT.png') 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">

Letakkan kod ShoutBox anda disini

<div style="text-align:right">
<a href="
http://deliyanadahari.blogspot.com/p/cara-buat-shoutbox-berada-di-tepi-blog.html"><font size="1"">get this </font></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></div></div>



3.Kod kaler biru adalah tinggi dan lebar shoutbox korang.boleh ubah ikut kehendak korang.
4.Tapal script/kod shoutbox korang dengan tulisan berwarna merah
5.teks hijau adalah imej icon korang.korang boleh gantikan dengan icon imej korang sendiri.
6.Preview dahulu. kalau tak ada Error bolehlah save.


selamat mencuba..


1 ulasan: