Tuesday, June 7, 2011

Tutorial Hidden Shoutbox

Assalamualaikum! :cherry: hari ni nak buat tuto <3 LAGI haha bukan ape, tuto ni ade org request laa.. :apple: satu sekola nan sekolah aku tuu ^_^ namenye jasmine! oke kak mine! thanks request tuto! :lollipop: Hidden shoutbox tu mcm aku nye yg cute tuu hihii


1. Pergi Dashboard:65: Design:65: Page Elements:65: Add A Gadget:65: HTML/Javascript
2. Copy code dekat bawah ni and paste kat HTML/Javascript tadi

<style type="text/css">

#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:350px;
width:180px;
float:left;
cursor:pointer;
background:url('URL IMAGE KORANG') 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(150-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 SHOUTMIX KORANG <---

<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 = (150-gb.offsetWidth).toString() + "px";
</script>
3. URL IMAGE tuh letaklah URL image korang. boleh buat sendiri kat photoshop, photoscape
4. KOD SHOUTMIX tu pulak log in shoutmix korang, pergi ke Get Codes then cari Embed Code.. copy lah ye :)
uitt! <3 mesti korang malas nak buat kann? haha kalau korang nk aku buat, just comment dekat ruangan comment okey? Adios! Assalamualaikum!

No comments:

Post a Comment

saye suke owang yang tngh comment ni ^_^