Divisor

Éste sitio web usa cookies, puedes ver la política de cookies, Aquí. ⤵ ⤵


Añadir Botones Sociales para Blogger con Efecto CSS3




Hace ya unos días me preguntaron por los botones sociales que tengo en la parte de abajo de este blog, en concreto en la parte del footer dónde está la publicidad de Google Adsense, al lado, hay unos botones sociales donde dice: Hazte Fan!. Estos botones sirven para que se hagan fan o me sigan a través de redes sociales, e incorpora un bonito efecto hover con CSS3, el efecto CSS del que hablo y anexiona estos efectos, son: transition (transición), border radius (bordes redondeados) y opacity (opacidad). Ahora si te parece voy a agregar una demostración, aquí mismo, abajo, podrás ver el efecto hover pasando el cursor por las img:






Ahora que has visto el efecto y los botones de ejemplo, si te gustan los botones y su efecto, lo puedes implantar por ejemplo en Blogger, fácil, en un sólo paso.


  1. Ves a Blogger ⇔ Diseño ⇔ Añadir Gadget ⇔ Html/Javascript y copia y pega:

<style>
/* INICIO BOTONES SOCIALES CON CSS DE AIZUM BLOG */
.fb-icon, .gp-icon, .t-icon, .rss-icon {
    -moz-transition: all 300ms ease-in-out 0s;
    -webkit-transition: all 300ms ease-in-out 0s;
    -o-transition: all 300ms ease-in-out 0s;
    transition: all 300ms ease-in-out 0s;
    border: 3px solid #FFFFFF;
    border-radius: 40px;
    float: left;
    height: 40px;
    margin: 0 7px 0 0;
    opacity: 0.8;
    width: 40px;
}

.fb-icon:hover, .gp-icon:hover, .t-icon:hover, .rss-icon:hover {
    border-radius: 0;
    opacity: 1;
}
.fb-icon{background:url("https://lh5.googleusercontent.com/-p6TmohGfdWw/UFTGXVqPqcI/AAAAAAAAC3A/-oEozS3JFk4/h120/f-logo.jpg") no-repeat scroll 0 0 transparent}
.gp-icon{background:url("https://lh5.googleusercontent.com/-SnuBBc0hTkc/UFTGXwXRZLI/AAAAAAAAC3I/b6puyRDIVqM/h120/g-logo.jpg") no-repeat scroll 0 0 transparent}
.t-icon{background:url("https://lh3.googleusercontent.com/-YiccwI4qX3c/UFTGYlUgsPI/AAAAAAAAC3Y/s-DOj47CEws/h120/t-logo.jpg") no-repeat scroll 0 0 transparent}
.rss-icon{background:url("https://lh4.googleusercontent.com/-LJF3GPv9d3g/UFTGYTLODQI/AAAAAAAAC3Q/U-Aa1tORhW0/h120/rss-logo.jpg") no-repeat scroll 0 0 transparent}
/* FIN BOTONES SOCIALES CON CSS DE AIZUM BLOG */</style>

<div id='contenido-social'>
<a class='fb-icon' href='url de nuestra cuenta de Facebook'/>
<a class='gp-icon' href='url de nuestra cuenta de Google+'/>
<a class='t-icon' href='url de nuestra cuenta de Twitter'/>
<a class='rss-icon' href='url de la cuenta de RSS'/>
</a></a></a></a></div>


Aizum Blog, viernes, junio 28, 2013


Divisor Star

✏ Buscador!

En las redes ⤵

✏ Vídeos!

 

Publicidad!

Subir hacia arriba ▲ Modificated & Designed by Iván Dangerfield © 2014. Converted by Bloggertheme9