Cara nak buat "shoutbox'' yang terapung dengan icon korang sendiri

Assalamualaikum..


Permintaan dari rakan blogger.. jadi saya akan kasi code untuk buat shoutbox korang float.. mudah je..
firstly korang perlu ada korang nyer shoutbox code sendiri.. yang korang leyh ambik dekat

www.shoutmix.com


ok..ambil code shoutbox dari situ.. takpun kalau dah ade kod shoutbox dalam TAB "Design" korang.. takperlu nak ambil dari shoutmix tu dah..

ni contoh code milik deathnota yang telah sedikit diubahsuai..

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:104px;
width:86px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV0H1Jf9KI8Q4N_acCOq-OEtk_PO0WCrZU8ZU3VSf204ETjDgo9ToHLU5EzxAsxpBjMUXQRf3x91pzEhd0cuY1fy3v93I1NXUR60WENsHc3Ui12Qpu_lNoZZROAm_F4BXZItxVGhxsoaNR/s1600/shoutbox2.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
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">

TAMPAL CODE SHOUTMIX KORANG DISINI

<div style="text-align:right">
<a href="http://www.deathnota.blogspot.com"><font size="1"">get this </font></a><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>

CARA NAK GANTIKAN SHOUTBOX ICON DENGAN SHOUTBOX ICON KORANG SENDIRI


baiklah..

height:104px;
width:86px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV0H1Jf9KI8Q4N_acCOq-OEtk_PO0WCrZU8ZU3VSf204ETjDgo9ToHLU5EzxAsxpBjMUXQRf3x91pzEhd0cuY1fy3v93I1NXUR60WENsHc3Ui12Qpu_lNoZZROAm_F4BXZItxVGhxsoaNR/s1600/shoutbox2.png') no-repeat;
}

code yang telah dikalerkan dengan kaler merah adalah korang nyer shoutbox icon.. contohnya macam xdeath nyer icon..

background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV0H1Jf9KI8Q4N_acCOq-OEtk_PO0WCrZU8ZU3VSf204ETjDgo9ToHLU5EzxAsxpBjMUXQRf3x91pzEhd0cuY1fy3v93I1NXUR60WENsHc3Ui12Qpu_lNoZZROAm_F4BXZItxVGhxsoaNR/s1600/shoutbox2.png') no-repeat;
}

code html yang telah dimerahkan tadi boleh digantikan dengan icon korang sendiri.. dengan cara upload icon.png korang yang korang dah buat.. kat mane2 image hosting.. macam kat imageshack.com.. dan ambil direct link image tersebut lalu tampalkan pada code yang telah dimerahkan.


tapi pastikan saiz icon yang hendak ditampal bersamaan saiz dalam code html tadi.

height:104px;
width:86px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV0H1Jf9KI8Q4N_acCOq-OEtk_PO0WCrZU8ZU3VSf204ETjDgo9ToHLU5EzxAsxpBjMUXQRf3x91pzEhd0cuY1fy3v93I1NXUR60WENsHc3Ui12Qpu_lNoZZROAm_F4BXZItxVGhxsoaNR/s1600/shoutbox2.png') no-repeat;
}

height:104
width:86

gantikan dengan saiz png yang telah korang buat...contohnya

height:30px;
width:99px;

 sekiranya korang tak paham tutorial untuk tukarkan icon tu.. just copy code kat bawah ni ke dalam
GADGET HTML/JAVASCRIPT yang ada pada DESIGN tab.. dengan cara "ADD A GADGET"
 tak perlu tukar ape2 pada kod ni melainkan.. cume PASTE code shoutmix korang sendiri pada 

TAMPAL CODE SHOUTMIX KORANG DISINI

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:104px;
width:86px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV0H1Jf9KI8Q4N_acCOq-OEtk_PO0WCrZU8ZU3VSf204ETjDgo9ToHLU5EzxAsxpBjMUXQRf3x91pzEhd0cuY1fy3v93I1NXUR60WENsHc3Ui12Qpu_lNoZZROAm_F4BXZItxVGhxsoaNR/s1600/shoutbox2.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
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">

TAMPAL CODE SHOUTMIX KORANG DISINI

<div style="text-align:right">
<a href="http://www.deathnota.blogspot.com"><font size="1"">get this </font></a><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>

Sekian dari deathnota a.ka Xdeath.. Wassalam.