Iconos Sociales con efecto Pop Up

By: Jonathan Lozano on 10:17

Los iconos sociales son una forma muy ingeniosa de ganar seguidores para nuestras redes sociales mediante nuestro blog. Hoy les vengo a traer unos Iconos Sociales que obtienen un efecto Pop Up al pasar el cursor sobre ellos.

Para añadirlo nos vamos a Diseño → Añadir Gadget → HTML/Javascript y pegamos:

<!--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>

Modificamos lo que está en rojo por lo que corresponde.