Friday, March 18, 2011

Tutorial hidden shoutbox *2 choice*

Salam semua.. ok la.. awe akan wat tutorial yang seterusnya..

sape2 yng dah taw.. just ignore jer..

1 choice..

Sliding: yang bleh kuar masuk..


korang paste code nie kat html/javascript..


<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:400px;
width:150px;
float:left;
cursor:pointer;
background:url('image url) 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, 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">
Shout/cbox code..
<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>

*yang warna merah tu untuk saiz image korang yang nak flout kan ..
*image url tu letak la image yang korang suka..


2 choice:
appear-mcm awe punya..
yang tu korang rujuk sendiri kat blog wan hazel..



6 comments:

  1. cane nak buat blockquote mcm awak tu..!

    ReplyDelete
  2. @Cik Muda Saeactually saye punya bukan blockquote tp background.. saya taw mcm ne blockqoute, nnt saya wat kat tuto tu..

    ReplyDelete
  3. yg awk highlightkn merah uh nk wat pe??..awk taa terangkn un..huhu

    ReplyDelete