Followers

Wednesday, June 1, 2011

Tutorial : Cara Nak Hide Shoutbox Anda

Ni merupakan tutorial aq yang pertama.Sebenarnya tutorial ni aq ambil dari blog org lain.Saja nak share2 dengan korang.Mungkin ada kawan2 yang masih xtaw,so aq pun buatla tutorial ni.Share is Caring..=)

Langkah 1 : Pergi ke Dashboard > Layout > Page Elements > Add a Gadget > HTML/Javascript

Langkah 2 : Copy dan Paste code di Bawah ni.
<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">
(Masukkan code shoutbox anda di sini.Copy paste di 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>

Langkah 3 : Save dan lihat hasilnya

P/S : Kalau korang nak ubah gambar shoutbox korang 2,korang ubah jak linknya.Yang kat  background:url('http://3.bp.blogspot.com/_LZtXSNcp76A/SzzN08B1K5I/AAAAAAAAA0U/QT4rY6-FhI8/s320/tabs.png') no-repeat;
Tukarkan urlnya.Tapi jangan buang tanda ' tu.Ok.Selamat Mencuba..=)

2 comments:

Related Posts Plugin for WordPress, Blogger...