Slide o rotador de banners / imágenes en tu blog

Ya hemos visto una forma de introducir una galería de imágenes en el blog para mostrar un grupo de fotografías a modo de slide o presentación.

En esta entrada te presentaré una nueva forma de presentar las imágenes en tu blog y esta vez, crearemos un rotador para banners (logotipos de otros sitios web) de manera que podamos aprovechar el espacio de nuestra barra lateral lo máximo posible.

Para ver el truco en funcionamiento accediendo a este blog de pruebas.

Diseño>Edición de HTML>expandimos artilugios

Busca la etiqueta </head> y encima añade este código que contiene el CSS necesario y el script:

<style type='text/css'>
#blslideimg {border:1px solid #CCCCCC; height:60px; margin:10px; overflow:hidden; padding:2px; position:relative; width:200px;
}
#blslideimg img{border: none;}</style>
<script src='http://sites.google.com/site/scriptsbalcon/b/blslideimg.txt' type='text/javascript'/>

Ahora guarda la plantilla. Accede a la sección de Diseño, Elementos de página y en un gadget html-javascript introduce esto:

<div id="blslideimg">
<a href="URL BLOG"><img src="URL IMAGEN" title="" /></a>
<a href="URL BLOG"><img src="URL IMAGEN" title="" /></a>
<a href="URL BLOG"><img src="URL IMAGEN" title="" /></a>
<a href="URL BLOG"><img src="URL IMAGEN" title="" /></a>
</div>

Reemplaza URL BLOG por la dirección del blog o la web a enlazar y URL IMAGEN por la dirección del banner o logotipo, en cada línea (que corresponde a un banner).

Si deseas añadir más banners a la "galería" incluye líneas como esta, siempre antes del cierre </div>...

<a href="URL BLOG"><img src="URL IMAGEN" title="" /></a>

Si te fijas bien en el código, las líneas tienen una etiqueta denominada title="". Esto te servirá para mostrar un tooltip o cartelito con texto editable al dejar el cursor un tiempo sobre la imagen. Para mostrar dicho mensaje escríbelo entre las comillas (" y ").

Guarda el gadget una vez hayas terminado de editarlo.

Notas:

Puedes personalizar el ancho y el alto de la galería dependiendo de los banners que vayas a mostrar. Para ello edita el valor 60 de height:60px; (altura) y el valor 200 de width:200px; (anchura).

- El rotador mostrará un borde gris. Para eliminarlo tan solo debes cambiar el valor 1px por 0px en border:1px solid #CCCCCC; (el color, #CCCCCC puedes editarlo usando la tabla de colores, si se da el caso de que prefieres mantenerlo).