[Tutorial] Hiding Shoutbox 2.0

on Jan 2, 2012
YOW!
Ramai yang gune hiding shoutbox yg kat tepi blog tu kan .
Tutorial yg aku buat nie same je cam2 yg korang nye tu , Tapi ade improvement sikit.

Improvement :
# shoutbox tak load skali dengan page korang , dengan ini dapat meningkatkan sedikit cepat page load blog / website


Design > Add new gadget > HTML/JavaScript . Paste code bawah nie .

<style type="text/css">
/* SEMUA CODE DALAM STYLE NIE BOLEH DITUKAR2 . HAVE FUN TRY IT ! */
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://i.imgur.com/YZMJf.png') no-repeat; /* BOLEH TUKAR IKUT SEDAP RASA*/
}
.gbcontent{
height:350px; /* BOLEH TUKAR IKUT SEDAP RASA*/
width: 250px; /* BOLEH TUKAR IKUT SEDAP RASA*/

float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
#myifm {
width:100%;
height:95%;
border:1px solid #ccc;
}
</style>

<script type="text/javascript">
var url = "http://s1.fibox.ws/chat.php?453"; //tuka url kat sini!!
</script>

<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
<iframe id="myifm"></iframe>
<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>

<script type="text/javascript">
var panggil = 0;
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
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;
if (panggil == 0){
document.getElementById("myifm").setAttribute("src",""+url+"");
panggil++;
}
}
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>


Baca comment dalam code tu mane2 yg code boleh adjust.

BIRU : Tukar untuk gambar tu.
MERAH : Tukar height/width
HIJAU : Tukar url iframe.


URL!

Kalau gune fibox atau iShoutbox just copy url yg dari code yg korg dapat

Contoh:
Kalau cbox atau yang lain2 :

#Copy code shoutbox tu letak kat PASTEHTML

#Pulish page tu pastu gune URL yg akan korang dapat .

*Ini sebab yg lain2 tu ade 2 IFRAME dan cara nie nak gabungkan jadi 1.

Selamat mencube!

4 comments:

HAW said...

mcm sama je dgn kod yg aku guna.. cuma susunan je lain

Live to Life said...

mungkin same . tapi code nie ade improve sikit . try tgk demo (=

Za said...

gitar gitar gitar...hehehehe...mcm complicated kn??hahaha...xpela...nti za ada masa ada za buat :D

Live to Life said...

@Za semudah copy paste je . huhu

Post a Comment