VOZ EN EL BLOG

Esta entrada es fruto de consultar el blog de dondelohabredejado, vi un gadget que me resultó curioso y quizás a alguien le sea de utilidad.

Se trata principalmente de una web en la cuan introduces un texto y la propia aplicación te transforma el texto introducido a formato mp3, vamos que te lee lo que has introducido, además permite varios idiomas... vamos un autentico loro!

Sinceramente la utilidad no se la termino de encontrar... no se cual será la finalidad de este tipo de aplicaciones, la realidad es que ya me la he encontrado en varios lugares y siempre la he utilizado como cosa curiosa. Me imagino que la finalidad debe de ser para discapacitados visuales ya que de esta forma pueden escuchar cualquier texto que se encuentren en la web.

La aplicación tiene 2 formas de funcionar:

1. Ingresas a la web vozme, introduces el texto y la misma web te lo transforma a mp3.
2. Mediante un gadget que se inserta en el blog o web, de forma que cualquier texto que se seleccione, la aplicación te generará el mp3 correspondiente.

Bueno pues eso es todo amigos... espero vuestros comentarios a ver si entre todos descubrimos la cual es la finalidad de esta aplicación!!
Sinceramente merece la pena probarlo, yo la primera vez no puede evitar reirme, podéis poner cualquier palabra... y vereis como suena...jiji.

ENLACES NEGRITA Y CURSIVA EN COMENTARIOS

Algunos considerarán esta entrada como absurda pero lo cierto es que me parece que hay muchisima gente que no tiene claro como realizar los comentarios correctamente.

Me ha pasado en varias ocasiones de aburrirme leyendo comentarios ya que no se pone nada en negrita ni en cursiva ni nada de nada y por si fuera poco hay quien realiza sus propios post en el apartado de comentarios. Lo cierto es que aprehendiendo 3 cosas muy simples haremos nuestros comentarios mucho mas agradables.

Letras en negrita:

La estructura es:

<b>TEXTO</b>


Letras en cursiva:

La estructura es:

<i>TEXTO</i>


Letras como vínculo:

La estructura es:

<a href="URL DESTINO">TEXTO DEL ENLACE</a>


A partir de ahora a comentar todo el mundo bien!!!. Espero os sea de utilidad!, os aconsejo al principio utilizar el vista previa de los comentarios para observar realmente cual es el efecto de estos códigos.

MODIFICAR CURSOR

Cambiar el cursor en determinadas partes de un blog o web es algo que puede resultar al mismo tiempo que útil bastante original, lo de útil lo digo ya que permitirá diferenciar de una forma muy clara donde se encuentran links, ya que en ocasiones estos no quedan del todo claros. Normalmente los valores por defecto permiten que cuando el cursor se encuentra encima de un link aparezca la famosa mano. Os voy a mostrar una forma muy simple de modificar este valor tan solo en lugares que vosotros queráis.

Conociendo los links:

La forma que tienen los links es la siguiente:

1.Enlaces de texto:

<a href="DESTINO_DEL_ENLACE">TEXTO</a>


Ejemplo:

Esto es un enlace de texto a wikipedia

2.Enlaces tipo imagen:


<img src="URL_DE_LA_IMAGEN">


Ejemplo:



La estructura de código que tendremos que insertar para modificar los cursores será la siguiente:

Para el primer caso:

<a style="CURSOR: NOMBRE_DEL_CURSOR" href="DESTINO_DEL_ENLACE">TEXTO</a>


Para el segundo caso:

<img style="CURSOR: NOMBRE_DEL_CURSOR" src="URL_DE_LA_IMAGEN">


El valor NOMBRE_DEL_CURSOR lo podéis cambiar por los siguientes que cito aquí abajo, podéis poner el cursor encima del nombre para observar su resultado.

default crosshair hand move nw-resize ne-resize n-resize e-resize help text wait

Espero que os sea de utilidad, ya me contaréis como os fue ;)

ENLACES CON EFECTOS

Este es el típico efecto que seguro que muchos habéis visto en multitud de sitios, consiste en que cuando el cursor se sitúa encima de un vínculo se crea un efecto en su parte posterior, a modo de animación con el objetivo de resaltar que es un vínculo. De esta forma se da un toque bastante especial a nuestro blog o web ya que podremos añadirle cualquier tipo de fondo animado. Si que es cierto que hay que ser muy riguroso a la hora de elegir este fondo ya que se aplicará a todos nuestros vínculos y si no somo capaces de hacer una buena elección puede ser que se dificulte la lectura en lugar de dar un toque original a nuestro sitio.

Crear el efecto es muy simple, por lo que podréis probar a hacerlo y en el caso de que no quede de vuestro agrado eliminarlo facilmente, sinceramente la parte mas complicada es buscar un fondo visualmente agradable, yo os mostraré un par de ejemplos que podréis aplicar para observar el resultado en vuestro sitio.

Aplicaremos el efecto de la siguiente manera:

Iremos a la plantilla de nuestra web o blog y buscaremos a:link { , una lineas mas abajo unas 8 lineas aproximadamente, dependiendo del código nos encontraremos con a:hover { justamente debajo de esta línea insertaremos una nueva linea de la siguiente forma:

background:url(URL.gif);


URL.gif hace referencia a la dirección de la imagen gif que queremos que aparezca como fondo en los vínculos. Podéis probar con estos 2 ejemplos y observar el resultado.

Ejemplo1 (Efecto estrellitas):

background:url(http://img209.imageshack.us/img209/1033/sterl05nh5.gif);

Ejemplo2 (Efecto corazones):



background:url(http://i229.photobucket.com/albums/ee233/cmp-stuff/animados/fondos/01_heatscolorfulls.gif);

Podéis añadirle cualquier gif de fondo unicamente modificando la dirección donde está ubicado el gif, espero que os guste.

ENLACE CON EXPLICACION

Os voy a mostrar una forma muy sencilla de añadirle a los los enlaces una pequeña explicación, que aparecerá cuando situemos el cursor encima del mismo. Normalmente se utiliza para aclarar el destino hacia donde nos dirigirá el vínculo.

Un ejemplo es el siguiente:(Situar el cursor encima del enlace para observar el efecto)

ESTE ES UN ENLACE

Como podréis observar al situar el cursor encima del enlace aparece el siguiente texto:
Ejemplo de explicacion, podréis poner vuestras propias explicaciones ;)

Para observar este tipo de efecto, tan solo tendremos que añadir la propiedad title de la siguiente forma.

El código del ejemplo es el siguiente:

<a href="http://sitiooriginal.blogspot.com/2009/04/cambiar-imagen-al-pasar-el-cursor.html" title="Ejemplo de explicacion">ESTE ES UN ENLACE</a>


Podéis ver facilmente la estructura, tan solo se le ha agregado la propiedad title a un enlace común. La primera parte en engrita es el lugar hacia donde se dirigirá el vínculo, la segunda la explicación del enlace y la última parte el texto que se muestra para el vínculo.

BONITO GENERADOR DE TEXTO

Encontré por la red un generador de texto que está bastante bien, permite crear títulos bastante chulos. Lo único malo que puede tener es la publicidad, pero como siempre se la podéis quitar editando la imágen y recortando el espacio donde se incluye. Podréis conseguir efectos como los siguientes de una forma muy fácil, para crear los vuestros acceder a la siguiente web.

FRASES ALEATORIAS

Poner frases aleatorias en el blog es muy simple, cada vez que se cargue la página donde esta ubicado el script, se mostrará una frase diferente, puede ser un recurso divertido ya que le da cierto dinamismo al blog. A continuación os mostraré como hacerlo.

Primer paso:(Ubicación del script)

Lo más común será insertarlo en la sidebar por tanto agregaremos un nuevo gadget de tipo HTML/Javascript y pegaremos el siguiente código:

<script language="JavaScript">
citas = new Array(5)
citas[0] = "Sé bueno con tus hijos. Ellos eligirán tu residencia"
citas[1] = "Me pregunto: ¿Qué haría yo sin mí?"
citas[2] = "La esclavitud no ha sido abolida"
citas[3] = "Los mocos son la plastilina de los pobres"
citas[4] = "Me cago en san pito pato"
aleatorio = Math.random() * (citas.length)
aleatorio = Math.floor(aleatorio)
document.write(citas[aleatorio])
</script>

Segundo paso:(Nuestras frases)

En primer lugar seleccionaremos las frases que queremos para que el escript decida aleatoriamente cual mostrar, en el ejemplo, puse 5 frases, si queréis poner el mismo número de frases tan solo tendréis que modificar las frases en si, si por el contrario queréis cambiar el número de frases actuaremos de la siguiente forma:

En la segunda línea del código podéis observar un 5 que es el número de frases, cambiar este valor por el que vosotros decidáis.
Seguidamente en el código encontramos líneas con la siguiente estructura:

citas[0] = "Aqui una frase"

Fijaros que si son 5 frases el valor del interior de los corchetes (marcado en rojo) varía entre 0 y 4 por tanto si decidieramos poner 3 frases deberíamos borrar líneas hasta que quedara solo de 0 a 2 es decir la última linea tendrá siempre el valor del número de frases menos 1, si por el contrario queréis añadir más frases tendréis que ir añadiendo líneas con la misma estructura modificando únicamente el valor del número.

Me preguntaba C.C.S que si se podía personalizar un poco más las frases aleatorias, la respuesta es que si. Veamos un ejemplo.

<div style="text-align: center; font-weight: bold">

CODIGO FRASES ALEATORIAS

</div>

Insertando nuestro código en este div, podremos modificar tanto la alineación, tipo de letra y color, podéis consultar los colores aqui.

VENTANA EMERGENTE ACEPTAR CANCELAR

Contestando a SiMoN RoV, que quería una ventana emergente con las opciones Aceptar y Cancelar, similar a la entrada esta pero dependiendo de la opción elegida hacer una cosa o otra, él en concreto quería que con la opción Aceptar se cargue una nueva pagina y con la opción Cancelar se cierre la ventana y no vaya a ningún sitio.

El código a insertar en el caso de ventana emergente mediante un texto es el siguiente:

<span onmouseover="javascript:if(confirm('MENSAJE DE LA VENTANA')){window.open('URL DESTINO CON ACEPTAR')}">TEXTO</span>


Para observar el resultado situar el cursor encima de la palabra TEXTO; si se pulsa aceptar, se cargará la página de google, si cancelar se cerrará la ventana sin hacer nada.

TEXTO
Para el caso de imagenes, el código será muy similar y será el siguiente:

<span onmouseover="javascript:if(confirm('MENSAJE DE LA VENTANA')){window.open('https://www.google.com')}"><img src="URL DONDE ESTA LA IMAGEN" border="0" /></span>


A diferencia del ejemplo anterior, lo único que cambia es que tendremos que sustituir URL DE LA IMAGEN por la dirección donde se encuentra, el efecto será el siguiente, de la misma forma situar el cursor encima y con Aceptar se cargará la página de google.

ESTILO PULLQUOTE CITA EN ENTRADA

Los pulluotes son muy útiles en las entradas de un blog ya que de esta forma hacemos menos monótona la lectura de los artículos, son utilizados para realizar anotaciones o bien para resaltar una parte del artículo.

Insertarlo en el blog es muy simple y tan solo tendréis que seguir las siguientes indicaciones:

Yo aconsejaría en primer lugar escribir el artículo y después seleccionar la parte del texto que que deseamos que aparezca como pullquote.
Lo primero a tener en cuenta es que el artículo se dividirá en 2 partes principales una que será el texto normal y otra que será el texto del pullquote, teniendo eso en cuenta procederemos de la siguiente forma.

En creación de entradas seleccionar Edición de HTML, aquí insertaremos el siguiente código:

<div style="float:right;height:6em;width:150px;margin-top:10px;margin-bottom:10px;margin-left:10px;line-height:18px;text-align: right;">
<span >AQUI EL TEXTO DEL PULLQUOTE</span>
</div><p style="text-align: justify;">
AQUI EL TEXTO DE LA ENTRADA</p>
<div style="clear:both;"></div>



Sustituiremos AQUI EL TEXTO DEL PULLQUOTE y AQUI EL TEXTO DEL ARTICULO por nuestros textos.
También podéis hacerlo desde redactar una vez insertado el código y modificar allí los textos, quizás sea mas claro y allí ya si que podréis modificar colores o cualquier otra cosa.

El resultado será algo como lo siguiente.

Podemos observar así como quedaría el estilo PULLQUOTE.

Google va a subir todos los libros del mundo a internet.
Google lo está haciendo otra vez. Ahora quiere revolucionar el mundo editorial. Esta semana lanzó una innovadora campaña en el mundo (en la prensa de papel, revistas, semanarios). Y está dirigida a los miles de autores de libros que está digitalizando. En total, la compañía destinará 6,3 millones de euros a informar al universo de que va a proseguir escaneando libros.

TEXTO QUE PARPADEA

Hacer parpadear un texto es muy sencillo, lo podremos utilizar para resaltar alguna frase o texto de alguna de nuestras entradas, el efecto es bastante llamativo y lo haremos de la siguiente forma:

En la parte de Edición de HTML de nuestra entrada agregaremos el siguiente fragmento de código que tan solo se corresponde con la etiqueta <blink> de la siguiente forma:

<blink>TEXTO QUE PARPADEA</blink>


Como podemos observar es muy sencillo y obtendremos el siguiente resultado:

TEXTO QUE PARPADEA

TEXTO QUE PARPADEA

Tarot

GENERADOR DE TEXTO ANIMADO

Podréis crear unos textos muy divertidos desde esta web muchografico, además de textos permite crear gifs animados, banners, rótulos, reflejos, y muchos otros efectos. La forma de crearlos es muy sencilla, tan solo tendréis que seleccionar el modelo que más os guste, introducir el texto y hacer click en Generar Texto animado, copiaremos el código generado y lo pegaremos en nuestro blog en el lugar que deseemos, obtendremos resultados como los siguientes.

<script type="text/javascript"><!--
google_ad_client = "pub-4676951680551121";
/* Largo */
google_ad_slot = "0554537531";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

TEXTOS APARECEN Y DESAPARECEN

NO FUNCIONA ESTOY INTENTANDO ARREGLARLO

Este efecto lo conseguimos gracias a Javascript, consiste en hacer aparecer y desaparecer textos encuadrados en un rectánglo a modo de tablón, es un recurso muy útil por ejemplo para publicar noticias. Nos permite en un pequeño espacio reflejar todos los textos que queramos de forma individual y con cierto efecto de transición entre ellos.

Para crear el vuestro, tendréis que seguir los siguientes pasos:

Primer paso:(Ubicación del código)

Pegar el siguiente script en el lugar donde queráis crear el efecto.

<script language="JavaScript1.2">var delay=3000 //pausa (en milisegundos)<br />var fcontent=new Array()<br />begintag='<span style="font-family:Arial;font-size:85%;">' //tag que abre los mensajes<br />fcontent[0]="<b></b><br /><br />PRIMER TEXTO"<br />fcontent[1]="SEGUNDO TEXTO"<br />fcontent[2]="TERCER TEXTO"<br />closetag='</span>'<br />var fwidth=150 //ancho<br />var fheight=150 //alto<br /><br />///No editar/////////////////<br /><br />var ie4=document.all&&!document.getElementById<br />var ns4=document.layers<br />var DOM2=document.getElementById<br />var faderdelay=0<br />var index=0<br /><br />if (DOM2)<br />faderdelay=2000<br /><br />//function to change content<br />function changecontent(){<br />if (index>=fcontent.length)<br />index=0<br />if (DOM2){<br />document.getElementById("fscroller").style.color="rgb(255,255,255)"<br />document.getElementById("fscroller").innerHTML=begintag+fcontent[index]+closetag<br />colorfade()<br />}<br />else if (ie4)<br />document.all.fscroller.innerHTML=begintag+fcontent[index]+closetag<br />else if (ns4){<br />document.fscrollerns.document.fscrollerns_sub.document.write(begintag+fcontent[index]+closetag)<br />document.fscrollerns.document.fscrollerns_sub.document.close()<br />}<br /><br />index++<br />setTimeout("changecontent()",delay+faderdelay)<br />}<br /><br />// colorfade() partially by Marcio Galli for Netscape Communications. ////////////<br /><br />frame=20;<br />hex=255 // Initial color value.<br /><br />function colorfade() { <br />// 20 frames fading process<br />if(frame>0) { <br />hex-=10; // increase color value<br />document.getElementById("fscroller").style.color="rgb("+hex+","+hex+","+hex+")";// Set color value.<br />frame--;<br />setTimeout("colorfade()",20); <br />}<br />else{<br />document.getElementById("fscroller").style.color="rgb(255,0,0)";<br />frame=20;<br />hex=255<br />} <br />}<br /><br />if (ie4||DOM2)<br />document.write('<div id="fscroller" style="border:1px solid ;width:'+fwidth+';height:'+fheight+';padding:2px"></div>')<br /><br />window.onload=changecontent</script><ilayer id="fscrollerns" width="&{fwidth};" height="&{fheight};"><layer id="fscrollerns_sub" width="&{fwidth};" height="&{fheight};" left="0" top="0"></layer></ilayer>

El código es bastante largo pero no os preocupéis ya que tan solo tendremos que cambiar unas poquitas cosas del mismo.

Segundo paso:(Personalización)

Cambiaremos en primer lugar en la parte de código donde puse PRIMER TEXTO,SEGUNDO TEXTO.. por vuestros mensajes.
A continuación podréis cambiar el color de los mismos, para ello buscar en el código donde pone lo siguiente: "rgb(255,255,255)", este es el color del texto, tan solo tendréis que seleccionar el que mas os guste cambiando esos números, podéis consultar tabla de colores.

VENTANA EMERGENTE IMAGEN Y TEXTO

Este efecto consiste en sacar una ventana emergente al pasar el cursor por encima de una imagen o un texto, la forma de crearlo es muy simple y es de la siguiente forma:

Copiar el siguiente código donde queráis crear el efecto.

Para imagenes:


<a href="" onMouseOver="alert('MENSAJE DE EJEMPLO');return true;">
<IMG SRC="URL DE LA IMAGEN" border="0"></a>


Tedréis que obtener la url de la imagen que queráis insertar, para ello podéis hacer uso de un servidor de imagenes, yo utilizo este.

Para texto:

<a href="" onMouseOver="alert('MENSAJE DE EJEMPLO');return true;">TEXTO</a>


Ejemplos:(Poner cursor encima de la imagen y texto).

• Imagen:

• Texto:

Esto es un ejemplo de texto

CAMBIAR COLOR TEXTO SELECCION

Es una de las propiedades que nos brindan algunos exploradores como Firefox o Safari, se trata de la propiedad selection, podremos cambiar el color del texto y fondo de selección incorporando unas pequeñas líneas de código.

En primer lugar buscar ]]></b:skin> y pegar el siguiente fragmento de código justamente encima, elegir el código correspondiente según el tipo de explorador empleado.

Para los que utilizan Firefox:

::-moz-selection {
background: #000000;
color: #ff9900;
}

Para los que utilizan Safari:

::selection {
background: #ff9900;
}

background: Color del fondo de la selección.
color: Color de la letra selecionada.

Nota: Respetar la almoadilla de antes del código del color, podéis consultar colores aquí o aquí.

DROP CAPS LETRA GRANDE EN POST

Drop Caps no es mas que hacer la primera letra del párrafo grande, es lo que utilizan por lo general las revistas para resaltar algunos de sus artículos, podréis crearlo siguiendo los siguientes pasos.

Primer paso:

Dirijiros a la plantilla de vuestro blog, Diseño->Edición HTML, una vez aquí buscar el siguiente código (sin expandir plantilla de artilugios) ]]></b:skin>, copiar el siguiente código justamente encima.

.dropcaps {
float:left;
color:$headerBgColor;
font-size:100px;
line-height:80px;
padding-top:1px;
padding-right:5px;
}
Nota:Elegir el color ver abajo.


Segundo paso:(Personalización):

font-size: hace referencia al tamaño de la letra
color: $headerBgColor hace referencia al color de la primera letra del párrafo, por ello tendremos que seleccionar un color, podemos elegir un color desde aquí.
Pondremos un color modificando la línea y dejándola de la siguiente forma:
color: #EF09FF;(donde lo que va después de la # es el código del color seleccionado). Guardamos la plantilla y listo para utilizar.

Tercer paso: Como insertarlo.

Para insertar este efecto en la entrada tendréis que insertar el siguiente código en Edición de HTML <span class="dropcaps">D</span>
seguidamente escribiréis el párrafo, (en vista previa no se puede observar) y obtendréis algo como podría ser lo siguiente.

P
ara mi lo sorprendente no es que Google lance ahora un navegador; siempre he pensado que acabarán lanzando hasta tostadoras. Ya sé que pensando así, debo ser ”un perdido“, pero a mi ya me cansa esta política de lanzamiento constante de cosas que vienen a salvar nuestras vidas (pero estos tipos; ¿no acabarán agotados?).Esto muestra el resultado de nuestro Drop Caps.

SPOILER IMAGENES Y TEXTOS OCULTOS

Spoiler no es mas que un texto o imagen oculto detrás de un texto, son bastante útiles para alojar por ejemplo imágenes de gran tamaño o textos, veamos un ejemplo que es la forma más fácil de entenderlo.

EJEMPLO(Pinchar aquí para ver el ejemplo)

Esto es un ejemplo muy simple, lo podéis complicar tanto como queráis, podéis combinar texto con imágenes, solo texto o imágenes en fín eso depende de la utilidad que le vayáis a dar.


Como insertarlo en vuestro blog:

Primer paso:(acciones previas)

Tendréis que insertar un pequeño código en vuestra plantilla, para ellos dirijiros a Diseño->Edición de HTML

Buscar </head> justamente encima del mismo copiar el código:

<script type='text/Javascript'>

function togglecomments (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; }
} </script>

Una vez insertado ese código buscar la parte de código ]]></b:skin> y justamente encima colocaremos el siguiente fragmento de código:

.commenthidden {display:none;}
.commentshown {display:inline;}

Guardamos la plantilla y listo para utilizar.


Segundo paso:(inserción spoiler)

En el lugar que queramos que aparezca nuestro spoiler tendremos que añadir unas líneas de código, si es en una entrada en edición de HTML, si es en un lugar de la plantilla en el lugar del código oportuno y si es en un gadget este será de tipo HTML/javaScript.




<a aiotitle="click para expandir" href="javascript:togglecomments('Identificador')">SPOILER</a>
<div class="commenthidden" id="Identificador">Contenido Oculto</div>


Personalizar :

Identificador: Hace referencia a un nombre que tendréis que darle al spoiler, este nombre tendrá que ser único, es decir dos spoiler no podrán tener el mismo nombre, podréis asignarle cualquiera que se os ocurra ya que este no se verá reflejado en ningun lugar.

Contenido Oculto: Aquí es donde insertaréis el texto o imágen oculto

• Para insertar imágenes tendréis que subirlas a un servidor de imágenes como puede ser tinipyc, una vez generado el código tendréis que copiar el primer enlace donde dice: Dirección HTML para sitios Web y sustituirlo por donde puse contenido oculto.

• Para insertar texto, donde puse contenido oculto insertar algo de este tipo

  <span style="font-weight:bold;">Aqui el texto que queráis</span>
  

  Podéis por supuesto modificar el estilo de letra tamaño, color...
  

Nota: Combinar los pasos anteriores es muy simple, simplemente es realizar las acciones en el orden que más os convenga.

TEXTO SIGUE RATON

Poner un texto que persiga al ratón por cualquier parte de la pantalla es muy fácil tal solo tendréis que seguir las siguientes indicaciones.

Primer paso: Ve a Diseño->Nuevo Gadget->HTML/Javascript

Segundo paso: Tendrás que copiar el siguiente código.

<script language="JavaScript" type="text/javascript">
mensaje = 'Deja tus comentarios';
font = 'Arial';
size = 2;
color = 'red';
velocidad = 0.8;

n4 = (document.layers);
ie = (document.all);
n6 = (document.getElementById);
mensaje = mensaje.split('');
n = mensaje.length;
a = size*10;
ymouse = 0;
xmouse = 0;
props = "<font face="+font+" color="+color+" size="+size+">";
if (n4)
{
for ( i = 0; i < n; i++)
document.write('<layer left="0" top="0" width="+a+" name="n4mensaje'+i+'" height="+a+"><center>'+props+mensaje[i]+'</font></center></layer>');
}
else if (ie)
{
document.write('<div id="padre" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < n; i++)
document.write('<div id="iemensaje" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props+mensaje[i]+'</font></div>');
document.write('</div></div>');
}
else if (n6)
{
document.write('<div id="padre" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i = 0; i < n; i++)
document.write('<div id="iemensaje'+i+'" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props+mensaje[i]+'</font></div>');
document.write('</div></div>');
}
if(n4)
window.captureEvents(Event.MOUSEMOVE);
function Mouse(evento)
{
if(ie)
{
xmouse = event.x+20;
ymouse = event.y+20;
}
else if(n4 || n6)
{
xmouse = evento.pageX+20;
ymouse = evento.pageY+20;
}
}
if(n4)
window.onMouseMove = Mouse
else if(ie || n6)
document.onmousemove = Mouse;
y = new Array();
x = new Array();
Y = new Array();
X = new Array();
Yaux = new Array();
Xaux = new Array();
for (i=0; i < n; i++)
{
y[i] = 0;
x[i] = 0;
Y[i] = 0;
X[i] = 0;
Yaux[i] = 0;
Xaux[i] = 0;
}
function asigna()
{
if (ie)
padre.style.top = document.body.scrollTop;
for (i = 0; i < n; i++)
{
if(n4)
{
document.layers['n4mensaje'+i].top = y[i];
document.layers['n4mensaje'+i].left = x[i]+(i*(a/2));
}
else if(ie)
{
iemensaje[i].style.top = y[i];
iemensaje[i].style.left = x[i]+(i*(a/2));
}
else if(n6)
{
eval("document.getElementById('iemensaje"+i+"').style.top = '"+y[i]+"px'");
eval("document.getElementById('iemensaje"+i+"').style.left = '"+(x[i]+(i*(a/2)))+"px'");
}
}
}
function ondula()
{
y[0]=Math.round(Y[0] +=((ymouse)-Y[0])*velocidad);
x[0]=Math.round(X[0] +=((xmouse)-X[0])*velocidad);
for (var i = 1; i < n; i++)
{
Yaux[i] = Math.round(Y[i]);
Xaux[i ]= Math.round(X[i]);
y[i] = Math.round(Y[i]=Yaux[i]+(y[i-1]-Y[i])*velocidad);
x[i] = Math.round(X[i]=Xaux[i]+(x[i-1]-X[i])*velocidad);
}
asigna();
setTimeout('ondula()',50);
}
window.onload = ondula;
</script>


Tercer paso:(personalización)
No os asusteis por el código ya que lo único que tendréis que cambiar es:

mensaje: 'Escribir el que vosotros queráis'
font: podéis elegir entre Arial, Verdana, Helvetica, Comic Sans MS(es el tipo de letra)
size: tamaño de la letra
color: red, white, black, blue, green (color del texto)
velocidad: velocidad con que se mueven las letras.

ENLACE EN OTRA VENTANA

A la hora de crear entradas en ocasiones se desea crear enlaces para ampliar la información descrita o bien para aclarar ciertos términos, es lo que llamamos vínculos o enlaces, por ejemplo en el editor de blogger tenemos un botón que nos permite crear vínculos de forma muy sencilla, lo único que tendremos que hacer es seleccionar el texto que queramos que sea el vínculo y pulsar el botón seleccionado con el círculo rojo en la siguiente imagen.

Se abrirá un cuadro como el siguiente:

Aquí insertaremos la dirección hacia donde queramos que nos lleve el vínculo.

¿Que ocurre con este tipo de vínculos?

Uno de los 'problemas' que tienen es que al pinchar el navegador carga la nueva página en la misma ventana, esto en ocasiones puede ser conveniente pero en muchos otros casos no, ya que es una forma de alejar a tus visitantes de tu web o blog. El remedio es muy sencillo y consiste en abrir ese nuevo enlace en una nueva ventana.

Procederemos de la siguiente forma:

Nos dirigiremos a Edición de HTML y buscar:

<a href="http://La dirección de destino">Palabra o frase como vínculo</a>

Lo único que tendréis que añadir es el parámetro target de forma que quede de la siguiente forma.



<a target="_blank" href="http://La dirección de destino">Palabra o frase como vínculo</a>


El resultado será algo así: Enlace a wikipedia

SUBRAYAR TEXTO

En ocasiones los editores no disponen de funcionalidades como puede ser la de subrayar texto, nos encontramos por ejemplo con el editor de blogger que no permite subrayar, para subrayar un texto lo tendremos que hacer como a continuación detallo.

Dirigiros a Edición de HTML y tendréis que añadir el texto que queráis subrayar con la siguiente estructura:

<u>Aquí el texto que queráis subrayar</u>


Resultado: Aquí el texto que queráis subrayar

TACHAR TEXTO

Las funciones del editor de blogger son limitadas, pero html no, por eso os voy a enseñar a tachar texto, esta función es muy útil por ejemplo en lugares donde se permiten descargas, de esta forma se puede indicar que la descarga no está disponible, podréis hacer uso de tachar de una forma muy sencilla y es de la siguiente forma.

Tendréis que iros la parte de Edición de HTML de vuestra entrada y una vez aquí añadir vuestro texto con la siguiente estructura.


<s>Aquí el texto que queráis tachar</s>


Resultado: Aquí el texto que queráis tachar