Memasang Hidden Shoutbox.

Trick Shoutbox

1. Masuk akaun Blogger.

2. Pilih 'Layout'--> 'Add a Gadget'--> 'Html / Javascript'.

3. Copy kod di bawah dan Paste.


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

4. Perhatian !!! Gantikan text yang berwarna biru dengan kod shoutbox anda.

5. Save.

6. Selamat Mencuba.

26 comments:

Anonymous said...

Bro, slm ziarah & kenal2an, ambo tompang bljr, kod2 utk blogspot bleh guna utk wordpress juga ker?

Affan Ruslan said...

@anonymous: xleh rasanya. tak tau lah. hehe

Affan Ruslan said...

bro, height die cmne nk adjust?
try tukar

height:100px;

jadi 400px sama je?
cmne tu?

Syamzone said...

@Affan Ruslan: height atau width x payah tukar,klu nk tukar kena tukar background : url dgn imej sendiri.

Affan Ruslan said...

Salam.
Sori bro.
Actually kena letak height and width sendiri pada code shoutbox yg dipaste kt cide kt atas

Kalau defaulf, die akan ada "" je.
Thanks for this tutorial btw. :)

Bima85 said...

tengkiyu bro
manteb bener tipsnya
it's work :D

Hafizulrahman said...

@anonymous: boleh letak kat wordpress... try tengok sini http://www.ilmi-islam.com

adilah said...

salam..thanks bro! sy try dr website lain smua x jd then awk pny jd..sgt mghargainya :)

Amirul asyraf said...

button hijau tu nak tukar kena upload PNG yang mane eh?Website ape yang ade sediakan Shoutout Button?

SyamZone™ said...

@Amirul asyraf try cari kat sini http://www.ohcerita.com/2010/03/koleksi-tab-shoutbox-berserta-link.html

Ann said...

good tutorial!easy and works!

Kayun said...

terima kasi..saya pun dah try jugak :D

Kayun said...

*terima kasih..huahua

Nemesis said...

this is what i'm i looking for, thenk you :)

Dawa said...

saya ambil tutorial anda. thanks byk2. jemput ke ER utk lihat hasil kerja anda kepada blogger baru cm saya :D

Anonymous said...

klu nk tuka sblh kanan cm ne yer?
x leh kew?

NadjwaRedzuan said...

saya buat asyik tak jadi... :(

SyamZone™ said...

@NadjwaRedzuan :Awk pakai browser ape? Klu nk lihat hasil terbaik guna Mozilla...Cuba lagi perlahan2 insyaallah akan jd...Tq.

NadjwaRedzuan said...

tq syam.. saya buat pakai mozilla baru jadi.. before ni pakai IE.. >.<

NadjwaRedzuan said...

alamakk,, bila bukak kt IE shoutbox saya keluar sebesar alam..haha

fatihahfadzil said...

thnx awak !! lama cr . akhrnya jumpa . bahah :D

Anderson said...

thanks 4 tutorial..^_^

Zateyl Lovera said...

Assalamualaikum ..Thankyou share :)dah jadi !

nur sarah said...

org punye, dah ok.. tapi, macam tak link dgn facebook je.. sebab, tulis kat shoutbox tu, takde pun letak dalam facebook.. :(

CintaZulaikha said...

tq, da try pon..hehe

abah khalisha said...

Thanks

Post a Comment