Cómo extender y contraer el contenido de los gadgets

¡ 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.


Expandir y contraer el contenido de cualquier gadget

Esta es una sencilla forma de mostrar el contenido de los gadgets de forma recogida.

Puede ser de utilidad para los blogs que tengan largas listas de blogs amigos, muchas etiquetas o simplemente para los que deseen tener sus elementos de página recogidos.

Ayer me llegó un comentario de Marisol donde me pregunta como "esconder" su lista de blogs así que vamos a explicarlo...

Diseño>edición HTML>expandimos artilugios

Como comprobaremos, la estructura de cualquier gadget (en este caso usaremos el gadget de html-javascript) es similar o idéntica a esta:

<b:widget id='HTML1' locked='false' title='HTML' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

Ten en cuenta que cada gadget tendrá un nombre diferente en la parte de <b:widget id='HTML1' ya que puede ser <b:widget id='BlogList1' (la lista de blogs) por ejemplo. Por eso es importante que tengas un título en el gadget, para localizarlo antes.

Una vez localizado el elemento al que le aplicaremos el truco añade lo que te muestro en azul, fijándote bien en dónde añadir el script:

<b:widget id='HTML1' locked='false' title='HTML' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<script type='text/javascript'>
//<![CDATA[
if(typeof(rnd) == 'undefined') var rnd = '';
rnd = Math.floor(Math.random()*1000);
rnd = 'id-' + rnd;
document.write('<a href="#" onclick="tmp = document.getElementById(&quot;' + rnd + '&quot;); tmp.style.display = (tmp.style.display == &quot;none&quot;) ? &quot;block&quot; : &quot;none&quot;; return false;" style="float:left;margin-right:5px;">');
//]]>
</script>Abrir el contenido
<script type='text/javascript'>
//<![CDATA[
document.write('<\/a>');
//]]>
</script>
<div class='widget-content'>
<script type='text/javascript'>
//<![CDATA[
document.write('<div id="' + rnd + '" style="display:none;">');
//]]>
</script>
<data:content/>
</div>
<script type='text/javascript'>>
//<![CDATA[
document.write('<\/div>');
//]]>
</script>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Ahora puedes cambiar Abrir el contenido por cualquier frase que quieras poner para que, al hacer clic en ella, se habra el contenido del gadget.

También puedes poner una imagen (o una imagen con texto) en lugar de una frase. En ese caso debes poner esta línea en lugar del texto:

<img src="URL DE TU IMAGEN"/>

Sustituye URL DE TU IMAGEN por la dirección de tu icono o tu imagen. En el caso de poner también el texto, lo escribiríamos al final o al principio de la línea de la imagen.