¿Cómo crear botones de redes sociales sin imágenes?

Nuevo episodio del «El minuto de diseño DIY». Hoy vas a aprender cómo crear sin imágenes una serie de botones para permitir a la gente de acceder a tus perfiles en las redes sociales, desde tu blog.

Episodio nº2: ¿Cómo crear botones de redes sociales sin imágenes?

¿De qué estamos hablando?

Puedes verlo en  mi blog, en la cajita de autores

Cómo crear botones redes sociales en css

Paso o – Créditos y el por qué de este técnica

Yo no soy diseñador ni pretendo serlo nunca. Sólo te pongo a disposición, a mi salsa, una técnica que he podido encontrar en:

  • Los tutoriales de StudioPress
  • En este caso el autor es Brian Gardner, el diseñado en jefe del equipo

Mi idea es que uses estos botones como un widget de texto, de tal forma que puedas colocar fácilmente estos botones en cualquier posición disponible de tu tema. He reducido un poco el tamaño original de los botones.

La ventaja es que te ahorras 6 imágenes que van a cargar en todas las páginas que tienes en la web. Tu blog será un pelín más rápido. Y sobre todo, estos botones son muy molones, ¿no crees?

Paso 1 – El código XHTML

[xhtml]<br />&lt;a class="button-twitter" href="https://twitter.com/ingresos2"&gt;Twitter&lt;/a&gt;<br />&lt;a class="button-googleplus" href="https://plus.google.com/u/0/113367634282121946528/"&gt;Google&lt;/a&gt;<br />&lt;a class="button-facebook" href="https://www.facebook.com/ingresospasivos"&gt;Facebook&lt;/a&gt;<br />&lt;a class="button-linkedin" href="http://www.linkedin.com/in/franckscipion/es"&gt;LinkedIn&lt;/a&gt;<br />&lt;a class="button-pinterest" href="#"&gt;Pinterest&lt;/a&gt;<br />&lt;a class="button-rss" href="http://feeds.feedburner.com/IngresosAlCuadrado"&gt;RSS&lt;/a&gt;<br />[/xhtml]

 

¿Cómo implementar este código HTML en tu propio tema?

  1. Copia el código arriba (pasa tu ratón arriba a la derecha, en la caja del código y haz clic en el primer botón, View Source)
  2. Pega el código en Notepad (o similar) y substituye mis enlaces por los tuyos. Si no usas un servicio, cargarte toda la lina, empezando con <a class=…> y terminando por </a>. Copia de nuevo el código modificado
  3. En tu panel de control de tu blog WordPress, ve a Aparencia/Widgets y arrastra un Widget de Texto en la posición dónde quieres que aparezcan estos botones
  4. Pega el código (CRTL V) en el widget de Texto. Ponle como titulo «Sígueme en las redes sociales» o algo similar
  5. Guarda las modificaciones y pasa a la etapa siguiente

Paso 2 – Las etiquetas de estilo CSS

[css]<br />/*<br />Global Styles<br />------------------------------------------------------------ */<br /><br />a.button-facebook,<br />a.button-googleplus,<br />a.button-linkedin,<br />a.button-pinterest,<br />a.button-rss,<br />a.button-twitter {<br />border-radius: 3px;<br />box-shadow: 0 1px 1px #999;<br />color: #fff;<br />display: inline-block;<br />font-size: 13px;<br />margin: 0 10px 10px 0;<br />margin: 0 1rem 1rem 0;<br />padding: 5px;<br />padding: .5rem;<br />text-align: center;<br />width: 80px;<br />}<br /><br />/*<br />Facebook<br />------------------------------------------------------------ */<br /><br />a.button-facebook {<br />background-color: #2b4170; /* fallback color */<br />background: -moz-linear-gradient(top, #3b5998, #2b4170);<br />background: -ms-linear-gradient(top, #3b5998, #2b4170);<br />background: -webkit-linear-gradient(top, #3b5998, #2b4170);<br />border: 1px solid #2b4170;<br />text-shadow: 0 -1px -1px #1f2f52;<br />}<br /><br />a.button-facebook:hover {<br />background-color: #3b5998; /* fallback color */<br />background: -moz-linear-gradient(top, #2b4170, #3b5998);<br />background: -ms-linear-gradient(top, #2b4170, #3b5998);<br />background: -webkit-linear-gradient(top, #2b4170, #3b5998);<br />}<br /><br />/*<br />Google+<br />------------------------------------------------------------ */<br /><br />a.button-googleplus {<br />background-color: #c33219; /* fallback color */<br />background: -moz-linear-gradient(top, #e64522, #c33219);<br />background: -ms-linear-gradient(top, #e64522, #c33219);<br />background: -webkit-linear-gradient(top, #e64522, #c33219);<br />border: 1px solid #c33219;<br />text-shadow: 0 -1px -1px #972412;<br />}<br /><br />a.button-googleplus:hover {<br />background-color: #e64522; /* fallback color */<br />background: -moz-linear-gradient(top, #c33219, #e64522);<br />background: -ms-linear-gradient(top, #c33219, #e64522);<br />background: -webkit-linear-gradient(top, #c33219, #e64522);<br />}<br /><br />/*<br />LinkedIn<br />------------------------------------------------------------ */<br /><br />a.button-linkedin {<br />background-color: #0073b2; /* fallback color */<br />background: -moz-linear-gradient(top, #009cda, #0073b2);<br />background: -webkit-linear-gradient(top, #009cda, #0073b2);<br />border: 1px solid #0073b2;<br />text-shadow: 0 -1px -1px #005486;<br />}<br /><br />a.button-linkedin:hover {<br />background-color: #009cda; /* fallback color */<br />background: -moz-linear-gradient(top, #0073b2, #009cda);<br />background: -ms-linear-gradient(top, #0073b2, #009cda);<br />background: -webkit-linear-gradient(top, #0073b2, #009cda);<br />}<br /><br />&amp;nbsp;<br /><br />/*<br />Pinterest<br />------------------------------------------------------------ */<br /><br />a.button-pinterest {<br />background-color: #a0171c; /* fallback color */<br />background: -moz-linear-gradient(top, #cb2027, #a0171c);<br />background: -ms-linear-gradient(top, #cb2027, #a0171c);<br />background: -webkit-linear-gradient(top, #cb2027, #a0171c);<br />border: 1px solid #a0171c;<br />text-shadow: 0 -1px -1px #761114;<br />}<br /><br />a.button-pinterest:hover {<br />background-color: #cb2027; /* fallback color */<br />background: -moz-linear-gradient(top, #a0171c, #cb2027);<br />background: -ms-linear-gradient(top, #a0171c, #cb2027);<br />background: -webkit-linear-gradient(top, #a0171c, #cb2027);<br />}<br /><br />/*<br />RSS<br />------------------------------------------------------------ */<br /><br />a.button-rss {<br />background-color: #e2733d; /* fallback color */<br />background: -moz-linear-gradient(top, #e88845, #e2733d);<br />background: -ms-linear-gradient(top, #e88845, #e2733d);<br />background: -webkit-linear-gradient(top, #e88845, #e2733d);<br />border: 1px solid #e2733d;<br />text-shadow: 0 -1px -1px #9a4824;<br />}<br /><br />a.button-rss:hover {<br />background-color: #e88845; /* fallback color */<br />background: -moz-linear-gradient(top, #e2733d, #e88845);<br />background: -ms-linear-gradient(top, #e2733d, #e88845);<br />background: -webkit-linear-gradient(top, #e2733d, #e88845);<br />}<br /><br />/*<br />Twitter<br />------------------------------------------------------------ */<br /><br />a.button-twitter {<br />background-color: #0081ce; /* fallback color */<br />background: -moz-linear-gradient(top, #00aced, #0081ce);<br />background: -ms-linear-gradient(top, #00aced, #0081ce);<br />background: -webkit-linear-gradient(top, #00aced, #0081ce);<br />border: 1px solid #0081ce;<br />text-shadow: 0 -1px -1px #005ea3;<br />}<br /><br />a.button-twitter:hover {<br />background-color: #00aced; /* fallback color */<br />background: -moz-linear-gradient(top, #0081ce, #00aced);<br />background: -ms-linear-gradient(top, #0081ce, #00aced);<br />background: -webkit-linear-gradient(top, #0081ce, #00aced);<br />}<br />[/css]

 

¿Cómo implementar este código CSS en tu propio tema?

  1. Copia el código arriba (pasa tu ratón arriba a la derecha, en la caja del código y haz clic en el primer botón, View Source)
  2. Desde el panel de administración de tu blog, ve a Aparencia/Editar CSS (si no ves Editar CSS, tendrás que instalarte el plugin Jetpack y activar este módulo de Editar CSS)
  3. Pega el código (CRTL V) tal cual en esta página, al final del todo si ya tienes otros elementos de personalización
  4. Guarda las modificaciones

Esta técnica es nativa WordPress.org y debería funcionar con todos los temas disponibles.

Feliz fin de semana, aprendiz diseñador web DIY!

Acerca del autor de esta entrada,

Franck Scipion

Acerca del autor de esta entrada,

Franck Scipion

¿Harto de nunca saber que pasos dar?

Reserva ya tu sesión 1 a 1 «Claridad Total» y saldrás con un plan de acción cristalino para llegar a tus metas a 12 meses vista. Si vas en serio y valoras tu tiempo, esta sesión es para ti.

¿Harto de nunca saber que pasos dar?

Reserva ya tu sesión 1 a 1 «Claridad Total» y saldrás con un plan de acción cristalino para llegar a tus metas a 12 meses vista. Si vas en serio y valoras tu tiempo, esta sesión es para ti.

¿Te gustaría transformar tu talento en un negocio digital y conseguir tus primeros clientes en 60 días?