[Tutorial]Como hacer un cbox flotante con mensaje

holis bueno traigo un tuto muy cute para las que lo queréis saber n.n espero que os guste lo primero

es añadir un nuevo gadget jabascrip y pegar en la cajuita este código

<center>
<style type="text/css">
#at{
position:fixed;
right:250px;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url();
}
.atcontent{
float:left;
border:none;
background: repeat-x bottom center scroll ;
-moz-border-radius:20px;
padding:10px;
}
</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.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
}
</script>
<div id="at">
<div class="attab" onclick="showHideAT()"> </div>
<div class="atcontent">
<div align="center">
<div style="background:url() no-repeat;">
<div style="text-align: center;">
<div class="separator" style="clear: both; text-align: center;">
<br />
<form name="news">
<textarea rows="1" style="border:3px double #E3CEF6;-moz-box-shadow: 0 0 15px 5px #E3CEF6;
-webkit-box-shadow: 0 0 15px 5px #E3CEF6;border-radius:7px;font-size:12px;font-family:century gothic;cursor:crosshair;" cols="30" name="news2" wrap="virtual"></textarea>
<script language="JavaScript">
var newsText = new Array();
newsText[0] = "TEXTO";
newsText[1] = "TEXTO";
newsText[2] = "TEXTO";
newsText[3] = "TEXTO";
newsText[4] = "TEXTO";
newsText[5] = "TEXTO";
newsText[6] = "TEXTO";
newsText[7] = "TEXTO";

var ttloop = 1; //
var tspeed = 70; //
var tdelay = 1000; //
// ------------- CANNOT EDITING ------------- \
var dwAText, cnews=0, eline=0, cchar=0, mxText;
function doNews() {
mxText = newsText.length - 1;
dwAText = newsText[cnews];
setTimeout("addChar()",1000)
}
function addNews() {
cnews += 1;
if (cnews <= mxText) {
dwAText = newsText[cnews];
if (dwAText.length != 0) {
document.news.news2.value = "";
eline = 0;
setTimeout("addChar()",tspeed)
}
}
}
function addChar() {
if (eline!=1) {
if (cchar != dwAText.length) {
nmttxt = ""; for (var k=0; k<=cchar;k++) nmttxt += dwAText.charAt(k);
document.news.news2.value = nmttxt;
cchar += 1;
if (cchar != dwAText.length) document.news.news2.value += "_";
} else {
cchar = 0;
eline = 1;
}
if (mxText==cnews && eline!=0 && ttloop!=0) {
cnews = 0; setTimeout("addNews()",tdelay);
} else setTimeout("addChar()",tspeed);
} else {
setTimeout("addNews()",tdelay)
}
}
doNews()
</script>
</form>
</div>
Cbox CODIGO</div>
</div>
<br />
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><div >
<span ></span></div></a></div>
</div></div>
<script type="text/javascript">
var at = document.getElementById("at");
at.style.top = (-200-at.offsetWidth).toString() + "px";
</script>
<a href="javascript:void(0);"onclick="showHideAT()"/><img class="expando" src="Url de la imagen de cbox" alt="PUSH" title="Click"style='position:fixed; top:0; right:50px;'/></a>
</div></center>

Amarillo:El color de la caguita del mensaje

Naranja:Codigo de la cbox

Rojo:url de la imagen de cbox 

Creditos

Mensaje:Annyz

Cbox flotante:Nekitha