Minimiza el espacio de un gadget de tu blog (1)

martes, 30 de marzo de 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(&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: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.

8 comentarios:

  • diariopegassus

    Hola
    Termino de ver esta entrada y me ha parecido muy interesante. Tenemos una duda que nos está retrasando el lanzamiento de nuestro blog de turismo ecuestre. Necesitamos disminuir el espacio que hay entre los diferentes gadgets. Necesitamos que el espacio en blanco entre los distintos gadgets sea controlada por nosotros. Le agradecería mucho que nos ayudara.
    Nuestro blog de prueba es http://pruebapegassus2010.blogspot.com/.
    Gracias

  • La Trucoteca

    Pues, diariopegassus, no sabríamos decirte muy bien, ya que esa plantilla presenta códigos distintos a los que presenta la mayoría.
    Aún así creemos que puedes cambiar esos espacios en la parte:

    .box {
    background:#fff url("http://www.blogblog.com/rounders/corners_side_top.gif") no-repeat left top;
    margin:0 0 15px;
    padding:10px 0 0;

    Prueba a cambiar los valores (px) que salen en margin y en padding.

    P.D. ¿Estás seguro que es ese el blog al que te refieres? Porque no tiene la misma plantilla que en tu blog "oficial", donde habría que hacer otros cambios ;)

    Un saludo!

  • diariopegassus

    Gracias por la respuesta. perdone por el fallo. El blog principal es www.diariopegassus.com,. El otro q es el que estaba haciendo pruebas pero cambie la plantilla. Por mi parte, he conseguido, trasteando en la plantilla, disminuir los mergenes de los gadgets. Es decir, he conseguido quitar los espacios en blanco que hay entre los gadgets. Pero lo de quitar los bordes de la plantilla, se me resiste.

    Otra duda que tenemos, ¿existe alguna manera de que el blog se adapte automaticamente a las distintas resoluciones de los usuarios?.

    Bueno, espero que me puedan ayudar. Les ruego que si ven algo mal en la página, nos lo digan.
    Un saludo

  • La Trucoteca

    Hola de nuevo Diariopegassus, entonces, ahora quieres quitar los bordes de la plantilla, pero ¿a cuáles te refieres? ¿A las líneas naranjas que hay a los lados de las entradas y debajo del menú?

    Por cierto, sobre lo que dices de la resolución de los visitantes, no se puede hacer nada, salvo poner las medidas en porcentajes, cosa que es muy complicada y que no merece la pena ;)

    ¡Un saludo!

  • diariopegassus

    La idea es quitar los bordes del blog. Queremos que la plantilla NO tenga margenes ni en el lado derecho ni en el lado izquierdo. Queremos que la plantilla ocupe toda el ancho de la pantalla, Ahora hay un espacio en blanco entre el borde de la pantalla y las columnas( tanto izquierda como derecha). Eso queremos que desaparezca.
    Un saludo y gracias por el interes.

  • La Trucoteca

    Pues Diariopegassus, es que esos márgenes (que bueno, no son margenes, sino más bien, espacio en el que no hay nada), no se pueden quitar, poque dependiendo del tamaño de la pantalla del visitante, se verán más o menos (nosotros por ejemplo, viéndolo en nuestra pequeña pantalla de nuestro netbook de 10", casi no vemos espacios a los lados).
    Como te hemos dicho, no se puede hacer nada, pues la sidebar, la zona de las entradas, etc., tiene un tamaño fijo (en píxeles). La única manera de controlar ésto dependiendo de quién te visite, como te dijimos, sería cambiando muchísimos valores que ahora habrán en px a porcentajes en "tanto %", pero ello sería complicado y muy lento de comprobar :)

    ¡Un saludo!

  • Alejoblogger

    Justamente lo que buscaba, gracias Javier y Germán :)

  • La Trucoteca

    Alejoblogger, nos alegra que te sirviera este "truquito" :)
    Saludos!

  • Ir Arriba