Tutorial: Float Shoutbox

Act, xde sesiape pon request aku untuk buat post ni, tapi ade gak tengok kawan aku punye kawan tanye, so, tak slahlah kot nak buat tutorial ni. ehe

STEP 1

first sekali, korang register dulu Shoutmix, or Cbox atau ape2 chat box yang korang tau.

Untuk Shoutmix--------> klik sini

Untuk Shoutbox-------> klik sini

Untuk Cbox-----------> klik sini

Dah register? ok, ikuti langkah Seterusnya

STEP 2

korang pergi kat dashboard > design > klik "add a gadget". Pilih "HTML/Java Script"

 korang copy HMTL bawah ni.

<style type="text/css">
#at{
position:fixed;
right:300px;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url();
}
.atcontent{
float:left;
border:2px solid #F7FE2E;
background:url() #000000 repeat bottom center scroll ;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:5px;
}
</style>
<script type="text/javascript">
function showHideAT(){
var at = document.getElementById("at");
var w = at.offsetWidth;
at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
at.opened = !at.opened;
}
function moveAT(x0, xf){
var at = document.getElementById("at");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
at.style.bottom = x.toString() + "px";
if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
}
</script>
<div id="at">
<div class="attab" onmouseover="showHideAT()"> </div>
<div class="atcontent">
<div align="center">
<div style="background:url()#000000 no-repeat;">
<div style="text-align: center;">



<gantikan kod ini dengan kod shoutmix korang tuh!!!!>


<div align="right"><a href="javascript:void(0);" onclick="showHideAT()">CLOSE</a></div>
<br /><div align="left" float: right;><a href="http://safwanabdulrahman.blogspot.com/">by VanDerSaf</a><div style="color: #FFFFFF;">
<span ></span></div></div>
</div></div>


<script type="text/javascript">
var at = document.getElementById("at");
at.style.bottom = (-200-at.offsetWidth).toString() + "px";
</script>


<style type='text/css'>
a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;F
opacity: 0.5;
-khtml-opacity: 0.5;}

a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>

<div style='display:scroll; position:fixed; top:150px; right:5px;'>
<a href="javascript:void(0);"onclick="showHideAT()"/><img src="http://i1185.photobucket.com/albums/z356/saikomonky/Untitled-asd1-1.gif" alt="PUSH" title="KLIK ME" /></a>

</div></div></div></div>

 

tulisan yang berwarna merah tu, korang gantikan dengan code Shoutbox, Cbox, Shoutmix korang

Yang tulisan biru pulak, korang boleh gantikan dengan HTML gambar comel-comel yang korang nak

Kalau dah siap, klik je butang BIRU tu, yang ade tulisan SAVE..aha

Dah siap pon..

Option Lain:

yang tulisan biru tu, mungkin korang boleh gantikan dengan kod lain yang korang suke. Antaranya:

http://i160.photobucket.com/albums/t189/loonybee/clickhere.gif

http://i891.photobucket.com/albums/ac118/Deathwish_Zero/ClickHere.jpg

http://i662.photobucket.com/albums/uu342/Tomicdawg/thclickheretochat.jpg

Korang boleh carik banyak lagi kod image yang lain di Photobucket, Flickr, Picasa.

Tak pun, korang kalau kreatif, editlah image korang sendiri kat photoshop, photoescape, picasa ke hape. then boleh upload ke Web Photo Sharing spt: Photobucket, Flickr, Picasa atau berbagai-bagai lagi.

SELAMAT MENCUBA!!