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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvO99bNXjpqt4U5Kfr8FgTXk7b3Hx34Hl2iajXAwDruAgdrMiJlwCyTQ37pZpWU_7Y3gbZLLDmrzWbg05QreTmiAPZY0ZGI-w3gB-yEReWlbqd-mamjAqEFu9EAKpU_0zxChS70V73brc/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.
25 comments:
Bro, slm ziarah & kenal2an, ambo tompang bljr, kod2 utk blogspot bleh guna utk wordpress juga ker?
@anonymous: xleh rasanya. tak tau lah. hehe
bro, height die cmne nk adjust?
try tukar
height:100px;
jadi 400px sama je?
cmne tu?
@Affan Ruslan: height atau width x payah tukar,klu nk tukar kena tukar background : url dgn imej sendiri.
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. :)
tengkiyu bro
manteb bener tipsnya
it's work :D
@anonymous: boleh letak kat wordpress... try tengok sini http://www.ilmi-islam.com
salam..thanks bro! sy try dr website lain smua x jd then awk pny jd..sgt mghargainya :)
button hijau tu nak tukar kena upload PNG yang mane eh?Website ape yang ade sediakan Shoutout Button?
@Amirul asyraf try cari kat sini http://www.ohcerita.com/2010/03/koleksi-tab-shoutbox-berserta-link.html
good tutorial!easy and works!
terima kasi..saya pun dah try jugak :D
*terima kasih..huahua
this is what i'm i looking for, thenk you :)
saya ambil tutorial anda. thanks byk2. jemput ke ER utk lihat hasil kerja anda kepada blogger baru cm saya :D
klu nk tuka sblh kanan cm ne yer?
x leh kew?
saya buat asyik tak jadi... :(
@NadjwaRedzuan :Awk pakai browser ape? Klu nk lihat hasil terbaik guna Mozilla...Cuba lagi perlahan2 insyaallah akan jd...Tq.
tq syam.. saya buat pakai mozilla baru jadi.. before ni pakai IE.. >.<
alamakk,, bila bukak kt IE shoutbox saya keluar sebesar alam..haha
thanks 4 tutorial..^_^
Assalamualaikum ..Thankyou share :)dah jadi !
org punye, dah ok.. tapi, macam tak link dgn facebook je.. sebab, tulis kat shoutbox tu, takde pun letak dalam facebook.. :(
tq, da try pon..hehe
Thanks
Post a Comment