Secciones despegables del blog en cualquier sitio

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

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.

Read More

Cómo ocultar el bloque de las entradas en la portada del Blog

Artículo publicado en el blog El Balcón de Jaime,  ver la entrada en su blog original.

Ocultar el bloque de las entradas en la portada del blog

Ya hemos visto cómo mostrar un gadget sólo en la portada, así como sólo en las páginas de entradas individuales.

Todo esto se consigue gracias a las condicionales de blogger, que se encargan de indicar dónde se ejecuta algo y dónde no. También podemos aplicar condicionales al bloque de entradas (con los artículos incluidos) de tal forma que se muestre en todas partes excepto en la portada del blog.

Puede comprobarse el resultado accediendo a este blog de pruebas.

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

Localizamos estas líneas de código:

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

Añadimos la condicional resaltada en color rojo:

<b:if cond='data:blog.url != data:blog.homepageUrl'><b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
</b:section></b:if>

De este modo, todos los gadgets que tengamos en la sidebar o en las columnas bajo la cabecera se mostrarán en la portada, mientras que las entradas se mantendrán ocultas.

Nota:

- Aunque este procedimiento es el más seguro, existe un método muy práctico que consiste en acceder al apartado de Configuración y en la pestaña Formato, donde dice 'Mostrar un máximo de...', insertar la cifra 0.

 

Read More