viernes, 10 de mayo de 2013

Como Añadir Texto Marquee a Tu blog

Leave a Comment
Como Añadir Texto Marquee a Tu blog
Explicacion breve de lo que es una etiqueta marquee,esta nos sirve para dar un efecto diferente a los textos de nuestra página  de la Web. Conseguimos que el texto se mueva. Si deseas aplicar este efecto a los textos, lo que debes hacer ponerlos dentro de la etiqueta marquee, entre su inicio "<marquee>" y su cierre "</marquee>".

Ademas es posible manejar  el movimiento, la dirección de desplazamiento, la velocidad del mismo,…todo es configurable con los siguientes atributos:


align: Este atributo nos indicará si el texto dentro de la etiqueta se alineará en la zona alta del marquee ("top"), en el medio ("middle") o en la parte baja ("bottom").

bgcolor: Con este atributo definiremos el color de fondo que le queremos dar a la marquesina donde está el texto en movimiento.

height y width: El primero marca la altura que tendrá la marquesina y el segundo la anchura de la misma.
scrollamount: Este atributo define la cantidad de píxeles que queremos que se desplace el texto en cada movimiento. Por ejemplo: <marquee scrollamount="3"> </marquee> significará que el texto que vaya dentro de esa etiqueta se moverá a razón de tres píxeles por movimiento.

scrolldelay: Éste nos define la velocidad del texto que está dentro de la marquesina. A menor numeración, mayor velocidad. Es decir, un texto irá más rápido si el scrolldelay es 5, que si el scrolldelay es 20.

loop: Este atributo nos determina si el movimiento se repetirá o no. Si queremos que el movimiento sólo se repita unas veces determinadas debemos indicárselo con un número, que será el número de veces que se repita. Si queremos que se repita sólo 10 veces, su loop será el siguiente: <marquee loop="10"> </marquee>
Si queremos que se repita debemos usar "infinite" o "-1". Si no especificamos nada, se repetirá constantemente.

direction: Sirve para definir la dirección del movimiento: "left" para la izquierda, "right" para la derecha, "top" para arriba y "down" para abajo.

behavior: Gracias a este atributo podemos dar nuevos efectos a la marquesina. Si no especificamos este atributo, el texto se moverá de forma circular en el sentido que le hayamos marcado. Con behavior="scroll" conseguiremos el mismo efecto: el texto se moverá circularmente.

Con behavior="slide" haremos que el texto se detenga al llegar al final de la marquesina. Y con el behavior="alternate" el texto irá y volverá de un lado a otro de la marquesina.

Texto de Marquee Scrolling para Bloggers


1.Entra a la interface de blogger >>Deseno --> Elementos de pagina.

2.Da Click en 'Anadir un Gadget' en barra de el lado.

3.Seleciona 'HTML/Javascript' y anade el codigo de abajo

Texto en Continuo Movimiento :


<marquee behavior="scroll" direction="left">EL texto en Movimiento va Aqui</marquee>

El resultado del codigo:





Texto en movimiento de atras hacia delante:





<marquee behavior="alternate">texto de atras hasta delante</marquee>
El Resultado del codigo:

texto de atras hasta delante
Texto moviendose hacia arriba:

<marquee  behavior="scroll" direction="up">Tu texto moviendose hacia arriba va aqui</marquee>

El resultado de este codigo hacia arriba:

Tu texto moviendose hacia arriba va aqui
Cambiar la velocidad del texto:

<marquee behavior="scroll" direction="left" scrollamount="1">Velocidad de movimiento lento</marquee><marquee behavior="scroll" direction="left" scrollamount="10">Velocidad de Movimiento mediano</marquee><marquee behavior="scroll" direction="left" scrollamount="20">Velocidad de Movimiento rapido</marquee>

Este codigo resulta:

Velocidad de movimiento lentoVelocidad de Movimiento medianoVelocidad de Movimiento rapido

Codigos de textos Marquee

De Izquierda a derecha

<marquee direction="left">   TEXTO  </marquee>

Este codigo resulta en:

TEXTO
De Izquierda a Derecha

<marquee direction="right">   TEXTO   </marquee>

Este codigo resulta en:

TEXTO

De Atras Hacia delante

<marquee behavior="alternate">   TEXTO   </marquee>

El Resultado del codigo:

TEXTO

Arriba

<marquee direction="up">   TEXT   </marquee>

El Resultado del codigo es:

TEXT
Abajo

<marquee direction="down">   TEXTO   </marquee>

Este codigo resulta en:

TEXTO

Arriba y Abajo


<marquee behavior="alternate" direction="up">   TEXT   </marquee>

El Resultado del Codigo es:

TEXT

Angulo de Abajo

<marquee direction="down">   TEXTO   </marquee>

El Resultado del codigo es:

TEXT

Angulo de Arriba

<marquee><marquee direction="up">   TEXTO   </marquee></marquee>

El Resultado del codigo es:

TEXTO

Angulo detras hacia arriba y adelante

<marquee direction="up"><marquee behavior="alternate">   TEXT   </marquee></marquee>

El Resultado de este codigo:

TEXT

Rebotando alrededor de atras hacia adelante

<marquee behavior="alternate" direction="down"><marquee behavior="alternate">   TEXT   </marquee></marquee>

El Resultado de este codigo es:

TEXT

Multiples Lineas

<marquee direction="right">   TEXT <br> TEXT <br> TEXTO <br> TEXT   </marquee>

El Resultado de este codigo es:

TEXTO
TEXTO
TEXTO
TEXTO


Lineas en colores

<marquee bgcolor="   #FF0000   " style="color:   #FFFFFF   ">   TEXTO   </marquee>

Este codigo resulta en:


TEXT


Color Lineas

<marquee bgcolor="   #6600FF   " style="color:   #FFFFFF   ">   TEXT   </marquee>

El Resultado de este codigo es:


TEXT


Lineas de colores

<marquee bgcolor="   #000000   " style="color:   #FFFFFF   ">   TEXTO   </marquee>

El Resultado de este codigo es:



TEXTO


Lineas de color

<marquee bgcolor="   #000000   " style="color:   #FFFFFF   ">   TEXTO   </marquee>

El resultado de este codigo es:


TEXTO


Lineas en color

<marquee bgcolor="   #000000   " style="color:   #FFFFFF   ">   TEXTO   </marquee>

El resultado de este codigo es:


TEXTO


Lineas de color

<marquee bgcolor="   #000000   " style="color:   #FFFFFF   ">   TEXTO   </marquee>

TEl Resultado de este codigo es:


TEXTO


Lineas en color

<marquee bgcolor="   #000000   " style="color:   #FFFFFF   ">   TEXTO   </marquee>

El Resultado de este codigo es:

TEXTO
If You Enjoyed This, Take 5 Seconds To Share It

0 comentarios:

Publicar un comentario