Ir al contenido principal

Blogger - Wordpress - Iconos sociales con efecto Pop Up

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.
Etiquetas:

Entradas populares de este blog

Cómo desarrollar un algoritmo que permita botar la basura

Crear un algoritmo para botar la basura puede parecer sencillo, pero es una excelente manera de introducir conceptos de programación y automatización. A continuación, te presento un ejemplo de algoritmo en pseudocódigo, seguido de un artículo que explica su funcionamiento. Algoritmo en Pseudocódigo: Botar la Basura Inicio Si hay basura en el bote Si el bote está lleno Llevar el bote a la zona de recolección Fin Si Si es día de recolección Colocar el bote en la acera Fin Si Fin Si Fin Artículo: Automatizando la Tarea de Botar la Basura Introducción En la vida diaria, las tareas repetitivas como botar la basura pueden consumir tiempo valioso que podríamos dedicar a actividades más productivas o placenteras. La automatización de estas tareas mediante algoritmos no solo nos ahorra tiempo, sino que también nos permite introducir eficiencia y consistencia en nuestras rutinas diarias. El Algoritmo de Botar la Basura El algoritmo presentado es un conjunto de ins...
Publicar un comentario
Ver todo »

Compartir presentaciones en línea con SlideShare

Si eres de los usuarios que suelen trabajar en equipo, sabes de lo difícil que a veces resulta compartir la información relativa al trabajo que estamos realizando, muchas veces seguramente nos ha sucedido que a algunos miembros del equipo, o no les ha llegado la información, o directamente la han perdido. Y nuevamente debemos crear un correo, adjuntarles el archivo y esperar a que salga de la bandeja. Aburrido y cansador, sobre todo en el caso de las pesadas presentaciones.
Publicar un comentario
Ver todo »

Pasos Para Instalar Windows XP

Cuando nos hablan de instalar sistemas operativos, creemos que es muy difícil y que seguramente no seremos capaces de de hacerlo solos. Pues me he tomado a la tarea de realizar este pequeño tutorial para demostrarles paso a paso que no es tan complejo como parece. Para que se ahorren un buen dinerito a la hora de enfrentarse una instalación promovida por un daño en el disco duro o quizás por un virus informático.
Publicar un comentario
Ver todo »