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

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


Okeh, lepas tu korang Klik PREVIEW, kalau korang dah berpuas hati dengan ShoutBox korang, SAVE jeeee.. hehe

Tak paham ?? Luahkan masalah korang kat Comment.. orait ??



Senyum! ^_^

{ 5 Orang Doakan Farid Kaya... read them below or Comment }

  1. yg kod image tu amende lak?cmne nk wat tulisan shoutbox tu tukar ke gmba ea?

    BalasPadam
  2. @yunb2uty



    Pergi cari kat Photobucket,, or nak tgk saya punya gmba? Kat photobucket search nama kimkendys,, .he3

    BalasPadam
  3. thanx for sharing, hehe..biha dh try buat tp knp mcm x jadi ni?

    BalasPadam
  4. @biha a.k.a PETOM

    kenap xjadi camni ?? maybe ada silap kot :(

    BalasPadam

Welcome to My Blog

Instagram

Instagram

Followers

YouTube Channels



- Copyright © Farid Casablancas -