Mar 27, 2013

TUTORIAL SOROK SHOUTBOX


Salam semua...selalu kalau kita jenjalan kat blog2 mesti ramai yang dah sorok shoutbox kan.
Barulah blog tu nampak kemas dan ringan bila loading.
Lagi satu dapat jimatkan ruang widget kt sidebar blog korang.
Lets lear how to hide the shout box...
Ewah skeaping london pulak he~ OME


1- DASHBOARD > PAGE ELEMENT > ADD GADGET > HTML

2-  Copy & Paste CODE kat bawah ni

3- Save

<style type="text/css">
#gb{
position:fixed;
top:100px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:172px;
width:120px;
float:left;
cursor:pointer;
background:url('LETAK URL ICON SHOUT BOX YG KORANG NAK') 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, 120-w) : moveGB(120-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">
LETAK CODE SHOUTBOX KORANG KAT SINI (Login kat shoutbox/shoutmix utk dpt kan code)
<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 = (120-gb.offsetWidth).toString() + "px";
</script>

NOTE :

WARNA KUNING :  Korang boleh adjust ikut saiz yang korang suka
WARNA PUPLE : Korang boleh google icon shoutbox yang cute2 & copy paste URL OK


SELAMAT MENCOOOOOBA !!!

No comments:

Post a Comment

Semua yang terkandung dalam blog ini adalah hak milik Mama Darwiish. Sebarang copy paste, cetakan, dan sebagaiya haruslah dengan keizinan tuan blog. Sekian, terima kasih kerana sudi berkunjung ke blog ini.

Related Posts Plugin for WordPress, Blogger...
Related Posts Plugin for WordPress, Blogger...

Menarik !!!

Mama Darwiish Copyright © 2015. Design by MaiGraphikDesign