COLOCAR IMÁGENES O BANNERS CON MOVIMIENTO EN BLOGGER
By Blogs Famag - martes, agosto 06, 2019
Esto se puede usar en las columnas o en una parte horizontal del diseño de la plantilla, dependiendo de las partes que usen.
Para ello vamos a usar el código <marquee> </marquee> el cual iría dentro de un gadget HTML / Javascript. La ruta sería: Diseño / Añadir un Gadget / HTML-Javascript
Para instalarlo en vuestro Bloc en un gadget solo tenéis que seguir estos pasos:
1-Un clic en “Diseño”
2-Clic en “Añadir un gadget”
3-Busca el widget que dice “HTML-Javascript” y ábrelo
4-Coloca el siguiente codigo en el interior
Un ejemplo del código para una fila con dos imágenes desplazá
ndose de derecha a izquierda sería:
<marquee scrolldelay="1" scrollamount="2" direction="left" loop="infinite" onmouseout="this.start()" onmouseover="this.stop()"><a href="URL que Redirecciona al tema 1" target="_blank"><img title="Titulo de la entrada" alt="Titulo de la entrada" src="URL de la imagen 1" height ="80px" width="80px"/></a><a href="URL que Redirecciona al tema 2" target="_blank"><img title="Titulo de la entrada" alt="Titulo de la entrada" src="URL de la imagen 2" height ="80px" width="80px" /></a></marquee>
Y el Resultado:
El target="_blank" se usa para que al hacer clic sobre la imagen, el enlace se abra en otra pestaña o ventana; casi no se usa, ya que por lo general se quiere que se abra un contenido propio de la página.
El código puede contener varias partes.
El movimiento se maneja con Behavior y Scroll.
Scroll hace que las imágenes o el contenido se desplacen como en un círculo, es decir, que sale por un lado, desaparece en el lado opuesto, y vuelve a salir por el primer lado.
Behavior, conozco dos, behavior="alternate" que hace que rebote el contenido de un lado a otro, y behavior="slide" que hace que el contenido comience en un lado y al llegar al otro extremo se detenga.
Ejemplo: <marquee behavior="alternate"></marquee>
onmouseout="this.start()" onmouseover="this.stop()" »»» Esto hace que al colocar el puntero del mouse sobre la imagen, ésta se detenga.
direction= »»» Esto define el sentido (dirección) en la que se desplazarán las imágenes o el contenido.
Se usan:
direction="left" para que se desplace de derecha a izquierda.
direction="right" para que se desplace de izquierda a derecha.
direction="up" para que se desplace de abajo hacia arriba.
direction="down" para que se desplace de arriba hacia abajo.
scrolldelay= »»» Esto define la velocidad con la que se desplazan las imágenes o el contenido. Cuanto menor sea el número, mayor será la velocidad. Ejemplo:
scrolldelay="200" » Lento
scrolldelay="1" » Rápido
Esto casi no se modifica ya que lo que le da velocidad realmente es el scrollamount ya que es la distancia que avanza la imagen.
scrollamount= »»» Esto define la cantidad de píxeles que avanzarán las imágenes o el contenido. Ejemplo:
scrollamount="2" » Se verá un movimiento normal.
scrollamount="100" » Se verá como si flash estuviera corriendo jejeje.
loop= »»» Esto define si el movimiento se repetirá o no. No es necesario su uso cuando se usa behavior.
Ejemplo:
loop="10" » Se repetirá 10 veces.
loop="infinite" o loop="-1" » Se repetirá indefinidamente.
width= »»» Determina el ancho del área en la que se desplazará el contenido; se maneja en píxeles o en porcentaje. Entonces con un width="200px" la marquesina tendrá esa medida y con un width="50%" si el área donde queremos ubicar el código tiene 900px, solo se usará la mitad 450px.
height= »»» Similar al width= Casi no se usa ya que se maneja el alto de las imágenes.
Funciones que se manejan para o con una marquesina:
align= »»» Su función es indicar la ubicación del contenido (texto o imágenes) dentro del código. Se usan: "top" (en la parte alta), "middle" (en la parte media) o "bottom" (en la parte baja). Todo esto depende de si el código lleva height y width dentro del <marquee ******> para definir el tamaño de la marquesina; esto casi no se usa, ya que el tamaño lo definimos con el de las imágenes. Ejemplo: align="top"
bgcolor= »»» Esto define el color de fondo que llevará la marquesina. Ejemplo: bgcolor="#FFFFFF"
Si se omite esta parte, el fondo será transparente.
Extras
Dentro de la parte del link de la imagen <img ******* /> van:
alt= y title= »»» Permiten que al pasar el puntero del mouse sobre la imagen se visualice una leyenda (texto). Se deben usar ambos, ya que los navegadores, o leen ambos, o leen solo uno. Ejemplo:
alt="Titulo de la Entrada" title="Titulo de la Entrada"
El alt= Lo usa el internet explorer y el title= lo usan o leen el resto de navegadores.
height= y width= »»» Determinan un tamaño preciso o definido para las imágenes, es decir, si las imágenes que incluya el código tienen diferentes tamaños, con estas partes se les puede designar un mismo tamaño para todas. Ejemplo: height ="80px" width="80px"
Dentro de la parte del link que redirecciona <a href="" ******* > se puede agregar:
target="_blank" »»» Para que el link se abra en otra pestaña o ventana.
Fecha de la Publicación; 06-08-2019
Fuente; charkleons
Publicado por;
0 comentarios