Páginas

Como añadir el botón de "leer más" en las entradas de tu blog con Blogger

Como añadir el botón de "leer más" en las entradas de tu blog con Blogger

En ocasiones como, por ejemplo, cuando publicamos tutoriales, puede ser recomendable poner en las entradas el botón de "leer más" ¿Por qué? Pues porque si al lector ya le queda claro en las primeras lineas cuál es el contenido del post y que le interesa, casi con total seguridad hara 'clic' para leer el resto.
En cambio, muchos blogueros creen que obligar al lector a hacer 'clic' nuevamente implica el riesgo de que no lo haga y se quede sin ver un contenido que te ha costado mucho preparar...
De manera que, lo primero de todo es valorar qué es lo que más nos conviene en función de lo que vayamos a publicar porque, además, es algo que podremos hacer o no al editar cada entrada ¿Y cómo lo haremos? 

Pues con la herramienta "insertar salto de línea" que encontraremos en la propia pantalla que utilizamos para redactar nuestras entradas

Sólo debemos tener la precaución de pulsar este botón cuando tengamos el cursor justo al final del párrafo que queremos que se lea al visualizar la entrada, un párrafo que obviamente tiene que incitar al lector a seguir leyendo aunque sin crear falsas expectativas ¿eh?;)

¿CÓMO PERSONALIZAR EL BOTÓN DE "LEER MÁS"?
En primer lugar, podemos simplemente cambiar el texto que le aparecerá al lector en el post: "leer más", "continuar leyendo", "adelante con el tutorial"... 
Y esto es tan sencillo como ir a la pantalla de diseño, editar el "gadget de entradas del blog" y, por un lado escribir lo que queramos que aparezca al final de nuestras entradas en donde dice "más información" y por otro marcar la casilla "enlaces a la página"


En segundo lugar, también podemos cambiar de color este texto, enmarcarlo, ponerle fondo... Para ello nos iremos a la edición HTMl de la plantilla y justo encima de ]]></b:skin> pegaremos el siguiente código:

.jump-link {
float:right;
background: #04B4AE; /* Color de fondo */
border: 1px solid #000;
font-weight: bold;
padding: 1px 2px;
margin-left:20px;
}
.jump-link a {
color: #FFFFFF; /* Color del texto */
text-decoration: none;
font-weight: bold;
}
.jump-link:hover {
background: #045FB4; /* Color de fondo al pasar el cursor */
border: 1px solid #000;
text-decoration:none;
}

donde, como veis, podemos cambiar el color del fondo del recuadro, el tipo de borde (solid, dotted o dashed según queramos una línea continua, de puntos o de rayas), el color del texto, si lo preferimos en negrilla (bold)o normal (regular)...

O por último, también podemos hacer que en lugar de texto aparezca una imagen o icono que haga juego con el diseño de nuestro blog. Para ello, y también en la edición HTMl de la plantilla, buscaremos la etiqueta <data:post.jumpText/> y la sustituiremos por este otro código:
<img src="URL de la imagen"/>
donde pegaremos la dirección de dicha imagen.
Nosotros, como ya habéis visto, hemos elegido esta: