Nota: Este artículo da por hecho que estás utilizando una plantilla clásica (sin las funciones Diseños).
Esta funcionalidad es especialmente útil para los blogs que tienen entradas muy largas. El usuario sólo verá los títulos de tus 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ás navegar por otras páginas ni cargarlas. Pruebe con este 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 te hagas 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. Retrocede y lee el resto del artículo. (puedes hacer clic en el siguiente vínculo para volver a ocultar esta entrada)
[+/-] mostrar/ocultar esta entrada
Esta funcionalidad se compone de tres elementos: CSS, Javascript y, cómo no, los códigos de plantilla de Blogger. Vayamos por pasos.
CSS
Es la parte más sencilla. Necesitamos un par de ejemplos que oculten o muestren entradas. Para ello, copia estas dos líneas en tu hoja de estilos:
.posthidden {display:none}
.postshown {display:inline}
Tu hoja de estilos suele aparecer en la parte superior de tu plantilla, entre los códigos <style> y </style>. Si te encuentras en un archivo distinto, sólo deberás añadir estas líneas al archivo en cuestión en lugar de hacerlo en tu plantilla.
Javascript
Añade el código siguiente a tu plantilla, entre <head></head>:
<script type="text/Javascript">
function expandcollapse (postid) {
whichpost = document.getElementById(postid);
if (whichpost.className=="postshown") {
whichpost.className="posthidden";
}
else {
whichpost.className="postshown";
}
}
</script>Ésta es la funcionalidad que utilizaremos a continuación para mostrar u ocultar la entrada. Le asignaremos el número de identificación de una entrada determinada y la cambiará de un estilo de CSS a otro.
Códigos de Blogger
Ahora que tenemos las herramientas preparadas, podemos aplicarlas a nuestras entradas. Entre los códigos <Blogger></Blogger> de tu plantilla aparecerá la sección que muestra las entradas. El código que utilizaremos aquí es el siguiente:
<BlogItemTitle> <$BlogItemTitle$> </BlogItemTitle>
<span class="posthidden" id="<$BlogItemNumber$>1">
<$BlogItemBody$><br />
</span>
<a href="javascript:expandcollapse('<$BlogItemNumber$>1')">
[+/-] show/hide this post</a>
Obviamente, puede modificarlo para adaptarlo a su plantilla. Por ejemplo, puedes incluir otros códigos de formato y probablemente otro código para la línea de autor o los comentarios. El texto "[+/-] mostrar/ocultar esta entrada" también puede cambiarse.
La parte más importante de este código es el empaquetador <span> que rodea el código <$BlogItemBody$>. Como puedes observar, esta sección está oculta al principio y utiliza <$BlogItemNumber$>1 para crear un ID. único (el "1" de más es para garantizar que es única, en caso de que tu plantilla ya esté utilizando el número de elemento del blog para algo más, como un vínculo permanente.) El vínculo Javascript usa el mismo número de ID para garantizar que mostramos u ocultamos la entrada correcta.
Cuando finalices la plantilla, guarda los cambios y vuelve a publicar el blog. El nuevo formato se aplicará automáticamente a todas tus entradas sin necesidad de realizar ninguna modificación.
Notas:
- Al igual que ocurre con las demás modificaciones de la plantilla, debes guardar una copia de seguridad de ésta antes de empezar. Basta con copiar todo el código en un archivo de texto del disco duro y dispondrás de una plantilla de repuesto en caso de que el proceso de modificación no se lleve a cabo correctamente.
- Una alternativa al método mostrar/ocultar consiste en utilizar resúmenes de entradas. Cada método ofrece ventajas e inconvenientes.
- Ventajas de este método: las entradas no deben modificarse, sólo tendrá que cambiar la plantilla.
- Inconvenientes: sólo se muestra el título de cada entrada, pero no la información del resumen. Esta funcionalidad afecta a todas las entradas y no puede aplicarse de forma selectiva (por ejemplo, sólo a las entradas largas).