Home » , , »

SOROKKAN SHOUT BOX

Posted by Borong Shop | Labels: , ,

Tutorial Blog | Cara Buat Blog

Tutorial kali nie aku nak ajar korang macam mana nak sorokkan shoutbox macam kt gambar bawah nie...

sebelum


selepas


Untuk membuatnya tidak  perlu edit pada kod html  dan anda cuma perlu pergi kt design >> add a gadget dan cari html/javascript..

masukkan kod di bawah ini :

<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 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 = (30-gb.offsetWidth).toString() + "px";
</script>

Note :
1)50px untuk setkan kedudukan shoutbox korang. Semakin tinggi nombor yang korang setkan, semakin ke bawah lah korang punya shoutbox tu.
2)color merah itu masukkan code shoutbox

jika mahir dalam editing anda boleh ubah color and word, anda boleh gunakan adobe photoshop..





Related Posts Plugin for WordPress, Blogger...

0 comments:

:f :D :x B-) b-( :@ x( :? ;;) :-B :| :)) :(( =(( :s :-j :-p

Post a Comment