jueves, 19 de mayo de 2016

ASÍ LO HICE: Marquesina con Imágenes/Links

¡Hola a todos! Mediante la Iniciativa My Best Friend Blogger, conocí a Helena, la autora del Blog "Basado en Hechos Reales". Si pasan a visitarla, tiene un blog muy muy bonito. Justo por eso se nos ocurrió inaugurar en conjunto esta sección llamada "Así lo hice": para poder acercar a nuestros lectores los secretos que vamos aprendiendo para mejorar las apariencias de los blogs.

En esta primera entrada, quiero contarles cómo hice la marquesina que esta bajo el título del blog. Se ven imágenes miniatura de los distintos libros leídos, y si las clickean, lleva directamente a la reseña de dicha lectura.


Para conseguirlo, lo que tuve que hacer fue lo siguiente:
1- Ir a la sección "Diseño" del Blog.
2 - Clic en "Agregar un gadget" en Cross Column. Seleccionar Gadget HTML/JavaScript.
3- Insertar el siguiente código (con las modificaciones que explicaré más abajo)

<marquee behavior="scroll" direction="left" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="8" width="100%">
<a href="URL DE ENLACE 1" target="_blank"><img height="240" src="URL DE IMAGEN 1"width="160" /></a>
<a href="URL DE ENLACE 2" target="_blank"><img height="240" src="URL DE IMAGEN 2"width="160" /></a>
<a href="URL DE ENLACE 3" target="_blank"><img height="240" src="URL DE IMAGEN 3"width="160" /></a>
</marquee>

4-Aceptar.

¿Qué es lo que hay que modificar en el código?
  • Donde marqué LEFT en color anaranjado, no es necesario modificar. Es la dirección en que se mueven las imágenes. El mío va para la izquierda y por eso dice left, pero también puede cambiarse por up, down o right.
  • URL DE ENLACE: Se trata del link a donde quieres que te lleve la imagen al hacerle clic. En mi caso, el link de la reseña de cada libro.
  • URL DE IMAGEN: La dirección de la imagen miniatura del libro. En mi caso, subí todas las imágenes a Photobucket, un sitio de alojamiento gratuito para imágenes (y videos creo), que tiene un sistema de carga bastante sencillo, y con sólo subirlo en nuestra carpeta nos brinda un enlace directo a la imagen.
Puede agregar más líneas copiando y pegando esas tres, una por cada imagen/link.
También podría modificarse el tamaño de las imágenes, cambiando los valores height y width de cada línea.

Creo que eso fue todo por ahora. Espero haber sido clara y que la entrada les resulte útil.
En el caso de que algo no se entienda o me haya faltado información, no duden en comentar!

También Los invito a pasar por http://basado-hechos-reales.blogspot.com/ donde Helena nos comenta en esta ocasión cómo modificó la plantilla de su blog que me encanta!

Nos leemos,

B-

11 comentarios:

  1. Wow! pensé llevaba otro código en el HTML del blog, no sé, algo antes de "/body" XD Es la costumbre, todos los gadgets que tengo por lo general llevan dos o tres códigos TnT.
    Me gusto el post, esta muy claro y vas al grano, sin rodeos :D
    Para que se animen a preguntar, yo quiero saber como colocaste el titulo de tu blog, es decir: es una ¿imagen completa? y de ser así ¿como la subiste para ponerla en el blog?

    ResponderEliminar
    Respuestas
    1. Es super sencillo, viste?
      Si, es una imagen completa a la que le agregué texto. Lo puse donde va el título, se puede optar por título, imagen o título e imagen.

      Eliminar
  2. Hola! Que bueno que acerques a tus lectores a cómo decorar los blogs. Me gustó, a ver si lo implemento...

    Besitos de Leer llena el alma

    ResponderEliminar
    Respuestas
    1. Muchas gracias Ari espero que puedas implementarlo y cualquier cosa me consultas. Saludos.

      Eliminar
  3. Hola!

    Me ha encantado la entrada,me llevo el código para poder ponerlo en un futuro en mi blog porque yo soy muy mala con estas cosas. Te agradezco un montón la entrada.

    Un beso ;)

    ResponderEliminar
    Respuestas
    1. De nada Nieves, me alegro de que sea útil.
      Saludos, nos leemos :)

      Eliminar
  4. Hola!! te he nominado al premio Liebster Award espero que puedas hacerlo y estoy deseando leer tus respuestas.
    Besos!!
    http://thornbooks.blogspot.com.es/2016/05/liebster-award-2016.html

    ResponderEliminar
    Respuestas
    1. Hola! Hace poco hice el Liebster Award, pero creo que es para personas con menos seguidores.
      Gracias de todas maneras por nominarme, si me hago un tiempo, por qué no hacer otro?
      Saludos.

      Eliminar
  5. Hola!
    Me pasaba por tu blog y a decir verdad me ha encantado el contenido, seguiré leyendo.
    Vengo de la iniciativa Seamos Seguidores ^^
    Te sigo desde: http://mundos-de-pluma-y-papel.blogspot.com.es/

    ResponderEliminar
  6. hola, yo tampoco leí tu post, solo vine a decirte que me sigas porque así lo dice la iniciativa... besos ¬¬
    Na... yo si leí el post, de hecho vengo del blog de http://basado-hechos-reales.blogspot.com.
    También se me iso tan sencillo la manera en que colocaste el Slider, me dan ganas de ponerlo en mi espacio pero me da miedo a que gaste mas recursos y haga mas pesado el sitio, aunque me lo contemplare (ya esta mi sitio muy cargado XD)
    Saludos y muy buena vibra!!!

    ResponderEliminar
    Respuestas
    1. Si, puede enlentecer la carga, yo por eso no agregué mucho más (?)
      O quizás porque sea bastante mala con estas cosas jajaja.
      Muchas gracias por comentar :)

      Eliminar