Saturday, 19 February 2011

Tutorial Sorok Shoutbox

Doodled by aL sYa at Saturday, February 19, 2011
kali ni aku nak ajar sorok shoutbox..ramai dah tau kot..tapi untuk yang belum tau, boleh la copy paste code ni kat blog korang..untuk yang dah tau, scroll ke bawah sekali dalam entry ni, ada nota untuk anda haha.

firstly, copy code ni..then dengan simple-mimple-pimple-nya, paste kat dalam widget 'add HTML/javascript'..



<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://3.bp.blogspot.com/_LZtXSNcp76A/SzzN08B1K5I/AAAAAAAAA0U/QT4rY6-FhI8/s320/tabs.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #666666;
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">

CODE SHOUTBOX 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 = (30-gb.offsetWidth).toString() + "px";
</script>


  • merah tu semuanya ikot size tab shoutbox (yang selalu kita click sebelum box tu main aucakkk dengan kita). tab tu size 100px height,30px width..so kalau tengok, kebanyakan yang merah2 tu semuanya 30px..
  • hijau terang gilaaa tu korang ley edit untuk position tab tu..
  • purple lak link tab tu, yang korang ley ubah dengan link gambar lain..
  • oren tu korang ley tuka jugak selain guna 'CLOSE'

p/s : macam yang kat blog ni, ukuran gambar tu 100x100..so Alya tuka semua merah2 tu jadi 100..senang je kan? heee~


6 budak suka tunjuk gigi:

♡ Sutera Kasih ♡ on 19 February 2011 at 02:36 said...

macam tau2 jekk chatbox sy hilang hehe tak pyh sy penat2 carikk kt google, awk dh tlg bg tutorial hehe thanks dear :)

aL sYa on 19 February 2011 at 02:59 said...

ekekekek..no problemo

checkcheck rockrock on 19 February 2011 at 17:13 said...

lepas da paste code kat html tuh .. dya suh letakkan code . code pa eh ?

aL sYa on 19 February 2011 at 21:08 said...

code shoutbox korang..

code yg laen tu cuma code utk hide shoutbox je..

kasutkukoyak on 12 September 2011 at 11:49 said...

code shoutbox tu nk letak kt mana??
blurrr la...

aL sYa on 19 September 2011 at 21:32 said...

dear,

kne bukak kat design.. add widget.. html/javascript..

=)

 

aL sYa Copyright © 2011 Blog aL sYa Yang Punyaa