Cara Memasang Hidden Shoutbox




Kali ini mrul ingin berkongsi tips cara memasang hiden shoutbox.Hidden Chatbox adalah sebuah tempat menyimpan atau meletakkan widget chatbox (Shoutmix, Shoutbox, dll) yang boleh disembunyi untuk menjimatkan ruang blog.

Berikut langkah-langkah membuat hidden shoutbox :
1.Sign blog anda.
2.Klik Design.
3. Klik Add a Gadget.
4.HTML / Javascript.
5.Copy kod dibawah 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://2.bp.blogspot.com/_tgUOxznghPA/S6oTtXCIvbI/AAAAAAAAAbU/ZAaskiVstr8/s400/Shoutbox+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 KOD SHOUTBOX ANDA DISINI

<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>

6.paste kod didalam content.

7.Save.

Nota :Gantikan kod shoutbox anda pada perkataan berwana merah.



Contoh :




copy kod imej url


Selamat Mencuba….

2 comments:

Nurul Amira said...

dah lame cari mcm mane nak buat hidden shoutbox . 8-} .. at last jumpe jugak . thanks yah ! :))

mrul said...

sama2..singgah la selalu..;) untuk menukar icon shoutbox saya belum update lagi..

TinGaLkan Jejak