Aviso Deslizante Clic Aqui [Como El Mio]

bLogueritas como estan n.n? como ven por fin les pongo este tuto *v* ~~
no sabia como ponerle de titulo xD haha pero wenoo ya quedo y para irnos rapidito xD

empezamos con los pasitos para que este truco quede en tu blog oki ^^

por si no sabes cual tuto les pondre ahorita da clic en la imagen que esta aqui al costado de mi blog el osito te aparecera una ventanita.

es algo muy sencillito ^^

anda a diseno Elementos de Pagina Anadir Gadget Html/Javascript

copia el siguiente codigo y pegalo en el gadget

<center>
<style type="text/css">
#at{
position:fixed;
right:450px;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url();
}
.atcontent{
float:left;
border:2px solid #ffaad5;
background:#FFFFFF 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;">
<img src="URL DE LA IMAGEN DE TU PREFERENCIA" />
AQUI TUS ESCRITOS O MENSAJES
</span></div>
</div>
</div>
<br />
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><div >
<span ></span></div></a></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 TU IMAGEN CLIC AQUI" alt="PUSH" title="Click"/></a>
</center>

luego das guardar

Rojo: Grosor del borde

Verde: tipo de borde

Naranja: Color del borde

Lila: color del fondo de la caja

Azul: Ubicacion o alineacion en que quieres que esten tus escritos
-- Center : Si quieres que esten centrados
-- Left: Si quieres que esten a la izquierda
-- Right: Si los quieres a la derecha

Cafe: esta es opcional es solo si acaso quieres poner una imagen o algo asi (como veras yo tengo la imagen de las reglas)

Rosa palido: Tus escritos o mensajes

MOrado: Url de la direccion de tu imagen Clic aqui (como la del osito)

Para escribir tus escritos los tienes que poner entre <br/>:

ejemplo:

hola bienvenido a mi blog
<br/>
espero sea de tu agrado...y sigas visitandome ^^
<br/>
no olvides dejar tu comentario
<br/>
bai y que tengas buen dia n.n

Ahora algunas que hice espero les gusten y si las toman no olviden los creditos ^^

http://i1063.photobucket.com/albums/t514/Annyz-Kawaii/clicaquibyannyzblog.png



http://i1063.photobucket.com/albums/t514/Annyz-Kawaii/clicaquibyannyzblog3.png



http://i1063.photobucket.com/albums/t514/Annyz-Kawaii/clicaquibyannyzblog6.png


http://i1063.photobucket.com/albums/t514/Annyz-Kawaii/clicaquibyannyzblog4.png



http://i1063.photobucket.com/albums/t514/Annyz-Kawaii/clicaquibyannyzblog5.png



http://i1063.photobucket.com/albums/t514/Annyz-Kawaii/clicaquibyannyzblog2.png


http://i1063.photobucket.com/albums/t514/Annyz-Kawaii/clicaquibyannyzblog7.png


http://i1063.photobucket.com/albums/t514/Annyz-Kawaii/clicaquibyannyzblog8.png

No copies mis tutoriales si tomas algo no olvides los creditos xD