viernes, 12 de octubre de 2007

Consejos para tu blog: Texto e imágenes aleatorias

Existe una gran cantidad de trucos y hacks para blogs, algunos con capacidades muy atractivas y otros con capacidades muy inútiles. Pero sin duda, si quieres desarrollar una página única con identidad propia, los mejores trucos son los más flexibles, los que te ofrecen más posibilidades de personalización a tu manera, y este es uno de esos.

El siguiente truco te permite añadir a tu página una imagen o texto, que irá cambiando cada vez que el usuario recargue o ingrese de nuevo a la página. De esta manera puedes incluir, por ejemplo, algunos de tus pensamientos favoritos para que la gente los lea, y se encuentre uno nuevo cada vez que entre a tu blog, o para poner fotos que quieras compartir, con el mismo comportamiento.

Puedes verlo funcionarlo en esta misma página. Haz clic en "Recargar" o "Actualizar" en tu navegador, y verás que al hacerlo el texto y la imagen a la derecha cambiarán por otro texto y otra imagen.

Para implementar esto en tu blog (en Blogger), sigue estos pasos:

1. Ve a la pestaña "Plantilla" o "Diseño" de tu panel de Blogger, y ahí selecciona la pestaña "Edición de HTML". Se abrirá una página que contiene el código HTML de tu blog. Recuerda que siempre debes guardar una copia de seguridad de tu plantilla antes de modificarla.

2. Busca en el código de tu plantilla la etiqueta <head> e incluye debajo de ella el siguiente código:

<script type='text/javascript'>
var numeroitems = 4 ;
var numaleatorio = Math.random() ;
var aleatorio = Math.round( (numeroitems-1) * numaleatorio) + 1 ;
items = new Array
items[1] = "Elemento 1"
items[2] = "Elemento 2"
items[3] = "Elemento 3"
items[4] = "Elemento 4"
var item = items[aleatorio]
</script>


Lo que hace el código anterior es seleccionar uno de los elementos que le indicamos, al azar. Deberás sustituir "Elemento 1", "Elemento 2", "Elemento 3" y "Elemento 4" por el texto o las imágenes que quieras que aparezcan aleatoriamente.

Por ejemplo si quieres aplicar imágenes aleatorias, el código sería algo como esto:

<script type='text/javascript'>
var numeroitems = 4 ;
var numaleatorio = Math.random() ;
var aleatorio = Math.round( (numeroitems-1) * numaleatorio) + 1 ;
items = new Array
items[1] = "http://www.123clipart.com/freestuff/
backgrnds/bg1.jpg"
items[2] = "http://www.123clipart.com/freestuff/
backgrnds/bg11.jpg"
items[3] = "http://www.123clipart.com/freestuff/
backgrnds/bg23.jpg"
items[4] = "http://www.123clipart.com/freestuff/
backgrnds/bg24.jpg"
var item = items[aleatorio]
</script>


Verás que "Elemento 1", "Elemento 2", "Elemento 3" y "Elemento 4" han sido sustituidos por las direcciones URL de las imágenes.

En el caso de quieras aplicar texto aleatorio, lo único que tienes que tienes que hacer es indicar las frases que quieras que se muestren aleatoriamente. Y no tienen que ser solo cuatro elementos, pueden ser todos los que tu quieras, sólo tienes que crear otra línea:

items[n] = "Elemento n"

por cada elemento que quieras, donde n sería el número del elemento, y modificar el valor de:

var numeroitems = m ;

para hacerlo coincidir con el número de elementos, donde m sería el número total de elementos.

Mira el siguiente ejemplo:

<script type='text/javascript'>
var numeroitems = 11 ;
var numaleatorio = Math.random() ;
var aleatorio = Math.round( (numeroitems-1) * numaleatorio) + 1 ;
items = new Array
items[1] = "Hola"
items[2] = "Esto es un texto aleatorio"
items[3] = "Recarga la página y verás otro texto"
items[4] = "¿Cómo estas?"
items[5] = "Gracias por visitar (entre paréntesis)"
items[6] = "Que estés bien"
items[7] = "Los mejores tutoriales en internet están en (entre paréntesis)"
items[8] = "En serio"
items[9] = "Bienvenido"
items[10] = "Vuelve pronto"
items[11] = "No olvides guardar una copia de tu plantilla antes de modificarla"
var item = items[aleatorio]
</script>


Verás que en este ejemplo, el número de elementos es 11, y esa es la cantidad de items, y el valor de

var numeroitems = 11 ;

Ahora selecciona "Guardar plantilla" para aplicar los cambios a tu blog.

3. Ya tenemos la función habilitada, lo siguiente es aplicarla donde queramos. Lo que tenemos que hacer es incluir los códigos siguientes donde deseemos el contenido aleatorio, dependiendo de si se va a usar texto o imágenes:

Para texto:

<script language="JavaScript">
document.write(item)
</script>



Para imágenes:

<script language="JavaScript">
document.write('<img src="' + item + '">')
</script>


Puedes usar la función donde quieras (excepto en los posts). Yo la implementé como un elemento de mi barra lateral, pero puedes por ejemplo introducirla en el código de tu cabecera para que esta sea distinta cada vez que se recargue tu página.

Cualquier duda o problema que tengas, comunícalo en los comentarios.

21 comentarios:

  1. me gustan los trucos que enseñas en tu blog
    lamentablemente soy una ñurda con los formatos y con tanto ppd hhp y todos las letritas esas... si con suerte puedo poner una plantilla mas bonita xD
    tienes razon, siempre confundo al cubo con al cuadrado y tengo la mala costumbre de usar como sinonimo el al cuadraro con la mitad...
    gracias por fijarte en eso! que estes bien

    ResponderBorrar
  2. ALejo!! cómo es que no nos vimos en el Blogstock....ah???? =(

    ResponderBorrar
  3. jelouw, no conosco su nombre, pero me ha gustado mucho su blog, sabe le queria preguntar, por este truco, que ya lo he activado, pero si lo quiero poner como header aleatorios, donde pongo el ultimo codigo que dio, mmm tengo la plantilla k2 por si le sirve de algo, muchas gracias, y muy bonito su espacio. que este bien, y ojala pueda responderme :)

    ResponderBorrar
  4. luis, para implementar el truco como header en Blogger (.blogspot) el procedimiento es eliminar la cabecera de la plantilla y sustituirla por el código de las imágenes aleatorias.

    1. Para eliminar la cabecera por defecto tienes que ubicar y eliminar en el código HTML de tu blog la porción de código que está en este link (puede variar dependiendo a la plantilla): CÓDIGO DEL HEADER. Para poder encontrar este código debes activar la casilla "Expandir plantilla de artilugios" en el editor HTML. Recuerda siempre guardar una copia de seguridad de tu plantilla antes de modificarla. Guarda los cambios a tu plantilla.

    2. Para insertar el código de las imágenes aleatorias ve a "Diseño" o "Plantilla" en tu panel de Blogger y selecciona la pestaña "Elementos de página". Añade un nuevo elemento de página de tipo "HTML/Javascript" e incluye en él el código de las imágenes aleatorias. Ubica el elemento de página en el lugar que ocupaba el header y guarda los cambios.

    Y listo, ese es el procedimiento. Ten en cuenta que el tamaño de las imágenes debe ser el adecuado, ya que estas se mostrarán en su tamaño original. Gracias por visitarnos, me avisas cómo te fue aplicando el truco.

    ResponderBorrar
  5. Hola era lo que andaba buscando gracias amigo no se su nombre pero el blog es interesante y me sirvió bastante,ya lo linkee Saludos y un buen fin de semana.

    ResponderBorrar
  6. Hola, muy utiles consejos, tengo una pregunta a ver si me puedes ayudar. Estoy planeando poner un texto y una imagen relacionadas entre si pero quiero que el bloque sea aleatorio. ¿Es esto posible con este tipo de scripts?
    Lo que quiero es como poner aleatoriamente una celda de una tabla o algo asi que me permita tener bloquecitos de imagen y su texto aleatorias.
    Un saludo y mil gracias de antemano.

    ResponderBorrar
  7. hola!

    yo estoy utilizando la plantilla blogy minimalista negro y me gustaria hacer la imagen de la cabecera aleatoria ya he probado los codigas que has dado hasta el tuco ke le has dado a luis y ninguno me ha funcionado, espero y me puedas ayudatr sera algo fantastico en mi blog ya que esta orientado a arquitectos y disenhadores.

    gracias!!!

    ResponderBorrar
  8. y como lo inserto en la barra lateral??????

    ResponderBorrar
  9. chevere, gracias por los codigos... me preguntaba si sabes como podria poner un color y tamaño diferente al texto de cada item...

    ResponderBorrar
  10. Este comentario ha sido eliminado por el autor.

    ResponderBorrar
  11. Me hice un script similar pero para cargar consejos al final de la página. Cada día uno, y eso le da más dinamismo a mi blog.

    ResponderBorrar
  12. Saludos, soy nuevo en esto y me interesa mucho la aportación que mencionas, sin mebargo he hecho todo lo qu dices y me marca error, espero puedas ayudarme, saludos.

    ResponderBorrar
  13. Ya vi que fue el detalle, sobra un mayor que en el primer código que mecionas, después new Array

    ...
    numaleatorio) + 1 ;
    items = new Array>
    items[1] = "Elemento 1"
    ...

    gracias y saludos.

    ResponderBorrar
  14. Gracias por el comentario betogoncoy, ya arreglé el error

    ResponderBorrar
  15. Buenas a todos............soy nuevisimo en esto........mi gran duda es ke no se como localizar el codigo ke me piden,,,,es decir,,,,, lo tengo ke hacer a ojo...buscarlo entre todo ese mundo de matrix? jajaj

    ResponderBorrar
  16. Hola!!!, antes que todo, gracias por tu blog, muy interesante y bueno. Mi pregunta es la siguiente: Quiero hacer lo mismo, pero con 24 imágenes asociadas a textos en bloques, en forma aleatoria. Se puede hacer? Cómo?
    Atento a tu respuesta y muchas gracias.

    ResponderBorrar
  17. Saludos Angeloterapia. ¿Cuando dices "texto en bloques", a qué te refieres exactamente?

    Si lo que quieres es que cada imagen tenga asociada un texto, lo que tienes que hacer es tener un arreglo para las imágenes y otro para los textos, donde la imagen en la posición cero del arreglo de imágenes este asociado al texto en la posición cero del arreglo de textos, la imagen en la posición 1 con el texto en la posición 1 y así sucesivamente... Luego, generas el numero aleatorio y usas la imagen en la posición aleatorio y el texto en la posición aleatorio.

    ResponderBorrar
    Respuestas
    1. Justamente a eso me refiero, sí....
      He hecho lo que dices, pero no me funciona.......
      En todo caso, a modo de información, el texto no es sólo una frase, sino más bien un párrafo de unas 5 lineas cada uno...... Tienes algún mail donde te pueda mandar lo que he hecho y que no me funciona en mi blog? Atte.
      Gracias

      Borrar
    2. LO LOGREEEEEEEE!!!!!!!!!
      Gracias !!!!!!

      Borrar
  18. Este comentario ha sido eliminado por el autor.

    ResponderBorrar

Síguenos en twitter