Blog desplegable en cualquier apartado o en la portada de tu bitácora

Si te pareció interesante la entrada sobre los títulos desplegables en las páginas de etiquetas, o aquel tutorial con el que podíamos aumentar la velocidad de carga del blog por medio de un script, este truco te resultará fascinante.

Pensé en combinar ambas ventajas en una misma instalación hasta dar con la idea de tener un 'blog desplegable' o bien en la portada del blog o bien en todos sus apartados.

Aquí te dejo una pequeña imagen que he construido para facilitar la explicación:

Diseño>Edición de HTML>Sin expandir artilugios

Busca algo similar a esto:

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
</b:section>

Ahora, según la configuración deseada, reemplázalo por uno de estos dos códigos:

Para mostrar el truco en la portada del blog...

<b:if cond='data:blog.url == data:blog.homepageUrl'><script language='javascript'>function blcnJJMostr() {
var blJJTE = document.getElementById("blcnJJMostrCon");
var blJJTE1 = document.getElementById("blcnJJMostrCon2");
if(blJJTE.style.display == "block") {
blJJTE.style.display = "none";
blJJTE1.innerHTML = "Ver Blog"; }
else {
blJJTE.style.display = "block";
blJJTE1.innerHTML = "Ocultar Blog"; } }</script><span style='margin-left:10px;padding:4px 6px;border:1px solid #cccccc;background:#f2f2f2;'><a href='javascript:blcnJJMostr();' id='blcnJJMostrCon2' style='text-decoration:none;'>Ver Blog</a></span>
<div id='blcnJJMostrCon' style='display: none;'><b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog2' locked='true' title='Entradas del blog' type='Blog'/>
</b:section></div></b:if><b:if cond='data:blog.url != data:blog.homepageUrl'><b:section class='mainJ' id='mainJ' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
</b:section></b:if>

Para mostrar el truco en todo el blog...

<script language='javascript'>function blcnJJMostr() {
var blJJTE = document.getElementById("blcnJJMostrCon");
var blJJTE1 = document.getElementById("blcnJJMostrCon2");
if(blJJTE.style.display == "block") {
blJJTE.style.display = "none";
blJJTE1.innerHTML = "Ver Blog"; }
else {
blJJTE.style.display = "block";
blJJTE1.innerHTML = "Ocultar Blog"; } }</script><span style='margin-left:10px;padding:4px 6px;border:1px solid #cccccc;background:#f2f2f2;'><a href='javascript:blcnJJMostr();' id='blcnJJMostrCon2' style='text-decoration:none;'>Ver Blog</a></span>
<div id='blcnJJMostrCon' style='display: none;'><b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
</b:section></div>

Guarda la plantilla y habrás terminado. Comprobarás que tu blog carga a una mayor velocidad y que navegar por él es más fácil pues el lector puede desplegar el contenido que le interesa leer.

Te aconsejaría añadir también el truco para insertar dos columnas sobre o bajo la zona de entradas, de manera que puedas mostrar gadgets de texto, imágenes o galerías de imágenes y crear un 'orden personalizado' en el blog.