Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

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).

Rukia dice...

Hola Jaime!

He intentado probar esto en uno de mis blogs (porque un widget de entradas destacadas con imágenes es algo que venía queriendo hacer desde hace tiempo), pero no me funciona. Se ponen las imágenes, pero no enlazan a ningun lado ni aparecen los títulos.

馬丁 dice...
Este comentario ha sido eliminado por su autor. Siento las molestias.
Jaime Trujillo Escobedo dice...

Por supuesto, 馬丁. No hace falta que incluyas URL alguna, es mas, con solo borrar URL BLOG estará todo solucionado ;).

MARCOS dice...

Muy buen aporte, lo voy a probar espero resulte.
Lastima que no salga eso del blog de pruebas, para practicarlo

馬丁 dice...
Este comentario ha sido eliminado por su autor. Siento las molestias.
Gra dice...

Está muy buenoooooo!!!!!.Pucha no tener tiempo para hacer todos los trucos estupendos que compartís con todos!!!
Tengo fé que tendré tiempo pronto....Gracias!!!!

Jaime Trujillo Escobedo dice...

¡Mucha suerte MARCOS!

Jaime Trujillo Escobedo dice...

¡Me alegra mucho que te guste, 馬丁!

Jaime Trujillo Escobedo dice...

Son muchos los trucos que podemos instalar en nuestros blogs, Gra, pero lamentablemente no podemos usarlos todos :P (¡O el blog tardaría una eternidad en cargarse!).

Jaime Trujillo Escobedo dice...

Rukia, ¿Estás segura de incluir correctamente la dirección de las imágenes? De todas formas en breve publicaré un widget para "presentar" entradas populares, con un efecto muy similar al de este slide.

Cocina dice...

Holaaa Jaime!!!:):P
que bueno que estes con mas tiempo!y que hayas terminado tus estudios de maravillas te lo mereces y mucho!!ahora a descansar o no.. jaja!!!con nosotros por el blog no creo que puedas!!
un beso grande y esta muy bonito el blog con los cambios!!

Cocina dice...

Hola Jaime!
en mi lista de blogs figura una nueva entrada del el BALCON que es la siguiente

Añadir la opción "responder a este comentario" en tu blog ...

pero entro a tu blog y esa entrada no esta...

saluditos!

hsam R dice...

DE QUE BLOG SE TRATA DEL NOMBRE DEL MIO O DE CUAL, NO ENTIENDO

Anónimo dice...

me mola mucho el aspecto de tu blog, jiji mare mia :o

te dejo el blog de mi blog, http://mjzahirajackson.blogspot.com/

abandone los foros, eran una perdida de tiempo.

Jaime Trujillo Escobedo dice...

Hola Claudia! No sabes las ganas que tenía de volver. Poco a poco iré ayudando en lo que sepa y estoy seguro de que será más divertido que un largo descanso.

En cuanto a lo de la entrada que dices en tu lista de blogs... cierto, fue publicada pero en estos momentos la estoy editando. Al parecer el código funciona desde el bloc de notas pero cuando lo publico en la entrada, se suprimen algunos carácteres que permiten su correcto funcionamiento :S.

Intentaré buscar una solución cuanto antes.

Jaime Trujillo Escobedo dice...

CHINGUARRIO, no entiendo tu comentario. ¿Podrías indicarme a la respuesta que hace referencia?.

Jaime Trujillo Escobedo dice...

Encantado de conocer tu opinión, Zahira. Acabo de entrar en tu nuevo blog y me gustó mucho, sobre todo el diseño y las imágenes.

Dj's Club dice...

hol como ests, interesante , funcionara en una entrada central? o si o si tiene q ir en un widget?, gracias ! :)

Jaime Trujillo Escobedo dice...

Dj's Club, funcionará correctamente en una entrada pero comprueba que las imágenes no se distorsionan ya que muchas veces suele ocurrir.

H.Garcia dice...

Hola! Muy bueno el rotador de banners, ya lo apliqué en mi blog. Solo una preguntita...¿Porque mis imagenes no cambian suavemente como en el blog de prueba?.
Te agradezco la ayuda y el rotador por supuesto. Me servirá mucho. Si te sirve verlo está en: mama-especial.blogspot.com. Gracias.

Jaime Trujillo Escobedo dice...

Heidi, te aconsejaría instalar este otro widget en lugar del actual. Esto evitará grandes modificaciones en tu plantilla e incluso el resultado será más atractivo.

María José Andreu Granados dice...

Hola Jaime he hecho lo del slide tal cual lo explicas y al ver el blog tan sólo me sale una ventanilla en blanco, sabes de que puede ser.
saludos y gracias

Jaime Trujillo Escobedo dice...

Hola MªJosé. ¿Deseas mostrar imágenes? Si es así, te recomiendo hacer uso de este widget en lugar del que presento en esta entrada pues la instalación resultará sencilla y el resultado esperado. Un abrazo.

cuick dice...

Hola Jaime, acabo de encontrar tu Blog y es una lástima que lo hayas concluído. Pero muchas gracias por la información que compartiste.

Te mando un saludo y pues siempre será una buena referencia este blog aunque ya esté cerrado.

Saludos,
Cuitláhuac

Anónimo dice...

Buen post.

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo