Magazine

Iconos de redes sociales con efecto de opacidad

Publicado el 21 diciembre 2013 por Jonathan Lr @NovedadBlogger

Redes Sociales con efecto de Opacidad
Todos sabemos que tener iconos como estos es darle la oportunidad a los seguidores de vuestro blog que te sigan en las diferentes redes sociales que te encuentras y, de esa forma pueden ser notificados cada vez que haces una publicación.
Es por ello que hoy e decidido compartir con todos ustedes este gadget que es llamado Nuestras Redes Sociales, bautizado así por su creador Hayder Juvinao.

Modifiqué y agregué más iconos por la razón de que el anterior diseño no era muy llamativo y tenía un fondo blanco que no se adaptaba a las plantillas oscuras, de tal modo que quedaba así:
Asi era el anterior diseño de estos gadgets Diseño anterior de los iconos
Ahora que reemplazé y agregué más iconos, en las plantillas oscuras quedará así: Vista Previa en las plantilla oscuras    Los iconos que se muestran son de Facebook, Twitter, Google+, RSS, Youtube y Pinterest, para añadirlos solo sigue los siguientes pasos.
Antes de agregar el gadget, nos vamos a Plantilla, Editar HTML, adentro presionamos CTRL+F y buscamos:
]]></b:skin>

Y antes añadimos:
#social img:hover {
opacity: 0.6;
}

Despues:
Guardar Plantilla
Ahora solo te queda ir a Diseño, Añadir Gatget, HTML/Javascript, y adentro pega:
<div style="text-align: center;">
<div id="social">
<a href='#Facebook' target="_blank"><img alt="Facebook" src="http://3.bp.blogspot.com/-bWoqamtqDHY/UoesOrazX8I/AAAAAAAACjA/APtPkJWQmi4/s1600/Facebook.png" title="Siguenos en Facebook" /></a>
<a href='#Twitter' target="_blank"><img alt="Twitter" src="http://3.bp.blogspot.com/-Uk9-BVlQBRw/UoesPJ3TLpI/AAAAAAAACjQ/PdMlVj5_zWM/s1600/Twitter.png" title="Siguenos en Twitter" /></a>
<a href='#GooglePlus' target="_blank"><img alt="Google+" src="http://1.bp.blogspot.com/-0w2CkNfTtRg/UoesOw0vSAI/AAAAAAAACjE/DyiGFXsa6Y0/s1600/Google-Plus.png" title="Siguenos en Google Plus" /></a>
<a href='#RSS' target="_blank"><img alt="RSS" src="http://3.bp.blogspot.com/-Qme4ohe7C04/Uofel4ihYcI/AAAAAAAACkU/9cCxtC6GBxE/s1600/RSS.png" title="Suscribete a nuestro RSS" /></a>
<a href='#Youtube' target="_blank"><img alt="Youtube" src="http://1.bp.blogspot.com/-RZFZ94Hwqk0/UoesP6CGyQI/AAAAAAAACjc/9F5mFHX8VNc/s1600/Youtube.png" title="Suscribete a mi canal de Youtube" /></a>
<a href='#Pinterest' target="_blank"><img alt="Pinterest" src="http://3.bp.blogspot.com/-keghdfp_p3U/Uofm8fZFqpI/AAAAAAAACk0/icg4pctKXHw/s1600/Pinterest.png" title="Siguenos en Pinterest" /></a></div></div>

Lo coloreado en naranja es la URL a reemplazar
Puedes cambiar el texto que se mostrará al pasar el cursor, modificando lo que está en azul.
El resultado será...
Facebook   Twitter   Google+
Youtube   RSS   Pinterest PASA EL CURSOR SOBRE LOS ICONOS
Vía/MilTrucosBlogger

También podría interesarte :

Volver a la Portada de Logo Paperblog

Quizás te interesen los siguientes artículos :

Por  Mercedes Leticia Elizondo
publicado el 26 octubre a las 17:44

hola muy buena explicacion la verdad me sirvio d mucho lo pude hacer pero me falto de instagram no lo tienes no?