Y por inexperiencia o vagancia no sé encontrar los gadgets que quiero. En Tirando de Blog encontré un script bastante majo para poner una frase aleatoria, pero claro, a la hora de ponerlo me encontré con un buen lío. Una vez lo puse me encontré con que quería ponerle enlaces, los tipos de letra no me encajaban y no sabía cómo centrar los elementos. El caso es que buceando encontré cómo están hechas las plantillas del blogger y con todo eso ya tenía para hacer lo que quería.
Vayamos por parte, como dijo Jack:
en la ayuda de google encontré esto para hacerte gadgets, no es muy cómodo, aparte de tener que aprender cosas específicas de blogger y trabajar gratis para ellos no necesitaba algo tan complicado. Sólo quería usar el código de tirando de blog un pelín modificado para mí. En el mismo JavaScript quería poner enlaces, frases y los banners de los buscadores, para que fueran apareciendo aleatoriamente en un trozo del blog, y así no llenar la parte de arriba con listas interminables de enlaces.
Modificando un poquitin el código, queda algo asin.
<script type='text/javascript'>
function CambiaEnlace(llamador,tabla,elementos)
/* nótese que he creado una función con tres parámetros, llamador, tabla y elementos*/
{
/* Esta es la tabla en la que defino propiedades de los enlaces que quiero mostrar aleatoriamente.
He creado tablas de dos dimensiones para luego poder escribir cada propiedad por separado , también hay otras formas de hacerlo.*/
var Enlaces = new Array();
/*el primer elemento de la segunda dimensión es el texto que se mostrará en el enlace
El segundo es la dirección a la que quiero ir y el tercero es si se abrirá en una nueva ventana "_blank", o en la misma "" o " _self"*/
Enlaces[0] = ["El bundo a los 40", "http://bundoalos40.blogspot.com/","_blank"];
Enlaces[1] = ["Tirando de BLOG", "http://tirandodeblog.blogspot.com", "_blank"];
/*En esta tabla se definen las propiedades de los banners, hay un elemento mas porque los enlaces que te proporcionan añaden la propiedad title a su código y preferí respetarlo*/
var misBanners = new Array();
misBanners[0] = ["<img alt='directorio de weblogs. bitadir' border='0' src='http://www.bitadir.com/templates/img/banners/bitadir_94x15.gif'/>", "http://www.bitadir.com", "_blank", "directorio de weblogs. bitadir"];
misBanners[1] = ["<img alt='Top Blogs' src='http://www.alianzo.com/images_bloggersnet/alianzo80x15.jpg'/>", "http://www.alianzo.com/net/top-blogs", "_blank", "Top Blogs"];
/* Y en esta tabla defino textos que quiero que aparezcan aleatoriamente, sólo tiene un elemento*/
var misCositas = new Array();
misCositas[0] = ["No hay mucho que contar en una vida normal. Pensamientos y recuerdos la describen."];
misCositas[1] = ["No me gusta el trabajo, nací cansado. El trabajo es una gran putada.<br/>Tengo un amigo que no tiene remedio, trabaja todo el día porque es un cerdo.<br/>(Los Ilegales)"];
/* Aquí se generan un número aleatorio la función eval permite que pueda usar el parámetro tabla para elegir la tabla cuya cantidad de elementos estoy midiendo*/
aleatorio = eval("Math.random() * (" + tabla + ".length)")
aleatorio = Math.floor(aleatorio)
/* y aquí se escribe el html, llamador es el id del elemento que estoy modificando y eval me permite de nuevo seleccionar la tabla según el parámetro. document.getElementById(xx).innerHTML básicamente hace lo mismo que document.write, pero en la etiqueta que le digo con llamador y la función getElementById*/
document.getElementById(llamador).innerHTML=eval(tabla + "[" + aleatorio + "][0]");
if (elementos >= 1)
{document.getElementById(llamador).href=eval(tabla + "[" + aleatorio + "][1]");}
if (elementos >= 2)
{document.getElementById(llamador).target=eval(tabla + "[" + aleatorio + "][2]")}
if (elementos >= 3)
{document.getElementById(llamador).title=eval(tabla + "[" + aleatorio + "][3]");}
}
</script>
Caray, si que ha quedado largo. Por cierto, para publicar código está esta página.
Hay otras formas de hacer lo mismo, creándose objetos y asignando propiedades en vez de hacerse una tabla bidimensional. Pero me resulta más cómodo para mis futuras intenciones.
Y ahora a llamar al script.
En un elemento HTML/JavaScript pongo el código de llamada a la función que hemos creado, poniendo parámetros distintos para decirle qué es lo que tiene que hacer.
Si queremos que muestre un texto:
miscosas es el Id del elemento que queremos manipular, lo va a usar getElementById (parámetro llamador). Cositas es el nombre de la tabla donde guardamos los textos que queremos mostrar (parámetro tabla). El numerajo (parámetro elementos) indica la cantidad de elementos de la tabla que vamos a usar, en este caso la tabla sólo tiene uno por indice, la cadena de texto.
<p id="miscosas">pp</p>
<script language="JavaScript">
CambiaEnlace("miscosas","misCositas",1)
</script>
Mostrar un enlace:
Como esta tabla tiene tres elementos lógicamente ponemos 3 en los parámetros, pero fijaos que además he puesto un style en la etiqueta para que se muestre el texto exactamente como yo quiero en vez de cómo lo mopstraría el blogger por defecto.
<a id="mienlace" style="text-align:center;font-size: 90%; color:#f0f0f0" href="http://www.blogger.com/pp">pp</a>
<script language="JavaScript">CambiaEnlace("mienlace","Enlaces",3)
</script>
Imaginaos el banner cómo iría ;)
Y LO MÁS IMPORTANTE PARA EL FINAL:
El script con la función DEBE ir justo después de la etiqueta
<head> para que se pueda llamar desde cualquier parte de la página, si lo colocamos en otro sitio es muy posible que no funcione.
Para colocarlo allí basta con ir al diseño html y pegar el código.
Si quereis ver como queda, id al causante de todo este lío, mi blog principal.
Otro día le añadiré elementos de estilo para poder controlar el tamaño de la fuente, la alineación, el tipo de letra y el color, básicamente es añadir algunos elementos a las tablas y modificar un poco la parte en que se aplican las propiedades. En realidad se puede hacer todo simplemente poniendo <p id="elemento"></p>y getElementById("elemento").innerHTML = "el código HTML de lo que se quiera mostrar entre <p>y </p>", pero separándolo un poco se ve mejor y puedes controlar más fácilmente cada cosa.
Suscribirse a:
Enviar comentarios (Atom)
0 comentarios:
Publicar un comentario