TUTORIAL BLOGGER: aclarar las imágenes de tu blog y añadir un botón de "leer más"

¡Hola pequeños ciervos! 
Hoy os traigo el primer tutorial, bueno, tutoriales, de el blog. Como ya (creo) que dije, iba a cambiar un poco la temática del blog para añadir otros temas, en este caso son tutoriales, y imprimibles, pero no penséis que esto le quitará protagonismo a la lectura, para nada. Y bueno, empecemos.

//Aclarar las imágenes del blog, al pasar el cursor encima//

Este es muy sencillo, Vamos a Plantilla → Personalizar → Añadir CSS y pegamos esto (encima de todo lo que tengas)


.post-body img:hover { /* Significa que sólo va a afectar a las imágenes de dentro de los post*/opacity:0.6; }
Y ya está, la opacidad podéis variarla a vuestro gusto, pero contra más cercano al 0 más se desvanece la imagen.

//Añadir una botón de "leer más"//

Vamos a Plantilla → Editar HTML y buscamos lo siguiente (para buscar crtl + F):

<data:post.jumpText/>

Borráis esa parte del código y en su lugar añadís:

<img  src='URL de la imagen' width= '200px'/>

Solo tenéis que poner el Url de la imagen de "leer más". Y cambiar el tamaño a vuestro gusto.

Alinear en el centro:

<center><img  src='URL de la imagen' width= '200px'/></center>

Alinear a la derecha:

<div align="right"><img  src='URL de la imagen' width= '200px'/></div>

Y hasta aquí los tutoriales, espero que os haya sido de ayuda.

Feliz domingo.