Este documento proporciona instrucciones detalladas para crear resúmenes automáticos de entradas de blog utilizando código HTML. Explica cómo insertar código en la plantilla del blog para ocultar y mostrar párrafos, y cómo vincular el texto "Seguir leyendo" para expandir el contenido completo. También cubre cómo configurar la plantilla de entrada para ahorrar tiempo en futuras publicaciones.
Cómo crear un blog con párrafos ocultos y botón para expandir texto
1. Comenzamos con el instructivo y como soporte principal aludiré a las imágenes
preparadas como ejemplo.
Está todo detallado, hasta lo más mínimo así que estimo que no habrá posibilidades de
equívocos.
Sin perjuicio de ello, te sugiero que si tenés miedo de meter la pata con la plantilla, lo que
nos pasa a todos, incluso a mí, y que luego a pesar del back up no puedas reparar lo
hecho, te hagas un par de blogs de ensayo para prácticar.
Total, luego los das de baja. Es mucho mejor.
Hay un paso fundamental. Uno solo, y es colocar correctamente un código HTML en el
lugar preciso de la plantilla. Luego, lo demás, es coser y cantar.
Posta.
Creamos y editamos un post y luego lo publicamos. Para evitar esos chorizos
interminables de letras que pueden, claro, ser muy interesantes, pero para el veloz lector
de internet parecerle sin atractivo visual o pesado y tedioso (1 y 2) vamos a Escritorio (3)
y luego a Diseño (4).
Una vez allí, vamos a Edición de HTML (parte superior entre Fuente y Colores y
Seleccionar Plantilla Nueva. Y nos encontramos en esta pantalla (5).
¡No temáis! Ya sé que asusta meter mano aquí. Por lo que iremos muy despacio y como
os aconsejé, con los blogs de ensayo.
Este es el paso más importante. Tenemos que introducir, pegar, en la plantilla lo siguiente
</b:skin>
</head>
Entonces para ir a lo seguro vamos a la barra superior, Edición, Buscar en esta página y
habilitamos en cuadrante de búsqueda que vemos en el extremo superior derecho (6).
Ahí ponemos </b:skin> (7) y pinchamos en Siguiente así ubicamos lo que buscamos.
En la imagen que sigue (8) y subrayado por mí vemos que encontramos la secuencia
</b:skin>
</head>
Como están encimadas, las separamos con un Enter (9) así hacemos espacio para pegar
en el medio el siguiente Código, fundamental para todo lo que viene. Este paso es
esencial y NO podés equivocarte. Bueno, sí pero en el Blog de mentirita.
Pegamos el siguiente Código (10) entre </b:skin> y </head> y queda así (11 y 12)
2. <b:if cond='data:blog.pageType == quot;itemquot;'>
<style type='text/css'>
.fullpost {display:inline;}
.summarypost {display:none;}
</style>
<b:else/>
<style type='text/css'>
.fullpost {display:none;}
.summarypost {display:inline;}
</style>
</b:if>
Y guardamos la plantilla (11 y 12). Y te olvidás per tutti la vita. Listo. No volveremos más a
la plantilla.
Listo, ya pasó el momento de sudor, respirá aliviado, rezá el Necronomicón de atrás hacia
delante y seguimos.
Creá una nueva entrada (14) y como ves la flechita, vas a edición en HTML (15).
Una vez allí, pegás este Código:
<span class=quot;summarypostquot;>
<a href=quot;link-de-la-entradaquot;>Seguir Leyendo... </a>
</span>
<span class=quot;fullpostquot;>
</span>
Así tal cual (16).
En la siguiente imagen (17) le damos un golpecito de Enter para darle un espacio donde
irá el párrafo visible del texto. Dado que usaremos esta herramienta para mostrar un
párrafo cortito y que luego se expanda el resto que permanecerá oculto.
Entonces, en la imagen correlativa (18), vemos que se introdujo el párrafo visible “Quiero
que Marcela…” en ese espacio generado por el Enter, mientras que el párrafo que
permanecerá oculto y luego se expanderá cuando se haga click en Seguir Leyendo lo
pegamos entre <span class=quot;fullpostquot;> y </span>
Lo podés observar (18). El párrafo es “Pero si hace…”
Volvemos a la función Redactar (19), ajustamos los detalles de redacción (tipo de letra,
justificación, etc. espacios) y publicamos.
Es importante que entre el párrafo visible y el Seguir Leyendo que ves en color azul, haya
un espacio así no se encima tanto.
Como te decía, publicamos (20) y vamos al blog (21) pero como aún no “autolinkeamos”
el post el Seguir Leyendo aún no funciona.
3. Entonces (22) vamos a la hora de publicación y hacemos click y vemos que aparece el
post completo (23) y copiamos (24) la URL del post.
Luego (25) hacemos click en el lapicito de editar.
Una vez vueltos al post para edición (26), sombreamos Seguir Leyendo (27), abrimos el
Hipervínculo (28) y pegamos el enlace que copiamos previamente (29).
Aceptamos y volvemos a publicar la entrada (30). Cabe decir que al Seguir Leyendo
podemos ponerlo en negrita, ponerle el color que queramos, etc.
Ahora sí, clickeamos en Seguir Leyendo (31)… ¡listo! Tenemos expandido todo el post
(32).
Toda esta operación se aprende rápidamente y lo que te parece largo y lento, lo harás en
menos de un minuto.
Te lo aseguro.
Ahora bien, esta es una variante pero si querés ahorrarte el laburito de tener que copiar el
código en cada entrada que abrás, podés evitar un paso. Y sale todo igual.
Yo te sugiero que lo hagás, porque no vas a tener a mano siempre el Código.
Entonces vamos a la segunda variante.
Ya tenés hecho lo de la plantilla y como te dije, NO la volvés a tocar.
Vamos a Configuración (33 y 34).
Vamos a la pestaña de Formato (35) al pie al recuadro en blanco Plantilla de Entrada.
Pegamos en el recuadro el mismo Código que pusimos en la imagen 16.
<span class=quot;summarypostquot;>
<a href=quot;link-de-la-entradaquot;>Seguir Leyendo... </a>
</span>
<span class=quot;fullpostquot;>
</span>
Como ves, en vez de hacerlo cada vez, ya queda de una en la plantilla de las entradas
(36).
Guardamos la configuración.
Cuando queramos crear una entrada lo hacemos y nos aparecerá lo que vemos en la
imagen 37.
Entonces, como ya vimos, vamos a Edición de HTML (38), damos un Enter para darle
espacio al párrafo visible como ya lo hicimos antes (39).
Pegamos el párrafo visible, en este caso comienza como “También el bastón…” (40).
4. Luego pegamos el párrafo invisible y que luego se expanderá. Como ya vimos antes y en
la imagen (41), lo pegamos allí en el medio.
Y queda así (42).
Vamos a Redactar (43) y luego maquillamos (44), pegamos las fotos ya sea usando la
herramienta de Google (recomendable para imágenes de poco peso) o un hosting de
imágenes (para fotos pesadas de 15 K hasta varios megas).
Publicamos (45), volvemos a hacer unos pasos que ya vimos: hacemos click en la hora
(45), vemos el post entero, copiamos la URL del mismo (46), vamos al lapicito de Editar
(47) y hacemos click allí.
Aparecemos en la pantalla de Edición, sombramos Seguir Leyendo, abrimos el
hipervínculo (48) y pegamos la URL que tenemos copiada.
Volvemos a publicar (49).
Click en Seguir Leyendo y listo (50). Tenemos todo terminado.
Si queremos reemplazar la leyenda de Seguir Leyendo por una imagen como ser un
botón o una imagen de una flechita, por ejemplo, podemos hacerlo.
Generamos el botón en cualquiera de los cientos de sitios que hay en Internet.
O creamos o buscamos una imagen.
La alojamos en un host, o el que quieras, porque hay miles. Generás la URL de la imagen
y la copias sobre donde dice Seguir leyendo… (te lo sombreo en verde)
Fijate…
<span class=quot;summarypostquot;>
<a href=quot;link-de-la-entradaquot;>Seguir Leyendo... </a>
</span>
<span class=quot;fullpostquot;>
</span>
Acordate que esto es en Configuración/Formato → Plantilla de Entrada. Luego guardas y
creás una entrada y aparecerá así (51).
Esto nunca lo hice porque prefiero la frase lisa y llana.
www.elcuervolopez.blogspot.com