Así quedarán las entradas de nuestro blog, una vez que hayamos seguido los pasos. Solo hagan click en [+/-], para que vean como se despliega el resto del post que esta oculto.
Ejemplo:
Esta entrada es larga
Bueno, es verdad, no es tan larga. Pero es que no tengo mucho que decir. Sin embargo, debería incluir por lo menos un párrafo bastante largo aquí para que se haga una idea de cómo funciona esta opción. ¿Alguien conoce algún chiste bueno? Venga, seguro que sí. ¿Tengo que hacerlo todo yo solo? Me temo que sí. Lo cierto es que no me importa, porque tampoco tiene mucho sentido extenderse demasiado. Retroceda y lea el resto del artículo. (puede hacer clic en el siguiente vínculo para volver a ocultar esta entrada).
[+/-] mostrar/ocultar esta entrada
Con la implementación de este script no es necesario que el lector cargue una nueva pagina para ver el resto de la entrada. Solo tendrá que pinchar en el [+/-] y listo. Mucho más rápido que cargar una página de nuevo. Si quieren en vez de [+/-] pueden colocar cualquier cosa, una imagen, otras palabras como leer mas... , o pueden simplemente dejar solo el título de la entrada.
Esta funcionalidad es especialmente útil para los blogs que tienen entradas muy largas. El usuario sólo verá los títulos de sus entradas y podrá hojearlos para seleccionar los que realmente le interesan. A continuación, podrá hacer clic en el vínculo correspondiente para leer todo el texto de la entrada. Cuando termine, podrá volver a ocultar el texto. Todo esto sucede en la misma página, con lo que no deberá navegar por otras páginas ni cargarlas.
Esta funcionalidad se compone de tres elementos: CSS, Javascript y, cómo no, los códigos de plantilla de Blogger. Vayamos por pasos.
Paso 1:
CSS
Es la parte más sencilla. Necesitamos un par de ejemplos que oculten o muestren entradas.
Copie estas dos líneas en su hoja de estilos:
.postshown {display:inline}
Osea estas 2 líneas de código deben estar dentro de <b:skin><![CDATA[/* y ]]></b:skin>
Para la mayoría de las plantillas de blogger, su hoja de estilos suele aparecer en la parte superior de su plantilla, entre los códigos <b:skin><![CDATA[/* y ]]></b:skin>. Algunas plantillas simplemente hacen referencia a un archivo externo que contiene el style. Si se encuentra en un archivo externo, entonces deberán primero descargarlo, cambiarlo (agregándole las dos líneas mencionadas) y luego volver a subir el archivo a un servidor propio.
Paso 2:
Javascript
Añada el código siguiente a su plantilla, entre <head> y </head>:
function expandcollapse (postid) {
whichpost = document.getElementById(postid);
if (whichpost.className=="postshown") {
whichpost.className="posthidden";
}
else {
whichpost.className="postshown";
}
}</script>
Lo importante del código anterior es que tenemos que darle un nombre exclusivo (id) a cada una de las secciones que necesitemos ocultar.
Paso 3:
Códigos de Blogger
Ahora que tenemos las herramientas preparadas, podemos aplicarlas a nuestras entradas.
Para Ocultarlo debemos primero eliminar esta línea de código:
<a expr:name='data:post.id'/>
Ahora buscamos las siguientes líneas de código:
Y las reemplazamos por:
Como resultado obtendríamos esto:
Si quieren que solo aparesca el titulo del blog, con el link que se hará expandible sin el [+/-], primero tendríamos que eliminar el título del post que viene en la plantilla original, para esto debemos borrar las siguientes lineas de código (y obviamente también hay que borrar la linea <a expr:href='"javascript:expandcollapse("" + data:post.id + "")"'>[+/-] show/hide this post</a>):
Y reemplazar las líneas borradas por:
Como resultado obtendríamos esto:
Y si quieren que además desaparesca el pie del post, que tiene los comentarios, el nombre del creador del post, y la hora. Entonces el cierre (</span>) de la parte que necesitamos ocultar debe ir antes del último </div> que termina el código del Post. Quedaría así:
</div>
</b:includable>
Hasta el momento lo que tendrán como resultado, es una lista de todos los títulos de los últimos post que muestran en la página principal, con su correspondiente fecha, si aún no han eliminado la fecha, en mi caso ya lo había hecho antes (explicado en post anterior), entonces lo que deben hacer es simplemente borrar de la plantilla las siguientes 3 lineas de código que la despliegan:
El resultado de todos los pasos anteriores correponde a la lista de los post (solo los titulos) que se muestran en la primera página del blog, este es el resultado (expandí uno de los post para que vieran que funciona):
La parte más importante de este código es el empaquetador <span> que rodea el código <data:post.body/>. Observe que esta sección empieza oculta y utiliza data:post.id para crear un número de identificación exclusivo(id). El vínculo de Javascript utiliza el mismo número de identificación para garantizar que se muestra u oculta la entrada adecuada.
Cuando finalicen los cambios en la plantilla, guarden los cambios y listo. El nuevo formato se aplicará automáticamente a todas sus entradas sin necesidad de realizar ninguna modificación.
(No Ratings Yet)
Loading ...
Hola, te agradezco que pude desaparecer la barra del bloger, lo que me permitio proteger mi marca personal, en ese mismo orden de ideas te explico que traté de que mis entradas solo presenten el nombre y no el cuerpo de las entradas y no pude, me gustaría si me pudieras ayudar a tener esta opción de manera que las entradas que yo desee solamente muestren el titulo, si tienes el tiempo me puedes escribir a mi E-Mail y te mando copia de la plantilla que tengo (Manejo muy bien la pc, pero no tengo conocimientos de programación de paginas).Si de paso tienes algunas ideas para modificar mi blog, ya que deseo hacerlo lo mas interactivo posible, te lo agradezco.
Gracias Anticipadas……
Hola, mejor ya no me respondas lo que preguntaba en el otro post, porque he borrado todas las modificaciones(o sea los codigos indicados) y ahora estoy peleando con estos codigos aquí. Bueno, en realidad no me puedo quejar porque sí me funcionó pero el problema es que me gustaría que quedara como lo tienen en esa página que te decía (argenpress.info); es decir: que no sólo aparezca el título sino, además del título, el primer párrafo (el `pequeño sumario´ que tú decías) y seguidamente el vinculo “+/-” que despliega todo el texto.
Además, sino fuera mucho pedir, sería bacan que en vez de un sólo botón (+/-), se pudiera mostrar dos: uno cuando el texto está oculto (para mostrarlo), y otro cuando el texto esté desplegado (para ocultarlo), tal como te decía que se ve en esa página.
Gracias again.
yo tampoco puedo hacer este paso,todo iba bien, en sentido de que al guardarlo blogger no me decia nada de error, pero luego comense a no encontar algunas parte en la plantilla asi que lo agregue por ahi pero para nada,pues no salio nada! ayuda visita mi blog y dime http://express-anime.blogspot.com/