Saturday, January 14

Tutorial Hide Shoutbox

Assalamualaikum.

Kalau korang perasan aku dah hide Fibox aku. Hikhok. So, nampak kemas sikit kot aku rasa. Hehe. Korang nak hide juga? Jom aku ajar. But first aku credit kan tutorial ni dekat Lyssa Faizureen ^^ Image shout aku tu aku buat sendiri, cute kan kan kan? HAHA.



1. Dashboard > Design > Add a Gadget > HTML/JavaScript

2. Copy code di bawah ini terlebih dahulu.

<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 IMAGE') 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 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 = (140-gb.offsetWidth).toString() + "px";
</script>
3. Paste kan code yang korang dah copy atas ni dekat HTML/JavaScript tadi.

4. Warna biru, korang boleh ubah size ikut kesesuaian.

5. Warna merah, letak URL code image yang korang suka.

6. Then jangan lupa masukkan MASUKKAN KOD SHOUTBOX KORANG.

7. Preview and kalau tiada apa-apa masalah SAVE

7 comments :

LiNda said...

haiii..thankz for sharing..:)

Dhia BellamiZam said...

singgah..nice tuto..thnx :)

Bobo iMBobo said...

gambar kepala tu sebenarnya gmbr apa ek? byk tgk benda tu kat internet skrg hehe

yad'z said...

comel tapi scary lah gambar tu.. hahahaha

EnciK AxixOu said...

gambo lain xde k????

::WafaIrdina:: said...

nice sharing...ain pown da hide jugak fibox ain ^^

Syaifuddin said...

dah follow dah sini..bagus tutorial

 
\\ALL RIGHT RESERVED. Copyright@ HAK MILIK AFIFAH ALIAS//
Full Designed by eyfaaliasstory.blogspot.com