La Trucoteca de Blogs - Ayuda para Blogger: marzo 2010

Si quieres ahorrar espacio en tu blog, ocultando algunos elementos de él, este truco de El Escaparate de Rosa te vendrá muy bien.

Siguiendo un método sencillo pero muy eficaz, podemos mantener oculto un gadget y ofrecer la opción de que el visitante lo maximice. Puedes ver un ejemplo en este blog de pruebas.
Hemos cambiado y modificado algunas cosas del truco original. Éstos son los pasos:

1. Nos dirigimos a Diseño > Edición de HTML de la plantilla y Expandimos artilugios.
En éste caso vamos a buscar una lista de enlaces (como deseaba Seashell), aunque el procedimiento es el mismo para cualquier elemento (Texto, HTML, Archivo del Blog...). Localizamos el gadget buscando su título (Ctrl + F), por ejemplo, Enlaces o Lista de Enlaces, etc., y añadimos en el lugar correspondiente la parte de rojo.

<b:widget id='LinkList1' locked='false' title='Enlaces' type='LinkList'>
<b:includable id='main'>
<script type='text/javascript'>
//<![CDATA[
if(typeof(rnd) == 'undefined') var rnd = '';
rnd = Math.floor(Math.random()*1000);
rnd = 'id-' + rnd;
document.write('<a href="javascript:void(0)" onclick="tmp = document.getElementById("' + rnd + '"); tmp.style.display = (tmp.style.display == "none") ? "block" : "none"; return false;" style="float:left;margin-right:6px;">');
//]]>
</script>[+/-]
<script type='text/javascript'>
//<![CDATA[
document.write('<\/a>');
//]]>
</script>

<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<script type='text/javascript'>
//<![CDATA[
document.write('<div id="' + rnd + '" style="display:none;">');
//]]>
</script>
   <ul>
     <b:loop values='data:links' var='link'>
       <li><a expr:href='data:link.target'><data:link.name/></a></li>
     </b:loop>
   </ul>
   <b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

2. También podemos sustituir los caracteres [+/-] por los que deseemos, por ejemplo:

↑↓ ⇅ ⇕ △▽ ▼

(Recuerda que algunos puede que no se vean correctamente en determinados ordenadores)

3. Por último, también puedes colocar una imagen en lugar de símbolos. Para ello, sustituimos [+/-] por <img src="AQUI-LA-URL-DE-LA-IMAGEN"/>

Además, en próximas entradas, os mostraremos otras formas de expandir y contraer elementos en Blogger, siguiendo otros procedimientos.

[+/-]