Aligerar la sidebar

A casi todos nos gusta ir llenando nuestra barra lateral, de widgets (artilugios) o utilidades que vamos encontrando y que nos parecen prácticas o simplemente estéticas. Y de la misma manera, sin darnos cuenta acabamos formando una interminable barra lateral, en la que es dificilísimo encontrar algo. Incluidos los propios autores del blog.

Como después de borrar aquello que consideramos prescindible o incluso inútil, todavía se nos queda un buen cacho, os explico una solución para, al menos, organizar la cosa un poco mejor y acortar su longitud aparente. Realmente vamos a dejar los elementos, pero sólo mostraremos su título, dejando a criterio del lector si desea expandirlo para verlo completo o no.

ENLACES RECOMENDADOS [+/-]

Tendremos que ejecutar los siguientes pasos:

1. Hacer un repaso y eliminar desde Diseño --> Elementos de página, todo aquello que realmente hemos comprobado que sirve para poco a nosotros o a nuestros lectores, especialmente si demora mucho la carga de la página.

2. Priorizar entre los elementos que nos hayan quedado, decidiendo cuáles son los muy importantes y el resto. Los primeros los dejaremos como están y a los segundos le aplicaremos un sistema de plegado-desplegado para que el usuario pueda verlos completos si lo desea, pero que no molesten mientras tanto.

3. Instalar script.aculo.us. Como tiene diversas utilidades, es probable que ya lo tengas, pero la forma de comprobarlo es buscando el fichero prototype.js o scriptaculous.js con CTRL+F. Si lo tienes, te saltas este paso, pero si no lo encuentras, tienes que editar tu plantilla y copiar este código justo antes del </head> de tu plantilla...

<script src='http://www.google.com/jsapi'/><script>
google.load(&quot;prototype&quot;, &quot;1.6.0.2&quot;);
google.load(&quot;scriptaculous&quot;, &quot;1.8.1&quot;);
</script>

Guardamos cambios una vez hecho.

4. Ahora editamos de nuevo, pero esta vez expandiendo artilugios, Buscamos el widget que queremos mostrar plegado. Una vez más, con CTRL+F se localiza rápido si tiene título. Si no lo tiene, lo más fácil es ir previamente a Elementos de Página --> Editar y ponerle un nombre. Cuando acabemos de hacer estos cambios, tenemos que recordar que hay que volver a editar el artilugio y quitar de nuevo el nombre.

5. El artilugio tendrá el siguiente aspecto (se muestra ya modificado):

<b:widget id='HTML5' locked='false' title='Enlaces recomendados' type='HTML'>
<b:includable id='main'>

<a href='#' onclick='Effect.toggle(&quot;MISENLACES&quot;,&quot;blind&quot;); return false'>

<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>

<h2 class='title'><data:title/> [+/-]</h2></b:if>

</a><div align='center' id='MISENLACES' style='display: none;'>

<div class='widget-content'>
<data:content/>
</div>

</div>
<b:include name='quickedit'/>

</b:includable>
</b:widget>

El código nuevo que hay que insertar sin borrar nada de lo que haya, está en color verde. Las tres líneas que tienen el data:content, puede que sean más largas en otros artilugios. La referencia para la parte superior es widget-content. Luego podrá venir algo enorme que no será problema si encontramos el /b:include y el /b:widget que nos marcan casi el final.

Sólo hay que tener un cuidado especial con lo que aquí hemos llamado "MISENLACES" y que está en negrita. Se trata de la identificación del elemento a efectos del desplegado y tiene que ser único. Es decir, las dos ocurrencias que se insertan dentro del mismo artilugio, tienen que ser idénticas, pero cuando hagamos lo mismo en otro widget, habrá que usar otro nombre distinto. Se pueden usar letras o números.

Los caracteres "[+/-]" se pueden cambiar por un <img src="URL_imagen"/> para que en lugar de +/-, salga por ejemplo una flechita.

6. Guardar y listo, porque en Vista Previa, lo normal es que no podais apreciar el efecto.

Para que no peligren demasiado vuestros artilugios, la primera vez podeis crear un widget nuevo y experimentar con él. Hecho una vez, hecho todas.

Más información sobre cómo funciona este efecto y sobre cómo se puede instalar scriptaculous en vuestro propio servidor en Desplegar partes del blog.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter