Maquetando botones sociales y de votación

Diseño Web, Html, Internet, Introducción Dejar un comentario

Tras el éxito de plugins sociales como ic BeSocial de Inercia Creativa que me planteé instalar en el blog junto con sexy bookmarks de shareaholic, finalmente he seguido apostando por el “toque personal”, con los botones para compartir de knxDT bookmarks y destacar los de votación y con contador de Bitacoras, wikio, Me gusta de Facebook, Google Buzz y Retweet, que son los botones sociales que siempre he mostrado en el blog, por su doble característica social e informativa para el escritor y el lector, ya que permiten compartir/promocionar un artículo o post y además ofrece un contador, para identificar que es lo más votado o recomendado, en las distintas comunidades o redes sociales.

botones votar y compartir con contador

Sin embargo el diseño en la colocación de los botones, se había relegado en un segundo logar, las prisas han hecho que vaya colocando de cualquier manera el código de estos servicios o el de sus plugins de wordpress haciendo que se pierda la elegancia del diseño del blog.

Maquetación de los botones votar y compartir con Dreamweaver

Dedicándole un par de horas he remaquetado los botones con capas “div” y código css para colocarlos correctamente en la posición y con la separación deseada. Básicamente se define una capa “contenedor_botones” del ancho del contenido de los post (480 px) donde se van colocando las capas de cada botón, indicando el tamaño de cada una (width y height) y la posición relativa (left y top) con respecto al anterior.

Para trasladarlo al blogse incluye el css de los botones en la hoja de estilo del blog y se añade el código en las plantillas index.php y single.php. Puedes ver el fichero html con la hoja de estilo css embebida, en el fichero botones_votar.html (4 Kb), por si quieres curiosear el código o te sirve en algún proyecto web o blog. Espero tu opinión, valoración, comentario, sugerencia y/o aportación…

Blog Widget by LinkWithin
¿Te gustó?, VOTA el post. SÍGUEME por Twitter, Facebook o RSS.

Sigue leyendo:

3 Trackbacks

2 Comentarios

  1. Gravatar 2 agosto 2010, 9:23
    OpcionWEB: Reply to this comment

    En #opcionweb: Maquetando botones sociales y de votación http://bit.ly/bhbpf9

    This comment was originally posted on Twitter

  2. Gravatar 25 agosto 2010, 0:33
    HLC: Reply to this comment

    Súper fan del autentico he inigualable Cálico Electrónico, eso si, en su primeras temporadas, luego perdió bastante, pero donde estén sus hermosos poemas, que se quite todo lo demás, ja, ja, ja…
    Con esto del concurso he llegado a tu blog y te tengo muchísima envidia, yo soy un negao informático y dependo de todo el mundo hasta para pasar el antivirus.

    Salu2.

Escribe tu comentario o... ¡salta!

Etiquetas XHTML permitidas: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>


Entradas RSS Comentarios RSS Acceder Subir
twitter facebook Rss mail rssSígueme en Google Currents