Mil Trucos Blogger

Espectaculares iconos sociales con efecto Pop Up para Blogger y WordPress

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

Los iconos sociales son una forma muy ingeniosa de ganar seguidores para nuestras redes sociales, es por ello que hoy les traigo un set de iconos muy buenos para nuestros blogs de Blogger y WordPress.

Pues ver el truco en acción en este blog de pruebas.
Añadiendo el truco en Blogger
 
Agrega en Diseño, Añadir gadget, HTML/JavaScript lo siguiente:
<!--Rss Feed-->
<a class="spice-popout" rel="nofollow" href="RSS-FEED-URL" target="_blank"><img src="http://i.imgur.com/7lsUogp.png" /></a>
<!--Email-->
<a class="spice-popout" rel="nofollow" href="EMAIL-URL" target="_blank"><img src="http://i.imgur.com/oJeNikj.png" /></a>
<!-- Google Plus-->
<a class="spice-popout" rel="nofollow" href="GOOGLE-PLUS-URL" target="_blank"><img src="http://i.imgur.com/F70aY6r.png" /></a>
<!--Facebook-->
<a class="spice-popout" rel="nofollow" href="FACEBOOK-URL" target="_blank"> <img src="http://i.imgur.com/g4KQ38R.png" /></a>
<!--Twitter-->
<a class="spice-popout" rel="nofollow" href="TWITTER-URL" target="_blank"> <img src="http://i.imgur.com/rRbcRlQ.png" /></a>
<!--LinkedIn-->
<a class="spice-popout" rel="nofollow" href="LINKEDIN-URL" target="_blank"><img src="http://i.imgur.com/dofbMIX.png" /></a>
<!--YouTube-->
<a class="spice-popout" rel="nofollow" href="YOUTUBE-URL" target="_blank"><img src="http://i.imgur.com/OukhzWK.png" /></a>
<!--Skype-->
<a class="spice-popout" rel="nofollow" href="SKYPE-URL" target="_blank"><img src="http://i.imgur.com/8c35IfD.png" /></a>
<style>
.spice-popout{height:48px; width:48px; margin:10px; float:left; display:inline-block; -webkit-transition:all ease 0.5s; -moz-transition:all ease 0.5s; -o-transition:all ease 0.5s; -ms-transition:all ease 0.5s; transition:all ease 0.5s}
.spice-popout img{border-radius:50%; margin:8px; width:100%; box-shadow:0px 0px 4px 1px rgba(0,0,0,0.8); -webkit-transition:all ease 0.5s; -moz-transition:all ease 0.5s; -o-transition:all ease 0.5s; -ms-transition:all ease 0.5s; transition:all ease 0.5s}
.spice-popout img:hover{margin:0px; box-shadow:6px 6px 4px 4px rgba(0,0,0,0.3)}
</style>

Ahora solo reemplaza lo que esta resaltado en azul por lo que se indica.

Añadiendo el truco en WordPress 

Para añadir el truco a WordPress, solo tienes que ir al escritorio de tu blog, ir a Widget, y en Texto agregar lo siguiente:

<!--Rss Feed-->
<a class="spice-popout" rel="nofollow" href="RSS-FEED-URL" target="_blank"><img src="http://i.imgur.com/7lsUogp.png" /></a>
<!--Email-->
<a class="spice-popout" rel="nofollow" href="EMAIL-URL" target="_blank"><img src="http://i.imgur.com/oJeNikj.png" /></a>
<!-- Google Plus-->
<a class="spice-popout" rel="nofollow" href="GOOGLE-PLUS-URL" target="_blank"><img src="http://i.imgur.com/F70aY6r.png" /></a>
<!--Facebook-->
<a class="spice-popout" rel="nofollow" href="FACEBOOK-URL" target="_blank"> <img src="http://i.imgur.com/g4KQ38R.png" /></a>
<!--Twitter-->
<a class="spice-popout" rel="nofollow" href="TWITTER-URL" target="_blank"> <img src="http://i.imgur.com/rRbcRlQ.png" /></a>
<!--LinkedIn-->
<a class="spice-popout" rel="nofollow" href="LINKEDIN-URL" target="_blank"><img src="http://i.imgur.com/dofbMIX.png" /></a>
<!--YouTube-->
<a class="spice-popout" rel="nofollow" href="YOUTUBE-URL" target="_blank"><img src="http://i.imgur.com/OukhzWK.png" /></a>
<!--Skype-->
<a class="spice-popout" rel="nofollow" href="SKYPE-URL" target="_blank"><img src="http://i.imgur.com/8c35IfD.png" /></a>
<style>
.spice-popout{height:48px; width:48px; margin:10px; float:left; display:inline-block; -webkit-transition:all ease 0.5s; -moz-transition:all ease 0.5s; -o-transition:all ease 0.5s; -ms-transition:all ease 0.5s; transition:all ease 0.5s}
.spice-popout img{border-radius:50%; margin:8px; width:100%; box-shadow:0px 0px 4px 1px rgba(0,0,0,0.8); -webkit-transition:all ease 0.5s; -moz-transition:all ease 0.5s; -o-transition:all ease 0.5s; -ms-transition:all ease 0.5s; transition:all ease 0.5s}
.spice-popout img:hover{margin:0px; box-shadow:6px 6px 4px 4px rgba(0,0,0,0.3)}
</style>

Ahora solo reemplaza lo que esta resaltado en azul por lo que se indica.

Como ves, es un truco muy elegante y fácil de agregar, así que no pierdas mas tiempo y agregalo en tu blog.
0
Shares

Relacionados...

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

9 Comentarios

  1. Junio 27, 2013    

    Hola: ¿cómo se añadirían los iconos de Pinterest , de Instagram y de Bloglovin a éstos? gracias.

    • Junio 27, 2013    

      Para agregarlo tocaría con otro pack de iconos, pero con gusto haré otro pack de iconos.

      Saludos

  2. Agosto 29, 2013    

    Como los pongo de forma orizontal?
    Gracias

    • Septiembre 4, 2013    

      Editando el CSS, ahora no tengo mucho tiempo pero cuando lo tenga mirare este truco.

      Saludos

  3. Octubre 12, 2013    

    Muchisimas gracias, me llevo un icono a mi blog…lo estaba buscando como loca y no he sido capaz de hacerlo hasta que he dado con tu pagina….Saludos !

  4. Enero 28, 2014    

    Hola! Lo primero darte las gracias por este blog porque estoy diseñando un nuevo blog y me está dando una ayuda tremenda.
    Está genial este gadget, lo he modificado a mi blog y he suprimido las redes que no tenía y he añadido botón de instagram (que podéis usar desde aquí http://i39.tinypic.com/10rljj8.png), pero no consigo que los iconos me redireccionen a las redes sociales… qué puedo estar haciendo mal?
    Un saludo!

  5. Enero 28, 2014    

    En concreto, por ejemplo, el icono de twitter me redirecciona a (miblog).blogspot.com.es/TWITTER-URL y así con cada uno de ellos 😮

  6. Enero 28, 2014    

    jajajaja. vale, no había guardado los cambios!!!! Es muy tarde y mi mente no da más de si. Siento las molestias. Muchas gracias, Un saludo! (m)

    • Enero 28, 2014    

      Amigo solo era un error tuyo :-d pero menos mal te diste cuenta.

      Saludos

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo