SlideShare una empresa de Scribd logo
1 de 4
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)
<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.
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).
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

Más contenido relacionado

La actualidad más candente

La actualidad más candente (6)

Frames
FramesFrames
Frames
 
Como insertar prezi en el blogger
Como insertar prezi en el bloggerComo insertar prezi en el blogger
Como insertar prezi en el blogger
 
Depuradores Guía rapida de uso
Depuradores Guía rapida de usoDepuradores Guía rapida de uso
Depuradores Guía rapida de uso
 
Tutorial de conexión de php a mysql
Tutorial de conexión de php a mysqlTutorial de conexión de php a mysql
Tutorial de conexión de php a mysql
 
Linda eljach
Linda eljachLinda eljach
Linda eljach
 
Entradas
EntradasEntradas
Entradas
 

Similar a Cómo crear un blog con párrafos ocultos y botón para expandir texto

Cómo publicar en una página con enlace externo en blogger.
Cómo publicar en una página con enlace externo en blogger.Cómo publicar en una página con enlace externo en blogger.
Cómo publicar en una página con enlace externo en blogger.Luis Egberto Carrera Ledezma
 
Tutorial 03 primer-tratamiento
Tutorial 03 primer-tratamientoTutorial 03 primer-tratamiento
Tutorial 03 primer-tratamientobugs2919
 
1. guia blogger
1. guia blogger1. guia blogger
1. guia bloggereulalia14
 
Practica3 Look and Feel Java
Practica3 Look and Feel JavaPractica3 Look and Feel Java
Practica3 Look and Feel Javacobymotion
 
Hot Potatoes_ Sesion_3
Hot Potatoes_ Sesion_3Hot Potatoes_ Sesion_3
Hot Potatoes_ Sesion_3Elena Moreno
 
Integración entre Google Keep, Google Docs y Wordpress
Integración entre Google Keep, Google Docs y WordpressIntegración entre Google Keep, Google Docs y Wordpress
Integración entre Google Keep, Google Docs y WordpressIván Lasso
 
¿Qué es Microsoft Word.?
¿Qué es Microsoft Word.?¿Qué es Microsoft Word.?
¿Qué es Microsoft Word.?karlaTICs
 
¿Qué es Microsoft Word.?
¿Qué es Microsoft Word.?¿Qué es Microsoft Word.?
¿Qué es Microsoft Word.?karlaTICs
 
Vamos A Crear Un Blog Con Blogspot
Vamos A Crear Un Blog Con BlogspotVamos A Crear Un Blog Con Blogspot
Vamos A Crear Un Blog Con Blogspotmaryguayonge
 
Diseño y configuración del blog (cuatro)
Diseño y configuración del blog (cuatro)Diseño y configuración del blog (cuatro)
Diseño y configuración del blog (cuatro)pnevado
 
Guía de Wordpress.com
Guía de Wordpress.comGuía de Wordpress.com
Guía de Wordpress.compablo solano
 
Como crear un blog
Como crear un blogComo crear un blog
Como crear un blogbicefala
 

Similar a Cómo crear un blog con párrafos ocultos y botón para expandir texto (20)

Empecemos a publicar en nuestro blog
Empecemos a publicar en nuestro blogEmpecemos a publicar en nuestro blog
Empecemos a publicar en nuestro blog
 
Cómo publicar en una página con enlace externo en blogger.
Cómo publicar en una página con enlace externo en blogger.Cómo publicar en una página con enlace externo en blogger.
Cómo publicar en una página con enlace externo en blogger.
 
Tutorial 03 primer-tratamiento
Tutorial 03 primer-tratamientoTutorial 03 primer-tratamiento
Tutorial 03 primer-tratamiento
 
1. guia blogger
1. guia blogger1. guia blogger
1. guia blogger
 
Practica3 Look and Feel Java
Practica3 Look and Feel JavaPractica3 Look and Feel Java
Practica3 Look and Feel Java
 
Hot Potatoes_ Sesion_3
Hot Potatoes_ Sesion_3Hot Potatoes_ Sesion_3
Hot Potatoes_ Sesion_3
 
Integración entre Google Keep, Google Docs y Wordpress
Integración entre Google Keep, Google Docs y WordpressIntegración entre Google Keep, Google Docs y Wordpress
Integración entre Google Keep, Google Docs y Wordpress
 
¿Qué es Microsoft Word.?
¿Qué es Microsoft Word.?¿Qué es Microsoft Word.?
¿Qué es Microsoft Word.?
 
¿Qué es Microsoft Word.?
¿Qué es Microsoft Word.?¿Qué es Microsoft Word.?
¿Qué es Microsoft Word.?
 
Inicio bloggger
Inicio blogggerInicio bloggger
Inicio bloggger
 
Vamos A Crear Un Blog Con Blogspot
Vamos A Crear Un Blog Con BlogspotVamos A Crear Un Blog Con Blogspot
Vamos A Crear Un Blog Con Blogspot
 
Como crear un blog
Como crear un blogComo crear un blog
Como crear un blog
 
Como crear un blog
Como crear un blogComo crear un blog
Como crear un blog
 
Como crear un blog
Como crear un blogComo crear un blog
Como crear un blog
 
Diseño y configuración del blog (cuatro)
Diseño y configuración del blog (cuatro)Diseño y configuración del blog (cuatro)
Diseño y configuración del blog (cuatro)
 
INFORME TIC PATRICIA MARTINEZ.
INFORME TIC PATRICIA MARTINEZ.INFORME TIC PATRICIA MARTINEZ.
INFORME TIC PATRICIA MARTINEZ.
 
Front Page ==
Front Page ==Front Page ==
Front Page ==
 
Netbeans
Netbeans Netbeans
Netbeans
 
Guía de Wordpress.com
Guía de Wordpress.comGuía de Wordpress.com
Guía de Wordpress.com
 
Como crear un blog
Como crear un blogComo crear un blog
Como crear un blog
 

Más de Mario Canoniero

Más de Mario Canoniero (6)

Conectivismo: Una teoría de aprendizaje para la era digital
Conectivismo: Una teoría de aprendizaje para la era digitalConectivismo: Una teoría de aprendizaje para la era digital
Conectivismo: Una teoría de aprendizaje para la era digital
 
Unidad iv
Unidad ivUnidad iv
Unidad iv
 
Unidad iv
Unidad ivUnidad iv
Unidad iv
 
Unidad iii
Unidad iiiUnidad iii
Unidad iii
 
Unidad ii
Unidad iiUnidad ii
Unidad ii
 
Unidad i
Unidad iUnidad i
Unidad i
 

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