TEXTOS EN MOVIMIENTO

Buff... Empecé muy fuerte con la sección de TIPs para Blogger, pero la tenía muy abandonada. Hoy quería traeros unos truquillos para poner textos en movimiento en el blog. Hay infinidad de variantes y se pueden personalizar como uno quiera. Yo os voy a detallar los que tengo implementados en el blog, para que si os gustan, los podais replicar en el vuestro. Es una idea divertida, y que siempre va a entrar antes por los ojos algo que está en movimiento, porque va a llamar la atención, que un texto soso en estático. 

El primero que os voy a describir es cómo poner el título del blog en movimiento en la pestaña del navegador, osea, al lado del Favicon o icono de la página. Lo que viene siendo la cabecera de la pestaña. Si habeis podido observar en mi caso cuando abres el blog se ve arriba el nombre, pero va pasando de dcha a izq a golpes muy despacito. Como muestro en esta imágen:

Para hacerlo debeis seguir los siguientes pasos:

- Vais a la sección de Tema de vuestro blog, y ahí le dais a la flechita que mira hacia abajo al lado del botón de personalizar:

- A continuación, le dais a la opción editar HTML (si quereis antes podeis guardar una copia de seguridad por si acaso, es bastante recomendable):

- Ahí pegais el siguiente código:

<script>

//<![CDATA[

var txt=" Título del blog ";

var espera=100;

var refresco=null;

function rotulo_title() {

document.title=txt;

txt=txt.substring(1,txt.length)+txt.charAt(0);

refresco=setTimeout("rotulo_title()",espera);}

rotulo_title();

//]]>

</script>

En donde pone "TÍtulo de blog" debeis de indicar el nombre de vuestro blog, y el ´número en rojo lo podeis modificar para cambiar la velocidad a la que se mueve el texto.

Luego para los dos siguientes tipos de texto, se procede de igual manera. Si os habeis fijado en mi blog, tengo indicado a que está dedicado el mismo, con un texto con un efecto de escritura en máquina de escribir, justo debajo de la tira de las diferentes páginas que componen mi blog, como puede verse en estas dos imágenes:

Las letras van apareciendo de izq a dcha como si las estuvieras escribiendo a ordenador o en  máquina de escribir.

Por otro lado, en el lado de la dcha, tengo un mensaje de bienvenida al blog, con un efecto que hace que se traslade de dcha a izq, como se ve en la imagen siguiente:

En ambos casos la manera de proceder es similar:

- Entramos en el apartado de diseño del blog:

- Y presionamos en añadir gadget, en el sitio de la plantilla dónde queramos añadir el texto en movimiento:

- Ahí, elegimos la opción de HTML/JavaScript:

- Para el caso del texto con efecto de escritura, añadimos el siguiente código:

<script language="JavaScript1.2"><!--

//Secify scroller contents

var line=new Array()

line[1]="Reseñas de juegos de mesa, películas, videojuegos retro y cómics"

//Specify font size for scoller

var ts_fontsize="12px"

//--Don't edit below this line

var longestmessage=1

for (i=2;i<line.length;i++){

if (line[i].length>line[longestmessage].length)

longestmessage=i

}

//Auto set scroller width

var tscroller_width=line[longestmessage].length

lines=line.length-1 //--Number of lines

//if IE 4+ or NS6

if (document.all||document.getElementById){

document.write('<form name="bannerform">')

document.write('<input type="text" name="banner" size="'+tscroller_width+'"')

document.write(' style="background-color: '+document.bgColor+'; color: '+document.body.text+'; font-family: verdana; font-size: '+ts_fontsize+'; font-weight:bold; border: medium none" onfocus="blur()">')

document.write('</form>')

}

temp=""

nextchar=-1;

nextline=1;

cursor="]"

function animate(){

if (temp==line[nextline] & temp.length==line[nextline].length & nextline!=lines){

nextline++;

nextchar=-1;

document.bannerform.banner.value=temp;

temp="";

setTimeout("nextstep()",3000)}

else if (nextline==lines & temp==line[nextline] & temp.length==line[nextline].length){

nextline=1;

nextchar=-1;

document.bannerform.banner.value=temp;

temp="";

setTimeout("nextstep()",1000)}

else{

nextstep()}}

function nextstep(){

if (cursor=="\\"){

cursor="|"}

else if (cursor=="|"){

cursor="/"}

else if (cursor=="/"){

cursor="-"}

else if (cursor=="-"){

cursor="\\"}

nextchar++;

temp+=line[nextline].charAt(nextchar);

document.bannerform.banner.value=temp+cursor

setTimeout("animate()",25)}

//if IE 4+ or NS6

if (document.all||document.getElementById)

window.onload=animate

// --></script>

Modificais la frase señalada en rojo por el mensaje que querais poner y listo.

En el caso de que querais poner un texto con efecto de traslado hacia la izq, el código que debeis pegar es el siguiente:

<marquee behavior="scroll" direction="left"><a href="http://filleradicto.blogspot.com/" target="_blank"><span style="color: black;">BIENVENIDO A FILLERADICTO</span></a></marquee>

En este caso lo que os dejo marcado en rojo es lo que es configurable.

Y hasta aquí el tips de textos en movimiento. Espero que os sea útil!!