Sunday, 22 January 2012

tutorial shoutbox tersembunyi =)

Reactions: 

assalamualaikum and hye peeps..

Jom belajar dengan Picci cara nak buat xhoutbox yang tersembunyi, Mesti lagi cool kann.


1) Dashboard --> Design --> Add a gadget --> HTML/ Javascript

2) copy kod di bawah dan paste kan dekat HTML/ Javascript yang telah kamu buka tadi


<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('URL DESIGN SHOUTBOX ANDA') 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">

KOD SHOUTBOX DISINI

<div style="text-align:right"><a href="http://tutorialuntukblog.blogspot.com/2011/09/tutorial-sembunyikan-shoutbox-blog.html" target="_blank"><small>tutorial here</small></a>
<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>

3) Save dan lihat hasilnya

TAMBAHAN:
Anda boleh dapatkan url design shoutbox anda di sini. Right click untuk dapatkan url =)


ikhlas:
piccioneb-blu.blogspot.com

4 comments:

  1. eer dh cube.. tapi kenape kalo buke link kt belog, shoutbox tak duduk tersembunyi tetapi terkeluar .. hehe ape silap ye ??


    cube lihat ernaeer.blogspot.com

    ReplyDelete

dear, terima kasih kerana sudi berkongsi idea, pendapat dan kritikan. jangan lupa follow ye:)

piccioneblu dah besar >.

Daisypath - Personal pictureDaisypath Happy Birthday tickers