Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje16-08-2015, 22:45 (UTC)    
Título del mensaje: [CSS + HTML] Iconos de redes sociales c/efecto

[CSS + HTML] ïconos de redes sociales c/efecto

¡Hola amigos! En este post les voy a enseñar a añadir los siguientes íconos de las distintas redes sociales a su página. Es muy simple y rápido así que espero que les sirva y puedan entender. Ya saben que en caso de problemas, no duden en preguntarme.

VISTA PREVIA



CÓDIGO CSS

Copiar y pegar el siguiente código entre las etiquetas <style> en algunos de los boxes que se encuentran en la configuración avanzada de los 'Ajustes de Diseño'. Si usted usa el diseño "CSS-Design" que ofrece el servicio, el código debe pegarlo en "CSS-Design sin Style Tags" ubicado también en la configuración avanzada de 'Ajustes de Diseño'.

Cita:
a.socials {
display: inline-block;
margin-right: 0;
text-align: left;
text-indent: -9999px;
}
a.socials {
background-position: left bottom !important;
height: 34px;
width: 34px;
}

a.socials:hover {
background-position: left top !important;
}

a.facebook {
background: url("http://img.webme.com/pic/d/design-adri/facebook.png") no-repeat scroll 0 0 transparent;
}
a.rss {
background: url("http://img.webme.com/pic/d/design-adri/rss.png") no-repeat scroll 0 0 transparent;
}
a.delicious {
background: url("http://img.webme.com/pic/d/design-adri/delicious.png") no-repeat scroll 0 0 transparent;
}
a.flickr {
background: url("http://img.webme.com/pic/d/design-adri/flickr.png") no-repeat scroll 0 0 transparent;
}
a.stumble {
background: url("http://img.webme.com/pic/d/design-adri/stumble.png") no-repeat scroll 0 0 transparent;
}
a.vimeo {
background: url("http://img.webme.com/pic/d/design-adri/vimeo.png") no-repeat scroll 0 0 transparent;
}
a.youtube {
background: url("http://img.webme.com/pic/d/design-adri/youtube.png") no-repeat scroll 0 0 transparent;
}
a.twitter {
background: url("http://img.webme.com/pic/d/design-adri/twitter.png") no-repeat scroll 0 0 transparent;
}
a.linkedin {
background: url("http://img.webme.com/pic/d/design-adri/linkedin.png") no-repeat scroll 0 0 transparent;
}
a.skype {
background: url("http://img.webme.com/pic/d/design-adri/skype.png") no-repeat scroll 0 0 transparent;
}
a.lastfm {
background: url("http://img.webme.com/pic/d/design-adri/lastfm.png") no-repeat scroll 0 0 transparent;
}
a.myspace {
background: url("http://img.webme.com/pic/d/design-adri/myspace.png") no-repeat scroll 0 0 transparent;
}
a.tumblr {
background: url("http://img.webme.com/pic/d/design-adri/tumblr.png") no-repeat scroll 0 0 transparent;
}
a.digg {
background: url("http://img.webme.com/pic/d/design-adri/digg.png") no-repeat scroll 0 0 transparent;
}
a.quora {
background: url("http://img.webme.com/pic/d/design-adri/quora.png") no-repeat scroll 0 0 transparent;
}
a.dribble {
background: url("http://img.webme.com/pic/d/design-adri/dribble.png") no-repeat scroll 0 0 transparent;
}
a.forrst {
background: url("http://img.webme.com/pic/d/design-adri/forrst.png") no-repeat scroll 0 0 transparent;
}
a.google {
background: url("http://img.webme.com/pic/d/design-adri/google.png") no-repeat scroll 0 0 transparent;
}
a.ember {
background: url("http://img.webme.com/pic/d/design-adri/ember.png") no-repeat scroll 0 0 transparent;
}
a.pinterest {
background: url("http://img.webme.com/pic/d/design-adri/pinterest.png") no-repeat scroll 0 0 transparent;
}
a.bookmark {
background: url("http://img.webme.com/pic/d/design-adri/bookmark.png") no-repeat scroll 0 0 transparent;
}


CÓDIGO HTML

Copie y pegue el siguiente código html en donde desea que aparezcan los íconos, están ordenados con respecto a la imagen de muestra. Solo debe reemplazar lo que está en verde por la url de su red social.

Cita:
<a href="#" class="socials facebook" title="Facebook">facebook</a>
<a href="#" class="socials rss" title="Rss">rss</a>
<a href="#" class="socials twitter" title="Twitter">twitter</a>
<a href="#" class="socials youtube" title="Youtube">youtube</a>
<a href="#" class="socials delicious" title="Delicious">delicious</a>
<a href="#" class="socials vimeo" title="Vimeo">vimeo</a>
<a href="#" class="socials flickr" title="Flickr">flickr</a>
<a href="#" class="socials stumble" title="Stumble">stumble</a>
<a href="#" class="socials linkedin" title="Linkedin">linkedin</a>
<a href="#" class="socials skype" title="Skype">skype</a>
<a href="#" class="socials lastfm" title="Lastfm">lastfm</a>
<a href="#" class="socials myspace" title="Myspace">myspace</a>
<a href="#" class="socials tumblr" title="Tumblr">tumblr</a>
<a href="#" class="socials digg" title="Digg">digg</a>
<a href="#" class="socials quora" title="Quora">quora</a>
<a href="#" class="socials dribble" title="Dribble">dribble</a>
<a href="#" class="socials forrst" title="Forrst">forrst</a>
<a href="#" class="socials google" title="Google">google</a>
<a href="#" class="socials ember" title="Ember">ember</a>
<a href="#" class="socials pinterest" title="Pinterest">pinterest</a>


===================================================================================================

Eso fué todo amigos, espero que les haya gustado.
Saludos!


Ultima edición por nesbet el Dom Ago 16, 2015 6:51 pm; editado 2 veces
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group