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!