Botón Read More (Leer Más)

El botón Read More (Leer más), es un botón que nosotros usamos para expandir o contraer un texto.

En un blog,o página web a menudo las entradas o el texto son extensos.

Ocupan mucho espacio, donde la mayoría de los temas que están tratando no nos interesa.

Nos aburrimos buscando, y muchas veces, perdemos mucho tiempo leyendo lo que no nos interesa.

...

Cuando leemos el primer párrafo o el segundo ya sabemos más o menos el contexto del que nos están hablando.

llegados a ese momento, vamos a decidir nosotros mismos si vamos continuar con nuestra lectura o no.

Pues es en ese primer o segundo párrafo que vamos a poner nuestro botón, para tomar esa decisión.

Puede que a vosotros vos funcione el salto de linea que trae bloguer por defecto, entonces no hace falta que implantes este.

Yo intente implementarlo en este blog, y no me ha funcionado.

precisamente esa es la principal razón de esta entrada.

vamos a iniciar.

Lo primero que tenemos que hacer es colocar el código html en el texto de entrada.

Como lo hacemos?

muy simples

escribimos la entrada completa que queremos publicar, si estamos escribiendo una página web, el procedimiento es el mismo.

despues tenemos que nos pasar a la edicion de nuestro página para el módulo de "html"

Después del primer, segundo o tercero párrafo, ponemos el siguiente código

Codigo html

Nota: no olvidar de cerrar el texto al final con la seguinte etiqueta.

Etiqueta final del texto

<span >

Código CSS

Ahora lo que tenemos que hacer es implementar el código css del botón.

Hablando del blogger, nos vamos al TEMA, se nos abre una ventana donde dice PERSONALIZAR, damos clic en la seta para abajo.

se nos abre un desplegable.

En ese desplegable, damos clic en HTML, y se nos mostrará el código de la página.

pues entre las etiquetas head , vamos a colocar el siguiente código

Ejemplo:

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#more {display: none;}
</style>
</head>

Nos faltaría implementar el script de javascript para que funcione.

Caso no funcione hay que verificar si el código tiene los CDN de javascript implementados, si no hay que ir a la página de bootstrap, copiar los CDNs y traelos a nuestra página.

Código Javascript

No olvidar de poner el botón al final del texto, pero fuera del span que cierra el texto

El código es el seguinte:

Ir al indice