Tutorial: Cómo poner las ultimas reseñas debajo de la cabecera del blog con portada y link

¡Hola a todos!

Hoy estrenamos sección en el blog, y es que en una quedada bloguera en la que me lo pasé genial, vi que puedo ayudar un poquito con algunos consejos. La idea es hacer una entrada semanal, que generalmente será los fines de semana.

Hoy vamos a ver cómo poner las últimas reseñas bajo la cabecera, tal y como está en mi blog.

Cómo poner las portadas de reseñas

Os voy a explicar 2 modalidades: una sin espacios entre las portadas, y otra con espacios.

Imagen 1
Para que las portadas queden como en la imagen 1, haremos lo siguiente (sin espacios entre ellas):

Necesitamos tener ya la reseña publicada en el blog (para que tenga una URL), y también tenemos que subir la imagen de la portada a un servidor tipo Photobucket, el que uséis normalmente (así la imagen también adquiere una URL).

Una vez hecho esto, entramos al escritorio de blogger, vais a diseño y añadís un nuevo gadget de HTML. Pulsad en el gadget y arrastrarlo en vuestra plantilla a la posición en la que lo queráis colocar, por ejemplo bajo la cabecera.

Luego copiáis este código:

<a href="http://historiasscontadass.blogspot.com.es/2016/01/resena-lazos-de-sangre-satoru-takamiya.html" target="_blank" title="Reseña"><img height="190px;" src="http://i1296.photobucket.com/albums/ag10/LuzHC/lazosdesangre1_zpsmf4hef8v.jpg" width="120px;" / /><img height="190px;" src="http://i1296.photobucket.com/albums/ag10/LuzHC/libros-portada-ponte-en-mi-lugar_zpsns3x8nwc.jpg" width="120px;" / /></a>

---------------------------------------------------------------------------------------



<a href="http://historiasscontadass.blogspot.com.es/2016/01/resena-lazos-de-sangre-satoru-takamiya.html" target="_blank" title="Reseña"><img height="190px;" src="http://i1296.photobucket.com/albums/ag10/LuzHC/lazosdesangre1_zpsmf4hef8v.jpg" width="120px;" / /><img height="190px;" src="http://i1296.photobucket.com/albums/ag10/LuzHC/libros-portada-ponte-en-mi-lugar_zpsns3x8nwc.jpg" width="120px;" / /></a>


En el trozo marcado en amarillo, tenéis que poner el enlace de vuestra reseña. Éste se obtiene pinchando en el título de la reseña del blog y copiando lo que aparece en el explorador.

El trozo que aparece en lila lo tenéis que sustituir por la URL de la imagen del libro reseñado. Tenéis que coger el enlace que os da Photobucket.




En el subrayado verde veis que pone Reseña, podéis cambiar este texto por cualquiera que queráis.
Width y Height son el ancho y altura que vais a dar a todas las portadas en píxeles para que queden todas del mismo tamaño, podéis modificar el número que yo he puesto también.

Tenéis que añadir el código entero por cada portada que queráis añadir, es decir, de 2 portadas y cambiando los valores sería:

<a href="http://historiasscontadass.blogspot.com.es/2016/01/resena-lazos-de-sangre-satoru-takamiya.html" target="_blank" title="Reseña"><img height="190px;" src="http://i1296.photobucket.com/albums/ag10/LuzHC/lazosdesangre1_zpsmf4hef8v.jpg" width="120px;" / /><a href="http://historiasscontadass.blogspot.com.es/2016/01/resena-lazos-de-sangre-satoru-takamiya.html" target="_blank" title="Reseña"><img height="190px;" src="http://i1296.photobucket.com/albums/ag10/LuzHC/lazosdesangre1_zpsmf4hef8v.jpg" width="120px;" / />

Cambiando simplemente los párrafos amarillos por las URL de cada libro.

Si además queréis centrar todo el conjunto, añadid al principio de todo el bloque: <center> y al final de todo el bloque </center>

Quedaría el código centrado de la siguiente manera:

<center><a href="http://historiasscontadass.blogspot.com.es/2016/01/resena-lazos-de-sangre-satoru-takamiya.html" target="_blank" title="Reseña"><img height="190px;" src="http://i1296.photobucket.com/albums/ag10/LuzHC/lazosdesangre1_zpsmf4hef8v.jpg" width="120px;" / /><a href="http://historiasscontadass.blogspot.com.es/2016/01/resena-lazos-de-sangre-satoru-takamiya.html" target="_blank" title="Reseña"><img height="190px;" src="http://i1296.photobucket.com/albums/ag10/LuzHC/lazosdesangre1_zpsmf4hef8v.jpg" width="120px;" / /></center>




Con este código ya tendríais 2 portadas linkadas de 2 reseñas. Solo es ir añadiendo el bloque por cada una y sustituir.

Si además queréis que estén separadas por un espacio en blanco, solo tenéis que agregar &nbsp; detrás de cada bloque, quedaría el código así:

<center><a href="http://historiasscontadass.blogspot.com.es/2016/01/resena-lazos-de-sangre-satoru-takamiya.html" target="_blank" title="Reseña"><img height="190px;" src="http://i1296.photobucket.com/albums/ag10/LuzHC/lazosdesangre1_zpsmf4hef8v.jpg" width="120px;" / />&nbsp;<a href="http://historiasscontadass.blogspot.com.es/2016/01/resena-lazos-de-sangre-satoru-takamiya.html" target="_blank" title="Reseña"><img height="190px;" src="http://i1296.photobucket.com/albums/ag10/LuzHC/lazosdesangre1_zpsmf4hef8v.jpg" width="120px;" / />&nbsp;</center>



Aunque la entrada es larga y parece complicado, una vez que entiendes la idea de cómo va, es muy sencillo. Si no os ha quedado claro o no os sale no dudéis en preguntar. 




¿Os ayuda? Espero que sí
¡Os leo!

22 comentarios:

  1. Respuestas
    1. Ya lo he visto !! te ha quedado genial :) y eso que te he escrito una explicación breve. Me alegro que te haya servido :3

      Eliminar
  2. Esta muy chulo el tutorial, espero que te animes a hacer alguno mas Luz.
    Un beso enorme.

    ResponderEliminar
    Respuestas
    1. Quiero hacer uno a la semana de cosas que crea que son útiles. Se aceptan peticiones, yo haré hasta donde sepa ^^

      Un beso grande a ti también :3

      Eliminar
  3. ¡Hola!
    Que genial el tutorial, yo tengo este gadget en la barra lateral de mi blog :) pero a lo mejor me termino animando a moverlo arriba :)

    ¡Un abrazo y gracias! ^^

    ResponderEliminar
  4. Muchas gracias por el tutorial!!! Tengo que probarlo :)

    ResponderEliminar
  5. En cuanto tenga un momento lo probaré en nuestro blog. Una buenísima idea para quienes estamos un poco "verdes" en todos estos temas. ¡Gracias y un abrazo!

    MH

    ResponderEliminar
  6. Justo iba a hacer un tutorial sobre esto jajaja Igual lo haré con mi método.

    ¡Saludos! :)

    ResponderEliminar
  7. Justo lo estaba buscando.
    Sabes cómo se hace para poner un cuadro en una entrada? Por ejemplo veo que los blogs los suelen usar para poner las sinopsis de los libros.

    ResponderEliminar
  8. ¡Hola!
    Me llama mucho la atención. Tal vez más adelante lo haga.
    muchas gracias
    saludos

    ResponderEliminar
  9. Muchas gracias por compartir tus conocimientos, estas cosas siempre vienen bien saberlas! 1beso!

    ResponderEliminar
  10. ¡Hola guapa!
    A mí me ha gustado mucho el tutorial, se entiende muy bien. Ahora me queda decidirme si ponerlo o no :D
    ¡Besos!

    ResponderEliminar
  11. ¡Hola! Muchas gracias por tu explicación. Soy una negada para el Html y con tu tutorial he conseguido hacerlo como quería.
    Un beso muy grande. :)

    ResponderEliminar
  12. Yo no sé que estoy haciendo mal :( pero no se colocan bien cuando pongo más de dos. ¿Qué debo hacer?

    ResponderEliminar
    Respuestas
    1. Hola Andrea mándame un email a historiascontadas000@gmail.com con el código que estás usando a ver si te puedo ayudar :)

      Eliminar
  13. ¡Hola!

    ¡Muchas gracias por el tutorial! Me ha sido muy útil. Lo único... No hace falta subir la imagen a Photobucket. Una vez que la entrada está publicada, encima de la imagen que quieras usar, pinchas botón derecho y le das a "copiar dirección de imagen" y listo. Así ahorras tiempo, dado que para publicarse en el blog la imagen ya tiene una URL asociada ;)

    Un saludo imaginativo...

    Patt

    ResponderEliminar
  14. ¡¡Muchísismas gracias!! Me ha servido muchísismo.

    Te sigo!

    ResponderEliminar
  15. ¡Hola! No lo entiendo. He seguido los pasos y me aparece tu imagen en lugar de la mía. No consigo poner la foto de la portada.

    ResponderEliminar
    Respuestas
    1. Hola! Has sustituído los links de las imágenes por los tuyos? Si quieres mándame x email tu código y te ayudo.
      historiascontadas000@gmail.com
      Si me lo mandas lo miro esta noche o mañana ;)

      Eliminar
  16. Me acabas de alegrar la semana ¡gracias!

    ResponderEliminar

Tu mensaje no saldrá hasta que lo apruebe.

Al comentar indicas que apruebas expresamente las políticas de privacidad y cookies de este blog.

Muchas gracias por comentar ^^