Voy a comentaros paso a paso cómo añadí el carrusel de imágenes en mi blog bajo la cabecera. Solamente hace falta añadir un widget en blogger que haga de contenedor, y después añadir un gadget tipo Html/Javascript en el que se añadirá un código en el que habremos incluido las referencias de las imágenes.
1 1) Añadir el Widget:
En mi blog particularmente, en la plantilla original aparecía un widget llamado ‘crosscol’ en la vista de Diseño, en el que estaba deshabilitada la opción de añadir gadgets, ya que correspondía a la barra de menú original que hacía referencia a la Página principal, Acerca de mí, etc. Esa barra la suprimí, quitando el código de la plantilla correspondiente, para añadir más tarde la barra de menú superior que hay ahora en la parte más alta de la página.
Actualmente se ve así en modo diseño en mi blog este widget, con la opción de poder añadir un gadget:
Para añadir el widget así desde cero –recomendable tener este widget exclusivamente para el carrusel de imágenes-, deberemos ir a Plantilla à Editar HTML. Pulsar dentro del cuadro de código, y con Ctrl+F escribir en el cuadro de búsqueda: content-wrapper, pulsar Enter y nos situaremos sobre las líneas de código entre
’content-wrapper’ > y el
’main-wrapper’>
Entre esos dos div, simplemente habrá que añadir el siguiente código para tener el widget ‘crosscol’ visible en la vista Diseño:
La línea central que aparece en la interior imagen, con …, corresponde al gadget de HTML/Javascript ya añadido, pero eso lo haremos en la vista de Diseño una vez que ya tengamos visible el widget ‘crosscol’. Para tenerlo así justo debajo de la cabecera y justo antes del contenedor principal.
(NOTA: Es recomendable suprimir los 'br', ya que se han añadido aquí automáticamente al editar. El identificador de widgets puede variar de unas plantillas a otras de blogger, debido a distintos diseños de formato y cabecera)
1 2) Añadir el Gadget HTML/Javascript:
Vamos a la vista de Diseño del escritorio de Blogger, y comprobamos si está el objeto ‘crosscol’, con la opción de poder añadir un gadget:
Pulsaremos sobre ‘Añadir un gadget’, y seleccionaremos el objeto tipo HTML/Javascript:
Después, en el Título lo dejaremos en blanco, y en el cuadro de código añadiremos el siguiente código javascript, que modificaremos según el número de imágenes que queremos incluir, con sus URL y los link que queremos que nos lleven. Se añaden pautas a seguir después del código (conviene editarlo antes de pegarlo en el cuadro del gadget)
Cosas que debes modificar a tu gusto:
var sliderwidth="650px" -> Este es el ancho total que tendrá la galería de imágenes.
var sliderheight="150px" -> Este es el alto total que tendrá la galería de imágenes.
var slidespeed=2 -> El 2 es la velocidad que tendrá el movimiento de las imágenes. Puedes emplear una escala del 1 (menos velocidad) al 10 (más velocidad).
height="Xpx" -> Sustituye la X por el tamaño que le pusiste al ancho total que tendrá la galería de imágenes, es decir, var sliderheight="150px", de esta forma conseguirmos que las imágenes tengan una altura máxima.
Enlaces de la página a enlazar y enlaces de las imágenes:
http://www.ENLACEdelaENTRADA.blogspot.com -> Aquí debes poner el enlace al que quieras que se acceda cuando se clique sobre la imagen.
http://ENLACEdelaIMAGEN.jpg -> Aquí debes poner el elace de la imagen.
title="Aquí el título" -> Aquí pon el nombre que quieres que aparezca cuando pasas el cursor del ratón sobre la imagen.
¿Cómo añadir más imágenes? Pues bien fácil, después del [4] deberás pegar el [5] y así sucesivamente:
IMPORTANTE
1) Todas las imágenes deben tener el mismo tamaño (ancho y alto) para que la galería de imágenes no quede mal. Si te salen descuadradas ves adaptándolas a tu gusto.
2) Este gadget sólo funciona como gadget, no funciona en una entrada.
No hay comentarios:
Publicar un comentario