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

14/9/14

¡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>

Mostrando pie-de-pagina-velvet-cat-2.png

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

 

12 comentarios:

  1. ¡Hola!
    Muchas gracias por los tutoriales. ¡Ya he aplicado el primero a mi blog!
    ¡Saludos!

    ResponderEliminar
  2. He probado el segundo y no funciona,creo que es porque te has dejado una parte importante de como ponerlo en la entrada para que se vea,lo digo porque lo he buscado por otro sitio y si me ha funcionado.
    Espero a los siguientes.
    Saludos^^

    ResponderEliminar
  3. Gracias por el tutorial. No sabía como personalizar el botón de seguir leyendo. Ha sido de gran ayuda. Espero poder hacerlo pronto
    MIl besos^^

    ResponderEliminar
  4. Hola! Lo de leer más ya lo tenía implantado, pero ahora pongo lo de aclarar las imágenes gracias! :)

    ResponderEliminar
  5. ¡Hola!
    Cada vez que entro en el blog veo un diseño distinto XD
    Muy buenos tutoriales ;)

    Un beso!

    ResponderEliminar
  6. Hola! Hace mucho que quiero poner el botón de leer más
    Gracias por el tuto :D
    Besos, nos leemos

    ResponderEliminar
  7. Yo ya lo tengo puesto, pero en su momento tutoriales como éste me ayudaron muchísimo.

    ¡Así que gracias por ponerlo!

    ResponderEliminar
  8. Hola :) Me ha gustado mucho, me parece muy muy útil. Gracias por ponerlo.
    Me ha gustado mucho mucho tu blog, me quedo :)
    Besos desde Andrómeda.

    ResponderEliminar
  9. Muchas gracias por el tutorial,
    Cuando me devuelvan el ordenador lo probaré.
    Besos

    ResponderEliminar

Pues bueno, esto es el texto donde todos los blogs tienen las normas...pero es que eso es aburrido ¿verdad? Este blog también las tiene, pero supongo que ya las sabes, a de más aunque las ponga, nadie les va hacer caso.....¿enserio? ¿Todavía estas leyendo esto? ¿No tienes mucho que hacer verdad? Bueno, me alegro de ello...pero están los libros, coge uno y ponte a leer, luego, vienes y me comentas que te parece, eso sí, sin spoliers ;)