Botones sociales de forma horizontal

Escrito por Jose M Ramirez en . Publicado en Tutoríal

Botones sociales de forma horizontal

Partiendo de la petición de Miguel en su comentario en tuto del Botón deTwitter y para todos aquellos que sea necesario va dirigido esta guía para colocar los botones sociales de nuestro sitio de forma horizontal, abarcando desde la más práctica y sencilla usando solo HTML con unos simples atributos de CSS, hasta una un poco más compleja y sofisticada, para quienes desean aplicar un poco más de código y quieran jugar más con los maravillosos poderes de CSS. Las siguientes técnicas son aplicables a cualquier sitio sean manejados por WordPress, Joomla o cualquier otro CMS, ¡hasta para foros!, el único requisito es que el sitio soporte HTML y creo que incluye a todos.

Empezare con la forma más sencilla y es usando un DIV que hará las veces de contendedor de los botones en formato de imágenes. Para hacer el DIV debemos tomar en cuenta las medidas de las imágenes, tanto ancho como alto y el ancho de éste será el total del tamaño de las imágenes más algunos pixeles adicionales para que cuando se incluyan los vínculos entren perfectamente, en este caso agrego 15px adicionales. El alto es el de una sola imagen.

Por ejemplo: Las imágenes que estoy usando tienen un ancho de 55px. Multiplicado por las 3 imágenes tenemos que nuestro DIV tendrá un ancho de 165px. Con los 15px. Adicionales tenemos un DIV de 180px. El alto de las imágenes es de 53px. Y ese será el alto del DIV.

Definiremos el ancho con:

width:180px; (ancho 180 pixeles)
height:53px; (alto 53 pixeles)

El código será de esta forma:

<div style="width:180px; height:53px;"></div>

Ya tenemos la caja contenedora y lo que queda es subir las imágenes a nuestro servidor y agregar los enlaces con los vínculos, donde el vínculo de la imagen será el nuestra red social correspondiente al botón.

<div style="width:180px; height:55px;">
  <a href="URL DE TU RED SOCIAL"><img src="URL DE TU IMAGEN"/></a>
  <a href="URL DE TU RED SOCIAL"><img src="URL DE TU IMAGEN"/></a>
  <a href="URL DE TU RED SOCIAL"><img src="URL DE TU IMAGEN"/></a>
</div>

Otra forma de hacerlo es separando el CSS del HTML, es lo haremos creando un ID ya que los estilos se aplicaran solo a los botones. Los estilos los definiremos en la hoja de estilos del tema que use nuestro sitio. Así que creamos un DIV y le asignamos un ID llamado ‘botones-sociales’.

<div id="botones-sociales"></div>

Luego vamos a nuestra hoja de estilos y agregamos el ID ‘botones-sociales’ y definimos el ancho y el alto del mismo de esta forma.

#botones-sociales{
	width:180px;
	height:53px;
}

El resultado de los dos ejemplos es el mismo de cara a quien está navegando en el sitio, solo que uno agrega el CSS directamente en el HTML y el otro a la hoja de estilos, pero ambos se verán de misma forma.

Cualquier duda ya saben que están los comentarios :-)

Etiquetas:,

Trackback desde tu sitio.

Comentarios (3)

  • Miguel

    |

    Estimado amigo,

    ¡ Gracias mil ! Quisiera agradecerte que te hayas tomado una parte de tu tiempo en escribir este nuevo tutorial, es todo un detalle por tu parte, y muy respetable el tiempo que invierte la gente elaborar una respuesta, un tutorial. Gracias siempre.

    Con su permiso, tengo 2 preguntas, y las escribo tímidamente. Aplicando esta nueva receta he logrado colocar los iconos en horizontal, tal como prometes. Pero me gustaría saber cómo puedo hacer el efecto Rollover con CSS como muestras en el otro tutorial. He intentado editar el CSS que indicas en el anterior tutorial, pero no me funciona, los iconos aparecen de color estático (no cambian de color).

    Y la última pregunta, simplemente quería saber cómo puedo separar un poco más entre sí los iconos horizontales. siempre y cuando no le suponga una molestia.

    Cordial saludo y un abrazo.

    Responder

    • Jose M Ramirez

      |

      Vale Miguel, hacer el rollover con 3 iconos require agregar estilo a cada uno de ellos separados, pero el principio para cada uno es el mismo que el del boton de twitter. Sin embargo ve que el boton de twitter no es contenido por un DIV, y colocar varios botones con rollover lo mejor es tampoco meterlos en DIV si no usar una lista, pero no es algo sencillo asi que quedaria pendiente con un futuro tuto :-)

      Para agregar mas espacio entre imagen debes hacer mas grande el DIV contenedor para que quepan, luego agregas un margen a cada imagen asi:

      <img style="margin-right:6px;" src="ULR Imagen"/>
      

      Donde margin-right:6px; le agrega un margen de 6px a cada imagen a la derecha, aumenta o disminuye el espacio a tu gusto.

      Saludos.

      Responder

  • Miguel

    |

    Estimado José,

    Al final he conseguido lograr el efecto Rollover con el método Sprite, que como bien sabes, es más conveniente ya que hace menos peticiones al servidor.

    Muchas gracias por todo.

    Un abrazo.

    Responder

Dejar un Comentario

Sígueme en twitter

Twitter

Suscríbete al Feed

RSS-Feed

Red de Blogs

Red de Blogs iBlogLabs