La incursión de Twitter en nuestras vidas es cada vez mayor, he llegado incluso a ver noticias, en la TV, relacionadas a qué dijo tal o cuál personaje a través de su cuenta de Twitter (o Facebook). Ya sabemos cómo integrar Twitter al blog, y hoy aprenderemos un modo más de promoción con un usando una imagen fija Twitter.
Con un botón fijo de Twitter en la página me refiero a un elemento que se muestre en la portada del sitio pero que no se desplace al bajar el contenido usando la barra lateral. Para lograr esto haremos uso de algunas sencillas líneas de código CSS y HTML.
Al inicio de su plantilla. Justo después del inicio de la etiqueta body, añadan el siguiente código:
<div id="twitterfijo"> <a style="display:scroll;position:absolute;bottom:345px;right:0px;" href="url_twitter"> <img src="url_imagen"/></a> </div> |
Lo único que tienen que cambiar es la url_imagen y la url_twitter, asociada a su cuenta Twitter.
Para el caso de Blogger es más sencillo, pues como bien anota Gem@, solo debes incluir el código en un elemento de la plantilla (o en un widget en caso uses WordPress), a menos que desees incorporarlo directamente a la plantilla, donde el procedimiento sería similar, prácticamente igual, al mostrado aquí.
Al final, les quedará como se muestra en la imagen que acompaña este post (aunque realmente yo no la tengo habilitada por cuestiones de optimización de plantilla, así que hice la prueba usando el Firebug).
Etiquetas: CSS, gratis, HTML, Twitter
June 29th, 2010 at 10:01 pm
Hola, que buen post me servira mucho, pero tambien quiesiera saber como agregar una imagen en el cuadro de feedburner,asi como lo hisciteen tu blog, no sabes como me ayudaria eso, ya que lo quisiera aplicar a mi blog
August 30th, 2010 at 8:45 pm
Saludos, en verdad, lo que no entendí bien, es si solo saldrá sígueme en twitter?? porque yo quiero conseguir poner el pajarito(símbolo) de twitter en mi blog…. me pueden ayudar?? Muchas gracias por siempre ponernos cosas
útiles en tus artículos.
Gracias,
Ana María
Lima – Perú
http://www.anamariabalarezo.blogspot.com
August 30th, 2010 at 10:38 pm
@Oswaldo: Puedes ver el código fuente y copiarlo 🙂
@Ana María: ¿Qué problema tuviste?
Saludos.
March 21st, 2011 at 4:16 pm
Gracias por los consejos.
November 4th, 2012 at 9:25 pm
Buenísimo
Gracias