Marquesinas al estilo Teoría Blogger

Estilo T.B.

<p style="border: 1px solid black; padding: 10px; background: none repeat scroll 0% 0% rgb(32, 134, 202); color: white; font-family: arial,helvetica; font-size: 14px; font-weight: bold;" title="teoriablogger.blogspot.com"><marquee scrolldelay="30" scrollamount="4" onmouseover="this.stop();" onmouseout="this.start();">Estilo T.B.</marquee></p>

Blanco y negro

<p style="border: 1px solid black; padding: 10px; background: none repeat scroll 0% 0% white; color: black; font-family: arial,helvetica; font-size: 14px; font-weight: bold;" title="teoriablogger.blogspot.com"><marquee scrolldelay="30" scrollamount="3" truespeed="1">Blanco y negro</marquee></p>

Negro y blanco

<p style="border: 1px solid black; padding: 10px; background: none repeat scroll 0% 0% black; color: white; font-family: arial,helvetica; font-size: 14px; font-weight: bold;" title="teoriablogger.blogspot.com"><marquee scrolldelay="30" scrollamount="4" onmouseover="this.stop();" onmouseout="this.start();">Negro y blanco</marquee></p>

Azul

<p style="border: 1px solid black; padding: 10px; background: none repeat scroll 0% 0% blue; color: white; font-family: arial,helvetica; font-size: 14px; font-weight: bold;" title="teoriablogger.blogspot.com"><marquee scrolldelay="30" scrollamount="4" onmouseover="this.stop();" onmouseout="this.start();">Azul</marquee></p>

Rojo

<p style="border: 1px solid black; padding: 10px; background: none repeat scroll 0% 0% red; color: white; font-family: arial,helvetica; font-size: 14px; font-weight: bold;" title="teoriablogger.blogspot.com"><marquee scrolldelay="30" scrollamount="4" onmouseover="this.stop();" onmouseout="this.start();">Rojo</marquee></p>

Verde

<p style="border: 1px solid black; padding: 10px; background:green; color: white; font-family: arial,helvetica; font-size: 14px; font-weight: bold;" title="teoriablogger.blogspot.com"><marquee scrolldelay="30" scrollamount="4" onmouseover="this.stop();" onmouseout="this.start();">Verde</marquee></p>

Naranja

<p style="border: 1px solid black; padding: 10px; background: none repeat scroll 0% 0% orange; color: white; font-family: arial,helvetica; font-size: 14px; font-weight: bold;" title="teoriablogger.blogspot.com"><marquee scrolldelay="30" scrollamount="4" onmouseover="this.stop();" onmouseout="this.start();">Naranja</marquee></p>

Amarillo

<p style="border: 1px solid black; padding: 10px; background: none repeat scroll 0% 0% yellow; color: black; font-family: arial,helvetica; font-size: 14px; font-weight: bold;" title="teoriablogger.blogspot.com"><marquee scrolldelay="30" scrollamount="4" onmouseover="this.stop();" onmouseout="this.start();">Amarillo</marquee></p>

Violeta

<p style="border: 1px solid black; padding: 10px; background: none repeat scroll 0% 0% blue; color: white; font-family: arial,helvetica; font-size: 14px; font-weight: bold;" title="teoriablogger.blogspot.com"><marquee scrolldelay="30" scrollamount="4" onmouseover="this.stop();" onmouseout="this.start();">Violeta</marquee></p>

Fuccia

<p style="border: 1px solid black; padding: 10px; background: none repeat scroll 0% 0% Fuchsia; color: white; font-family: arial,helvetica; font-size: 14px; font-weight: bold;" title="teoriablogger.blogspot.com"><marquee scrolldelay="30" scrollamount="4" onmouseover="this.stop();" onmouseout="this.start();">Fuccia</marquee></p>

Dorado

<p style="border: 1px solid black; padding: 10px; background: none repeat scroll 0% 0% Gold; color: white; font-family: arial,helvetica; font-size: 14px; font-weight: bold;" title="teoriablogger.blogspot.com"><marquee scrolldelay="30" scrollamount="4" onmouseover="this.stop();" onmouseout="this.start();">Dorado</marquee></p>

Marrón

<p style="border: 1px solid black; padding: 10px; background: none repeat scroll 0% 0% Brown; color: white; font-family: arial,helvetica; font-size: 14px; font-weight: bold;" title="teoriablogger.blogspot.com"><marquee scrolldelay="30" scrollamount="4" onmouseover="this.stop();" onmouseout="this.start();">Marrón</marquee></p>

Morado

<p style="border: 1px solid black; padding: 10px; background: none repeat scroll 0% 0% Purple; color: white; font-family: arial,helvetica; font-size: 14px; font-weight: bold;" title="teoriablogger.blogspot.com"><marquee scrolldelay="30" scrollamount="4" onmouseover="this.stop();" onmouseout="this.start();">Morado</marquee></p>

Plateado

<p style="border: 1px solid black; padding: 10px; background: none repeat scroll 0% 0% silver; color: white; font-family: arial,helvetica; font-size: 14px; font-weight: bold;" title="teoriablogger.blogspot.com"><marquee scrolldelay="30" scrollamount="4" onmouseover="this.stop();" onmouseout="this.start();">Plateado</marquee></p>

---

Agregar una caja marquesina en mi blog

Para hacerlo, simplemente debes copiar el objeto deseado y puedes pegarlo en:

• Una entrada: Blogger → Creación de entradas → Nueva entrada → Solapa Edición de HTML.
• Un gadget: Blogger → Diseño → Elementos de la página → Añadir un gadget → HTML/Javascript.
  

Personalizar tu caja

Para crear tu propia caja con los colores que quieras, cambia los códigos marcados en colores:

<p style="border: 1px solid black; padding: 10px; background: none repeat scroll 0% 0% rgb(32, 134, 202); color: rgb(255, 255, 255); font-family: arial,helvetica; font-size: 14px; font-weight: bold;"><marquee scrolldelay="30" scrollamount="3" onmouseover="this.stop();" onmouseout="this.start();">Texto phttp://www.blogger.com/img/blank.gifara exponer</marquee></p>

Modifica el código en color rojo para asignar el color del fondo.
Modifica el código en color verde para asignar el color de la letra
Modifica el texto en color azul para asignar un texto que quieras que sea expuesto.

Video explicativo

Ver video en Teoría Blogger videos | Ir a Teoría Blogger videos

Complementos especiales para una marquesina

VER EL POST DE CÓMO CREAR UNA MARQUESINA

Para completar bien una marquesina, le hemos agregado algunos trucos interesantes de más para que seas un experto en marquesina!

Detener e iniciar marquesina al pasar el cursor por encima

Este truco hace que al pasar el cursor por encima de la marquesina se detenga la misma y al no pasarlo, siga funcionando normalmente. Para hacerlo debes agregar estos atributos con su contenido: onmouseout="this.start()" onmouseover="this.stop()".
El resultado sería el siguiente (prueba pasar el cusor sobre la marquesina):
Texto
<marquee onmouseout="this.start()" onmouseover="this.stop()">Texto</marquee>

Marquesina que rebota

Esto quiere decir que el texto nunca va a desaparecer ya que va a ir de un lado a otro sin parar (excepto si lo indica el atributo loop).
Para que rebote, pon este atributo con su contenido: behavior="alternate"
Texto rebota
<marquee behavior="alternate">Texto rebota</marquee>

Etiqueta marquee

La etiqueta marquee (<marquee></marquee>) permite dar movimiento a un determinado texto que corre básicamente en sentido horizontal y hacia la izquierda (efecto "marquesina"). Aunque esto se puede modificar mendiante algunos atributos.
Para dar a entender del tipo de movimiento del cual me refiero, aquí un ejemplo:
Marquesina
Este ejemplo refleja una marquesina común, sin atributos y modificaciones. En el siguiente punteo, mostraré atributos para modificar la marquesina en cuanto a la dirección, la cantidad de veces que semostrará el mensaje, etc.

Atributos para implementar

Direction

Como bien dice su nombre, este atributo indica la dirección de la marquesina. Dentro de este atributo se puede añadir lo siguiente: right (derecha), down (abajo), up (arriba).

1. Texto
2. Texto
3. Texto

1. <marquee direction="right">Texto</marquee>


2. <marquee direction="down">Texto</marquee>


3. <marquee direction="up">Texto</marquee>

Loop

Es un atributo "contable" en el que se añade la cantidad de veces que uno quiere que se repita el movimiento del texto. Cuando termine la cantidad, la marquesina deja de funcionar.
Texto aparecerá 12 veces
<marquee loop="12">Texto aparecerá 12 veces</marquee>

Scrolldelay

Indica la velocidad de la marquesina. Es contable, cuanto mayor sea el número, más lento irá.

1. Texto muy rápido


2. Texto rápido


3. Texto lento


4. Texto muy lento

1. <marquee scrolldelay="20">Texto muy rápido</marquee>


2. <marquee scrolldelay="100">Texto rápido</marquee>


3. <marquee scrolldelay="300">Texto lento</marquee>


4. <marquee scrolldelay="500">Texto muy lento</marquee>

Visita:
Puedes agregar más trucos en una marquesina en el siguiente link: Complementos especiales para una marquesina.