Posted by : Farid Casablancas
Mac 16, 2011
Maybe ramai yang dah tau benda nie.. Tapi pada yang tak tahu macam mana nak Sorok Shoutbox korang pada sisi kanan, Di sini aku nak ajarkan Cara-caranya..
First :
First :
Log masuk blog => DASHBOARD => LAYOUT => ADD A GADGET. Seterusnya klik pada HTML/Javascript.
Copy Kod HTML Shoutbox korang yang sedia ada kat Blog korang tu, Sebabnya korang kena ambik Kod HTML Shoutbox korang yang asal tu pastu Pastekan ke Kod HTML yang kat Bawah nie.. Korang guna Notepad ke ape ke untuk Backup Kod HTML Shoutbox asal korang yang sedia ada tu..
Copy Kod HTML kat Bawah nie :
<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/AVvXsEj51ihlpCAE6RL0mihFAgRVRZiF5HmjWrN1lvelCb02HKBOiCovaivb6pCYalKiFq3wFcFAl5BqZ340z5IZOHXQrHzzdOt3XX-ZZ_FkbPZB8cB_P5-cy4W2tm0qP9jHCNEzrOUQoNVbjDv0/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 kod Shout Box di sini
<div style="text-align:right">
<a href="javascript:showHideGB()">
[Tutup]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>
Hijau : Nie untuk ubah Gambar asal ShoutBox tu kepada gambar yang korang suka..
Kuning : Pastekan Kod HTML ShoutBox korang yang asal tu kat situ..
Kuning : Pastekan Kod HTML ShoutBox korang yang asal tu kat situ..
Contoh, kalau image yang korang nak letak tu resolusi dia 156x128, korang kena ubah Kod yang kaler MERAH tu kepada kelebaran Width dia.. contoh :
<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:156px;
width:128px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj51ihlpCAE6RL0mihFAgRVRZiF5HmjWrN1lvelCb02HKBOiCovaivb6pCYalKiFq3wFcFAl5BqZ340z5IZOHXQrHzzdOt3XX-ZZ_FkbPZB8cB_P5-cy4W2tm0qP9jHCNEzrOUQoNVbjDv0/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, 128-w) : moveGB(128-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">
Kod ShoutBox Aku
<div style="text-align:right">
<a href="javascript:showHideGB()">
[Tutup]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (128-gb.offsetWidth).toString() + "px";
</script>
Okeh, dah paham ?? Jom kita sambung balik.. Lepas tu PASTE kat dalam HTML/Javascript macam kat bawah tu..
Tak paham ?? Luahkan masalah korang kat Comment.. orait ??
Senyum! ^_^
Related Posts :
- Back to Home »
- Tutorial Blog »
- Cara-Cara Membina Hide Shout Box pada sisi Kanan Blog
yg kod image tu amende lak?cmne nk wat tulisan shoutbox tu tukar ke gmba ea?
BalasPadam@yunb2uty
BalasPadamPergi cari kat Photobucket,, or nak tgk saya punya gmba? Kat photobucket search nama kimkendys,, .he3
thanx for sharing, hehe..biha dh try buat tp knp mcm x jadi ni?
BalasPadam@biha a.k.a PETOM
BalasPadamkenap xjadi camni ?? maybe ada silap kot :(
@Farid Casablancas x paham la tokwan :(
BalasPadam