http://adf.ly/YpS3K
Cara membuat shoutbox sebenarnya sih gampang..Tinggal kreatifitas kita saja yang berperan....Tinggal ikutin langkah2 dibawah.>>Oke langsung mulai aja deh.. ^_^
1. log in ke blogger
2. pilih menu tata letak
3. edit HTML shoutbox anda (jangan lupa back up dulu scriptnya)
4. hapus script original shoutbox anda. lalu ganti dengan script 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("ganti dengan url gambarmu") 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">
<!– disini letak kode atau script shoutmix !–>
<div style="text-align:right">
<!-- Begin ShoutMix - http://www.shoutmix.com -->
<iframe scrolling="auto" width="198" frameborder="0" src="http://www6.shoutmix.com/?junkcool" height="400" title="junkcool">
<a href="http://www6.shoutmix.com/?junkcool">View shoutbox</a>
</iframe>
<!-- End ShoutMix -->
<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>
5 komentar: on "Cara membuat shoutbox melayang"
Terima kasih infonya... tentang cara memasang shoutbox buku tamu di blog
Sama-sama bro..
thank's dah mampir
pengunnjung setiaaaaa
thanks kunjunganx
Perlu diketahui bahwa tidak semua browser menampilkan sempurna chat box melayang di atas. Bila menggunakan firefox, tampilan chat box akan menonjol ke depan (tidak enak dipandang). Maka ganti javascript terakhir dengan yang satu ini untuk mendapatkan kompatibilitas di berbagai browser (100% Tested):
var gb = document.getElementById("gb");
if (window.opera) {
gb.style.right = (30-gb.offsetWidth).toString() + "px";
}else {
gb.style.right = (-gb.offsetWidth).toString() + "px";
}
Best Regard,
http://debrianruhut.blogspot.com/
Posting Komentar