martes, 18 de septiembre de 2018

Personalizo el enlace Leer Más de las entradas


Las entradas del blog pueden visionarse completas o en resumen, teniendo que hacer clic en un enlace o botón para poder verlas en su totalidad. Yo me he decantado por lo segundo, ya que prefiero que de primera vista se vean más entradas como resumen. El caso es que el enlace donde pone "Leer Más" me parece pequeño y quiero cambiarlo.




Para mostrar la entrada de esta forma, hay que utilizar una opción del editor que se llama Salto de línea. Simplemente hay que clicar en ese botón justo en la posición deseada de la entrada y se añadirá el salto.




Para cambiar el texto voy a Blogger, seguidamente a Tema del menú de la izquierda y pulso el botón Personalizar.



Ahora entro en Avanzado > Añadir CSS y al final del todo añado el siguiente código:

.jump-link {
font
-size:21px;
} 


Hago clic en el botón Aplicar al blog y después en Volver a Blogger.





Compruebo el blog y esto es otra cosa, se ve mucho mejor el enlace Leer Más :-)




También podría cambiar el texto por lo que yo quisiera, como por ejemplo "Seguir leyendo..." o lo que sea. Eso es tan sencillo como ir a Diseño y en la sección Principal-Entradas del blog hacer clic en Editar.





Y en la ventana que aparece escribir el texto deseado en Texto del enlace de la página de entrada.






Ocurre una cosa que no me termina de gustar al utilizar estos saltos de línea para continuar leyendo la entrada, y es que al hacer clic en el mismo, la entrada se posiciona justo a continuación del salto, quedando pegada arriba del todo. Me gustaría que se posicionara tal cual la entrada es, desde el principio. Así que voy a solucionarlo :-)

En Blogger voy al menú de la izquierda y entro en Tema, después hago clic en el botón Editar HTML.





Ahora hago clic dentro del editor del código y pulso la combinación de teclas Ctrl + F para abrir la pequeña caja de búsqueda arriba a la derecha.

Escribo el texto "jump" en la caja de busqueda y pulso Enter un par de veces hasta que doy con la siguiente línea de código:

<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>

De esta línea selecciono el texto: "+ &quot;#more&quot;" y lo borro.




Una vez borrado el texto, hago clic en el botón Guardar tema. Y ya está, ahora al hacer clic en Leer Más, la entrada se posiciona desde el principio, sin saltos.

El caso es que estoy viendo ahora el blog y se me antoja que el color de fondo de link Leer Más sea otro. Así que añado una nueva línea al código de antes en Avanzado > CSS. Tal y como he hecho antes para cambiar el tamaño del texto. Pero ahora le añado un color de fondo al texto, que ocupará todo el ancho de la entrada. Además, este será el color que utilizaré de fondo para la imagen que colocaré en cada entrada como portada de la misma, algo que todavía no he hecho, pero que voy hacer muy pronto utilizando el programa InkScape del que hablaré bastante en este blog :-)

Así pues, añado la siguiente línea de código CSS: background:#c2e1e1ff;





Pulso el botón Aplicar al blog y ya está, ahora si :-)




No hay comentarios:

Publicar un comentario