Sunday, June 10, 2012

Tutorial : Sembunyikan Shoutbox


Hari tu Eyz dah ajar macam mana nak  buat shoutbox guna Shoutbox Busuk.org kan. Sekarang Eyz akan bagi tutorial free untuk korang sembunyikan atau 'hide' shoutbox korang. Jangan risau. Mudah jer. Tak susah pun. Ehhee.

:: LANGKAH - LANGKAH ::

1. Sign In.

2. Dashboard > Design > Add Gadget > HTML/ JavaScript

3. Copy kod yang ada kat bawah nie....

<style type="text/css">

#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:350px;
width:140px;
float:left;
cursor:pointer;
background:url('URL PIC YANG KORANG SUKA') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #00000;
background:#F5F5F5;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 150-w) : moveGB(170-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">

MASUKKAN KOD SHOUTMIX KORANG KAT SINI

<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (140-gb.offsetWidth).toString() + "px";
</script>

4. Copy dah? Lepas tu, paste kat HTML/ JavaScript tadi.

5. Yang warna HIJAU tu, korang cari pic yang korang nak. Masukkan kat dalam kurungan tu. Kalau nak cari pic kat Photobucket pun boleh.

6. Tapi jangan lupa! Bagi yang warna BIRU, tentukan saiz pic mengikut kesesuaian.

7. SAVE!!!

SELAMAT MENCUBA
^___^


No comments: