5 de septiembre de 2016

Tutorial: Botones de Redes Sociales con transiciones CSS3


Como todo lunes llega el TUTORIAL!!! bueno hoy les enseño a poner una bonita forma de poner sus redes sociales.  Estos botones son para enlazar tus redes sociales: Facebook, Twitter, Google+, RSS Feed, y suscripción por correo.
Lo que a muchos les resulta atractivo es el efecto que tienen cuando se pasa el cursor sobre ellos, ya que el ícono se mueve hacia arriba mientras el fondo cambia de color. el tutorial lo cogí de CIUDAD BLOGGER... por si os gustan a pasarse a ver otros tutoriales.

VAMOS A VERLOS
Este gadget lo veremos en dos versiones, uno con 5 botones pequeños alineados de forma horizontal, y otro de 4 botones un poco más grandecitos y alineados en dos columnas. Están hechos con sprites y transiciones CSS3.

Cualquiera de las dos versiones las vamos a colocar de un solo paso, es decir, pegando tanto los estilos como la estructura HTML dentro de un gadget, ¿por qué? por pereza nada más, pero quien quiera poner los estilos en su lugar correspondiente de la plantilla podrá hacerlo sin ningún problema.
Entonces, para ponerlos en tu blog, entra en Diseño | Añadir un gadget | HTML/Javascript y ahí pega el código de los botones que más te gusten.
Este es la primera versión de 5 botones.


Este es el código que deberían pegar en el gadget (debes dar click en HTML )

Aqui el codigo:

<style>
/* Botones de Redes Sociales - Ciudad Blogger */
.social_bookmarks_container {
width:100%;
height:65px;
padding:0;
position:relative;
}
.social_bookmarks {
position:relative;
float:left;
margin:0;
padding:0;
}
.social_bookmarks li {
margin:0 0 1px 1px;
height:57px;
width:57px;
list-style:none;
float:left;
padding:0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out; 
transition: all 0.4s ease-in-out;
}
.social_bookmarks li a {
float:left;
width:57px;
line-height:24px;
display: block;
text-indent: -99999px;
margin:0px;
outline: none;
padding:0;
min-height:57px;
height:100%;
text-decoration:none;
}
.social_bookmarks .iconrss{background: #A4A4A4 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg22odxC0Fpn47gdwYtenFtmvJpCMC0Iu_7WhbyJmkTOsIRMRgCycAuGnU8m7N23xGEDkPI4AAGD4duqSZ1oHeqF_BhM8D-eruPZUm_5L_ysixJXd386FfinIu8uoKANcgdINhQ2gHmMp9L/s114/icon-rss.png) top left no-repeat;}
.social_bookmarks .iconrssmail{background: #BDBDBD url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV49_WlOGXgNUxf4nqPn-jVXH3LrFPFwfFx6gjlkw5NpSQ7l2MPxx0blcOtHw5DTbWHwjyyi7RzJnWLHaDXighmyj3DqSHPxaPoWIjybznp5ylEPSKCUkkKEGy8cL3trzkjGwULALJd4qz/s114/icon-rssmail.png) top left no-repeat;}
.social_bookmarks .icontwitter{background: #D8D8D8 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM6A79i9wIRN05I3mxKtavcjKFg3WnpeXk2jgRUUztuD9tH8eTBWzmHqeTEi6YbnY6tY_1m6D_uFRXTNKPoTd_7uZ9snn-2-Mayzn3VzQeFu9rWJpvKNhssaueK9n0HlZmAhw9s_vG6Py6/s114/icon-twitter.png) top left no-repeat;}
.social_bookmarks .iconfacebook{background: #E6E6E6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEive9EAc3YfOfSxYssNDL3OUp6r8ly1JfVDsyqKHDHZrdHnlXf4r6A80YTJd_XaRpNSBGMafCg6SbfsTwPIS-QyLtQFHibfPY4UeqooYDibnYemHv-ejiGIT7YC-2IZxg-vnU_GPUOBMUSi/s114/icon-facebook.png) top left no-repeat;}
.social_bookmarks .icongplus{background: #F1F1F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjR__o034qdc6EnLP4kz4uV2chGxeRScjjvf5Q15UU7iXAvrIDQ_8hq5Rky6ImTqCwNieypMy-LchulFvToK_oft8As2fE0ABECF5gNoSreq6oTLt_g98yuFDIwWha-xgrExvTlZ0xmUNZ/s114/icon-gplus.png) top left no-repeat;}
.social_bookmarks .iconfacebook:hover{background-position:center -57px; background-color: #37589b;}
.social_bookmarks .icontwitter:hover {background-position:center -57px; background-color: #46d4fe;}
.social_bookmarks .icongplus:hover {background-position:center -57px; background-color: #de5a49;}
.social_bookmarks .iconrss:hover{background-position:center -57px; background-color: #ff6600;}
.social_bookmarks .iconrssmail:hover{background-position:center -57px; background-color: #FFDE00;}
.social_bookmarks li:hover a{background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_567qc5YqTGk6sBC0Uo1YRCYydbPjg1o2P5qHtkFGCA8KXb1bzLjN9rBbY2pUbB0p3uDYlJOfiYYfx1ECrdOgQlXKPAE-v29lYl84_4Z6QKpn5Ggoh-ooT-yhLmiBfBoUGwA11wLjlQ-U/s57/icon-social-reflect.png) no-repeat;
}

</style>
<div class='social_bookmarks_container'>
<ul class='social_bookmarks'>
<li class='iconrss'>
<a href='/atom.xml'>
RSS
</a>
</li>
<li class='iconrssmail'>
<a href='http://feedburner.google.com/fb/a/mailverify?uri=NombreDelFeed'>
RSS Mail
</a>
</li>
<li class='icontwitter'>
<a href='http://twitter.com/usuario'>
Twitter
</a>
</li>
<li class='iconfacebook'>
<a href='http://facebook.com/usuario'>
Facebook
</a>
</li>
<li class='icongplus'>
<a href='http://plus.google.com/+usuario/about'>
Google Plus
</a>
</li>
</ul>
</div>

Te explico un poco:
Lo que esta en ROJO es la "url/dirección" de tu red social, te doy un ejemplo:
✯ <a href='http://twitter.com/usuario'>  ➳  <a href='https://twitter.com/ViajeXlosLibros'>

En el caso de <a href='http://feedburner.google.com/fb/a/mailverify?uri=NombreDelFeed'> deberás poner el nombre de tu feed de Feedburner donde se indica, y por supuesto tener activada la suscripción por correo electrónico en Feedburner.


Esta es la otra versión, la de 4 botones.




Deberás hacer exactamente lo mismo que en la pasada pero con el siguiente código:

<style>
/* Botones de Redes Sociales - Ciudad Blogger */
.social_bookmarks_container {
width:176px;
height:176px;
padding:0;
position:relative;
}
.social_bookmarks {
position:relative;
float:right;
margin:0;
padding:0;
}
.social_bookmarks li{
margin:0 0 1px 1px;
height:77px;
width:77px;
list-style:none;
float:left;
padding:0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out; 
transition: all 0.4s ease-in-out;
}
.social_bookmarks li a {
float:left;
width:77px;
line-height:24px;
display: block;
text-indent: -99999px;
margin:0px;
outline: none;
padding:0;
min-height:77px;
height:100%;
text-decoration:none;
}
.social_bookmarks .iconrss{background: #A4A4A4 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg22odxC0Fpn47gdwYtenFtmvJpCMC0Iu_7WhbyJmkTOsIRMRgCycAuGnU8m7N23xGEDkPI4AAGD4duqSZ1oHeqF_BhM8D-eruPZUm_5L_ysixJXd386FfinIu8uoKANcgdINhQ2gHmMp9L/s0/icon-rss.png) top left no-repeat;}
.social_bookmarks .icontwitter{background: #D8D8D8 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM6A79i9wIRN05I3mxKtavcjKFg3WnpeXk2jgRUUztuD9tH8eTBWzmHqeTEi6YbnY6tY_1m6D_uFRXTNKPoTd_7uZ9snn-2-Mayzn3VzQeFu9rWJpvKNhssaueK9n0HlZmAhw9s_vG6Py6/s0/icon-twitter.png) top left no-repeat;}
.social_bookmarks .iconfacebook{background: #E6E6E6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEive9EAc3YfOfSxYssNDL3OUp6r8ly1JfVDsyqKHDHZrdHnlXf4r6A80YTJd_XaRpNSBGMafCg6SbfsTwPIS-QyLtQFHibfPY4UeqooYDibnYemHv-ejiGIT7YC-2IZxg-vnU_GPUOBMUSi/s0/icon-facebook.png) top left no-repeat;}
.social_bookmarks .icongplus{background: #F1F1F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjR__o034qdc6EnLP4kz4uV2chGxeRScjjvf5Q15UU7iXAvrIDQ_8hq5Rky6ImTqCwNieypMy-LchulFvToK_oft8As2fE0ABECF5gNoSreq6oTLt_g98yuFDIwWha-xgrExvTlZ0xmUNZ/s0/icon-gplus.png) top left no-repeat;}
.social_bookmarks .iconfacebook:hover{background-position:center -77px; background-color: #37589b;}
.social_bookmarks .icontwitter:hover {background-position:center -77px; background-color: #46d4fe;}
.social_bookmarks .icongplus:hover {background-position:center -77px; background-color: #de5a49;}
.social_bookmarks .iconrss:hover{background-position:center -77px; background-color: #ff6600;}
.social_bookmarks li:hover a{background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_567qc5YqTGk6sBC0Uo1YRCYydbPjg1o2P5qHtkFGCA8KXb1bzLjN9rBbY2pUbB0p3uDYlJOfiYYfx1ECrdOgQlXKPAE-v29lYl84_4Z6QKpn5Ggoh-ooT-yhLmiBfBoUGwA11wLjlQ-U/s0/icon-social-reflect.png) no-repeat;
}
</style>

<div class='social_bookmarks_container'>
<ul class='social_bookmarks'>
<li class='iconrss'>
<a href='/atom.xml'>
RSS
</a>
</li>
<li class='icontwitter'>
<a href='http://twitter.com/usuario'>
Twitter
</a>
</li>
<li class='iconfacebook'>
<a href='http://facebook.com/usuario'>
Facebook
</a>
</li>
<li class='icongplus'>
<a href='http://plus.google.com/+usuario/about'>
Google Plus
</a>
</li>
</ul>
</div>

¿No te gustan los colores?, es fácil cambiarlos, los códigos hexadecimales que están en ROSA son los colores en su estado normal, y los que están en color AZUL son los colores al pasar el cursor.

Y bueno chicos eso es todo, espero y os haya gustado el tutorial... más adelante os dejare tutoriales de las redes sociales con iconos como los mios :D

Hasta luego!!!

2 comentarios:

  1. Muy interesante la entrada, una vez que te acostumbras con el HTML es bastante sencillo. Me encantan este tipo de posts
    Besos 😘

    ResponderBorrar
    Respuestas
    1. si.. es muy sencillo.. el lio a veces con algunas personas es que no leen con atención y no saben donde pegar o que modificar.. :v

      Borrar

Hola!
El blog es tanto tuyo como mio, yo solo expreso mi opinión y hago ver los libros desde otra perspectiva <3.
Cualquier comentario que no sea ofensivo o SPAM masivo será bienvenido.
Un beso. Felices Lecturas.

Gaby. Con tecnología de Blogger.