Jumat, 26 Februari 2010

Cara membuat shoutbox melayang

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>


Digg Google Bookmarks reddit Mixx StumbleUpon Technorati Yahoo! Buzz DesignFloat Delicious BlinkList Furl

5 komentar: on "Cara membuat shoutbox melayang"

Gigih Pambudi mengatakan...

Terima kasih infonya... tentang cara memasang shoutbox buku tamu di blog

junkcool mengatakan...

Sama-sama bro..
thank's dah mampir

Slamet Wido2 mengatakan...

pengunnjung setiaaaaa

junkcool mengatakan...

thanks kunjunganx

DEBRIAN RUHUT BLOG mengatakan...

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