Botones Animados con Efecto Corredizo con Mootools para el Blog

Para ofrecer suscripción a los visitantes de nuestro blog, lo primero que se nos ocurre es poner un botón con enlace. Una buena alternativa para llamar más la atención la encontré en el blog de David Walsh donde muestra un botón animado utilizando la librería MooTools. En IE y Opera los botones se muestran cuadrados pero en Firefox y Google Chrome se ve perfectamente, además, el efecto funciona bien en los 4 navegadores. Pueden verlo en mi blog de pruebas.

Para los que no saben que es MooTools, pues se lo digo en pocas palabras, es una librería que nos permite realizar muchos efectos, en otras palabras es algo parecido a jQuery.

Para poner este tipo de botones en tu blog de blogger, primero tienes que tener la librería MooTools v1.2.4 si no la tienes en tu plantilla ve a Diseño > Edición de HTML > con la ayuda del buscador de tu navegador (Ctrl + F) busca la etiqueta </head> y justo antes pega el siguiente código:

<script src='http://sites.google.com/site/pazosblogger/config/pagetemplates/script/mootools-1.2.4.js' type='text/javascript'/>

Ahora añadiremos el script que le dará vida al efecto, pegamos el siguiente código después del código que acabamos de pegar anteriormente antes de </head> :

<script src='http://sites.google.com/site/pazosblogger/config/pagetemplates/script/botonesanimados.js' type='text/javascript'/>

Llego la hora de añadir el código CSS que le dará estilo al botón, con la ayuda del buscador de tu navegador (Ctrl + F) busca la etiqueta ]]></b:skin> y justo antes pega el siguiente código:

.button_wrap{ position:relative; width:225px; height:36px; overflow:hidden; font-weight:bold; font-size:11px; margin:10px;
}
.button_aRight{ width:70px; height:36px; -moz-border-radius:20px; -webkit-border-radius:20px; background-color:#093d6f; color:#fff; top:0px; left:0px; position:absolute; line-height:36px; text-align:right;
}
.button_aRight span{ /* display:none; */ visibility:hidden; padding-right:20px; color:#fff;
}
.button_bRight{ width:64px; height:30px; background-color:#fff; -moz-border-radius:20px; -webkit-border-radius:20px; color:#000; position:absolute; top:3px; left:3px; text-transform:uppercase; line-height:30px; text-align:center; cursor:pointer;
}
.button_bRight span{ color:#008ddd;
}
.button_c{ background-color:#008ddd; color:#fff; text-transform:uppercase;
}
.button_c span{ color:#093d6f;
}

Por último ve a Diseño > Añadir gadget > elije > HTML/Javascript y pega el siguiente código:

<div class="button_wrap">
<a class="button_aRight" id="button_aRight"><span>Sigueme en twiteer</span></a>
<a href="URL-de-tu-enlace" target="_blank" class="button_bRight slidebttn" id="button_bRight">Twitter <span></span></a>
</div>

Pueden poner tantos botones como quieras, en este caso he puesto el código sólo para un botón, pero si es que quieres poner más botones solo tienes que copiar las veces que quieras el último código.

Para cambiar lo que está en color azul del botón, cambia el código de color que está en rojo en el código css, por el código del color que más te guste, les dejo un completo generador de colores.

Lo que está en color amarillo es el texto que se mostrará cuando el botón se despliegue.
Cambia lo que está en color azul por la dirección de tu enlace.
Lo que está en color celeste tienes que poner el nombre del enlace, ese texto será el que se mostrará cuando el botón este sin desplegarse.

Descargar Script