Espectaculares iconos sociales con efecto Pop Up para Blogger y Wordpress

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.

Comentarios

Publicar un comentario

Tags: download, bajar, descargar, bajar Antivirus, Servidores, Para, Windows, Server, 2008, antivirus servidores, antivirus server 2008 full, full, antivirus full, programas full, epson, hp, toshiba, lenovo, dell, videos, peliculas, series, ver, editar, blogger, taringa, identi, lexmark.

Entradas más populares de este blog

Adjustment Program Epson reset , Reseteador Epson o Reset de Impresoras Epson Stylus

Imagen
Te ha pasado que de un memento a otro te aparece en tu impresorea epson stylus el siguiente mensaje `”tiene una parte que esta al fin de suvida util dirigase a algun servicio autorizado epson” o tambien “las almohadillas de tinta de la impresora están al final de su vida útil. diríjase al soporte técnico de epson”. Pues bien estos programas resetean la impresora y dejan los contadores internos de la tarjeta principal en cero, el cual varia dependiendo cual sea el modelo de tu impresora.   !ADVERTENCIA estos reseteador de impresoras epson puede dejar inservible tu impresora así que te recomiendo que solo y exclusivamente uses la opción de  wasted ink pad counter  y no juegues con este programa! Ahora para poder descargar los  Adjustment Program, Resetter, Reseteador o Reset Epson  simplemente los links que se muestran a continuacion. Por favor si encuentras algún adjustment Program o reseteador que no puedas usar o descargar en la zona de descargas déjame un comentario
Leer más

Enrutar Extension a Numero Externo en Elastix

Imagen
En varias instalaciones que he realizado, me han solicitado que asigne un numero de extension interna a numeros de lineas moviles (celulares) e incluso lineas fijas externas que no entran a la PBX-IP Elastix, esto con el proposito de facilitar la marcarcion a los usuarios internos,  ya que es mas facil recordar un numero de extension de 3 o 4 digitos que un numero de linea movil de 8 o mas digitos, asi como a los clientes, que en lugar de marcar a un numero celular que por lo general la llamada es mas cara, marcan a un numero de linea fija que automaticamente se enruta al celular o lineas fijas externas. Una manera facil de hacer esto, es desviar el telefono fijo asignado al empleado, la mayoria de los telefonos IP tienen esta funcion; pero que sentido tiene colocar y gastar en un telefono IP, para una persona que pasa la mayor cantidad del tiempo fuera de la oficina y que la mayoria de las llamadas las contesta en el celular. Un uso practico de esta solucion es para personal de e
Leer más

Aprende a Leer con pipo 1 y 2 (MEGA) 1 LINK

Imagen
INFORMACIÓN Este es mi primer aporte, espero que les guste.  Aprende a leer con Pipo es un método interactivo y progresivo para aprender a leer. El programa es muy flexible para permitir ser adaptado a las diferentes metodologías de los maestros y a los diferentes ritmos de aprendizaje de los niños. Las diferentes secciones de esta cartilla para aprender a leer se presentan ambientadas en el mar, en diversas islas, donde el niño aprenderá de forma progresiva cada letra, sus sílabas, las palabras y finalmente las frases. En cada sección aparecen diferentes juegos donde se pondrá en práctica todo lo visto.
Leer más