martes, 2 de agosto de 2011

Botones Animados con Efecto Corredizo con Mootools para el Blog

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

1 comentarios:

ozmar ugarte dijo...

hola estoy haciendo una pagina en html y esos botones son fantasticos en el 3 y 4 paso como lo haria desde mi pagina?

Publicar un comentario

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Best Buy Coupons