A sweet winter: Tutorial + botones "Leer más"

Tutorial + botones "Leer más"

jueves, 25 de diciembre de 2014

¡Buenas navidades, winteros!

Pues ya llegó el 25 y oficialmente también la navidad. Tenía muchas ganas ya de que llegase y seguir grabando esos acontecimientos de mi familia porque voy a hacer un vídeo de mis navidades. Bueno pues para felicitaros la navidad he hecho este cartel todito para vosotros, porque os quiero y porque os merecéis todo y más:


¿Os gusta? Bueno pues está enterito hecho con la página Canva. Hice un tutorial hace un tiempo de moodboards que podéis ver aquí, y como dije, seguiré haciendo más tutoriales. Pero hoy no toca tutorial de esta página sino un tutorial para colocar en el blog el botón "leer más". Hasta el martes yo no había puesto ninguno pero creo que es muy útil para que una entrada larga no nos ocupe toda la página principal del blog ¿verdad? Por eso os traigo el tutorial con unos botones hechos por mí para descargar.




TUTORIAL "LEER MÁS"

Primero nos vamos a "Plantilla" - "Editar HTML" y antes de nada guardamos el código de nuestra página por lo que pueda pasar.
Cuando la hayamos guardado presionamos Ctrl + F para que nos aparezca el buscador y ponemos ahí <data:post.jumpText/>. 
¿Encontrado? Pues cuando lo hayamos señalado lo sustituimos por <img  src='URL de la imagen' width= '200px'/>
Lo siguiente que tenemos que hacer es sustituir donde pone URL de la imagen por la dirección de nuestra imagen. Yo las imágenes las subo en picasa web pero podéis hacerlo en dropbox, en drive o en otras páginas. El 200 que hay de color morado es el tamaño que tendrá la imagen, yo recomiendo que sea más o menos de ese tamaño ya que sino quedaría muy grande. Al final tiene que quedar algo así:

<img src='https://lh3.googleusercontent.com/-z7CNUM2zrxA/VJnM1GR-z8I/AAAAAAAAEoQ/B-2dbcm80hs/w412-h61-no/6.png' width='200px'/>

Por último solo nos queda decidir dónde aparecerá, si queremos que esté a la izquierda no se pone nada. Sin embargo si queremos que esté centrado se pondría <center> [código anterior] </center> o si lo queremos a la derecha quedaría así <div align="right"> [código anterior] </div>
Finalmente nos quedaría algo así:
 <center><img src='https://lh3.googleusercontent.com/-z7CNUM2zrxA/VJnM1GR-z8I/AAAAAAAAEoQ/B-2dbcm80hs/w412-h61-no/6.png' width='200px'/></center> 

Fácil ¿verdad? Pues para que nos aparezca en nuestras entradas lo único que tenemos que hacer es estar en la página de "nueva entrada" cuando la estemos editando y donde queramos que se corte darle a la opción que hay al lado de "enlace", "foto" y "vídeo" que es una página blanca rota por la mitad. Nos aparecerá una línea pues ahí es donde se cortará en la página principal.


En el botón "descargar" tendréis los botones "leer más" que he hecho. Hay de 7 colores pero solo un modelo (como el mío).


¿Qué os ha parecido el tutorial y los botones? Sé que solo era un modelo pero es que mi cabeza estaba tan saturada que no tenía imaginación para mucho más. Espero que paseis una muy buenas navidades.

¡Feliz 25 de diciembre (fun fun fun)!




1 comentario:

Tu comentario me ayuda a mejorar el blog además de que me hace muy muy feliz saber tu opinión así que ¡anímate y comenta!