Más en menos espacio. Secciones desplegables | Oloblogger Esta puede ser una idea para ocultar zonas del blog que normalmente deberían quedar en un segundo plano y que sin embargo, además de ocupar ...

24 de enero de 2013

Más en menos espacio. Secciones desplegables

Esta puede ser una idea para ocultar zonas del blog que normalmente deberían quedar en un segundo plano y que sin embargo, además de ocupar mucho espacio, están bien visibles. Se trata simplemente de mantener ocultas esas zonas y habilitar un sistema que las despliegue con un poco de arte. Con un slideDown para entendernos en términos de jQuery.

Para cierto tipo de diseños podría dar mucho juego pero la aplicación más útil quizás sería la de habilitar una gran sección a modo de menú en la parte superior del blog con los habituales datos de contacto, botones sociales, buscador, etc. pero de manera que em un principio sólo se viera un pequeño botón a manera de lengüeta de la que tirar.


En otros casos podemos hacer como también se ve en esta demo y usar los botones para que el usuario pueda quitar de en medio alguna que otra caja más.


Ahí me he pasado un poco porque hasta las entradas se pueden plegar (botón abajo del todo), pero espero que se entienda que es sólo con fines didácticos :)



Para que funcione esto lo primero que haremos será insertar antes de </head> una pequeña función JavaScript que oculta determinado bloque si está visible y a la inversa. La función debe recibir dos datos, siendo el primero la ID o clase del bloque en cuestión y el segundo el identificador del botón con el que realizaremos esa acción.

Podría haberse hecho un código más sencillo, o incluso haber desarrollado el truco sólo con CSS, pero esta manera nos da máxima compatibilidad, nos permitirá habilitar varias zonas plegables fácilmente y además nos da la opción de ir personalizando el contenido del botón según sirva para abrir o cerrar:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'/>
<script>
//<![CDATA[
function toggleblock(idbloque, idboton) {
if (jQuery(idbloque).is(':visible')) {
jQuery(idbloque).slideUp();
jQuery(idboton).html("&#9660; Abrir &#9660;"); //Cambio botón
}
else {
jQuery(idboton).html("&#9650; Cerrar &#9650;"); //Cambio botón
jQuery(idbloque).slideDown(function() {
jQuery("#s").focus();
});
}
}
//]]>
</script>

A algunos ya les sonará este formato pero para los que no, esto funciona con jQuery, que es la librería que se carga en la primera línea. Si ya la tienes cargada en tu blog, esa primera línea deberías obviarla y no ponerla.

El primer dato que recibe la función (idbloque) es el identificador de la caja que contiene la zona plegable y el segundo es el del botón. Más adelante lo vemos con un ejemplo, pero sí que quiero comentar en esta parte que si no se desea cambiar el aspecto del botón, bastaría con eliminar las dos líneas con comentarios indicativos. Y si se quiere cambiar el texto o los símbolos, pues entonces sólo habría que sustituir lo marcado en verde por lo que deseéis.


Y ya podemos poner esto que viene a continuación justo detrás del cierre del div que queramos convertir en desplegable. Esa caja debe tener un nombre de ID o clase único, es decir que no haya otra en la plantilla con el mismo nombre. De lo contrario no funcionará bien el código porque el intérprete no sabría cual de ellos sería el que hay que abrir o cerrar.

<hr style='height:0;margin: 0 0 20px 0;border:2px solid #6f0000;'/>
<div class='toggle1' onclick='toggleblock(&quot;.box&quot;,&quot;.toggle1&quot;);'>&#9660; Abrir &#9660;</div>

En el ejemplo anterior, toggle1 es el nombre que le he dado al botón rojo que hará plegar/desplegar la caja, que también siguiendo el ejemplo en mi plantilla-demo tiene una clase que se llama .box. Podréis observar que esos dos datos (.box, toggle1) son los que se mandan a la función toggleblock().

Si quisiéramos habilitar un segundo botón para una segunda caja habría que cambiar precisamente esos dos datos:

<hr style='height:0;margin: 0 0 20px 0;border:2px solid #6f0000;'/>
<div class='toggle2' onclick='toggleblock(&quot;#crosscol&quot;,&quot;toggle2&quot;);'>&#9660; Abrir &#9660;</div>

Este último código serviría para el crosscol o caja que hay por defecto en Blogger entre la cabecera y el cuerpo de las entradas. Para que os hagáis una idea de dónde habría que colocarlo, en las actuales plantillas habría que situarlo dónde se indica a continuación:

<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML1' locked='false' title='Slider' type='HTML'/>
</b:section>
<b:section class='tabs' id='crosscol-overflow' showaddelement='no'/>

</div>
</div>

<div class='tabs-cap-bottom cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
</div>


<hr style='height:0;margin: 0 0 20px 0;border:2px solid #6f0000;'/>
<div class='toggle1' onclick='toggleblock(&quot;#crosscol&quot;,&quot;.toggle1&quot;);'>&#9650; Cerrar &#9650;</div>

Nótese que la ID o la clase tienen que llevar su correspondiente sostenido (#) o punto (.).


Y para terminar el estilo para el botón, que ese no hace daño, es lo más fácil de poner y siempre se puede modificar al gusto. Si vais a usar más de tres botones (no creo, pero bueno) sólo tenéis que añadir con comas más toggleX.

Como es habitual lo colocamos antes del cierre ]]></b:skin>.

.toggle1, .toggle2, .toggle3{
position: absolute;
left: 20%;
display:inline;
width: 100px;
margin: -20px 0 0;
background: #6f0000;
color: #ccc;
font-size: 12px;
text-align: center;
cursor: pointer;
}
.toggle1:hover, .toggle2:hover, .toggle3:hover {
color: #fff
}



Para el tema de hacer un gran menú superior, os pueden servir estos dos códigos que os paso adicionalmente.

El primero iría justo después del cierre de la sección correspondiente a la Navbar para que la caja-menú saliera justo arriba del todo como en la demo. Esto os generará tres columnas para gadgets accesibles desde Diseño y así podréis añadir lo que queráis desde allí sin necesidad de tocar más la plantilla:

<div class='box'>
<div class='col'>
<b:section class='menu' id='col1' showaddelement='yes'/>
</div>
<div class='col'>
<b:section class='menu' id='col2' showaddelement='yes'/>
</div>
<div class='col'>
<b:section class='menu' id='col3' showaddelement='yes'/>
</div>
</div>
<div style='clear:both;'/>

Y el segundo, sólo estilo, en la parte CSS antes del cierre del SKIN:

.box {
display:none;
width: 940px;
margin:0 auto;
height:160px;
padding: 20px 0;
}
.col {
float: left;
width: 295px;
margin-left: 20px;
}
.col:first-child {
margin-left: 0;
}

Por cierto que antes se me olvidó pero para que las cajas aparezcan inicialmente plegadas como en la demo, deberían llevar un display: none; tal y como lo lleva esta anterior.

Actualización: Cómo ya han sido más de dos los que me han pedido esta misma plantilla para usarla tal cual, aquí tenéis un enlace para poderla descargar:

¿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
Copy URL

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

follow us in feedly

36 comentarios :

  1. Exelente oloman, son grandiosas estas secciones desplegables, rapidas y comodas, Mil gracias por este post..

    ResponderEliminar
  2. Grandiosas Oloman. Hay que pensar muy bien como y donde se pondran y asi sacarles el mejor provecho. Saludos y gracias por el post

    ResponderEliminar
  3. Excelente aportación, el problema es que los que somos novatos no endemos muy bien,te pediria por fabor donde podría bajarme la platilla demo, me gusta muchimo para el blog de mi colegio

    Un saludo

    ResponderEliminar
    Respuestas
    1. No sabría darte más indicaciones en un comentario de las que di en la entrada. No obstante si quieres descargar la plantilla, la he almacenado temporalmente aquí: ENLACE.

      Eliminar
  4. Gracias una vez más.

    un saludo

    ResponderEliminar
  5. Hola Oloman estoy tratando de ver mi plantilla asi como la mostraste pero no he podido descargue la plantilla como indicaste pero no se me muestra como lo indicaste ... me podrias regalar una ayudita?

    ResponderEliminar
  6. Me encanta esto. Hola Oloman, te consulto porque subí a mi blog http://www.mitecladoyyo.com/ una plantilla prediseñada y le estoy haciendo cambios, pero no me aparecen los datos que por lo general deben aparecer en el post footer. Es decir, no se ven, porque en la plantilla están ¿que puede ser?

    ResponderEliminar
    Respuestas
    1. Hay una parte de tu CSS en la que podrás encontrar esto:
      .post-footer {
      display: none;
      }

      Si lo quitas aparecerá tu post-footer, que por cierto tiene tres barras de botones sociales ;)

      Eliminar
    2. ¡Oh, magia! :) Apareció. Es que insistí tantas veces que me quedaron tres barras! Bueno, ahora veo como me las arreglo para sacarlas. MUCHISIMAS GRACIAS Oloman.

      Eliminar
    3. La magia suele esconder algún truco que cuando se conoce resulta muy simple ;)

      Eliminar
    4. De eso se trata, bien dicho. Todo solucionado.

      Eliminar
  7. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  8. hola Oloman Gracias por la informacion ya lo aplique a mi blog http://telcelcontratacion.blogspot.com/

    ResponderEliminar
  9. Hola Oloman esto que te preguntaré no tiene que ver con este post, pero solo para ver si me podés ayudar.

    Hace varios meses había encontrado un sitio que "analizaba" tu pagina y te informaba de links rotos, de si estaban bien el título, las etiquetas, los tags y esas cosas...

    Lo conoces?

    Gracias de antemano

    ResponderEliminar
    Respuestas
    1. Pues no, lo siento, pero nunca he usado herramientas de ese tipo para localizar links rotos, pero si la encuentras de nuevo no dudes en ponerla por aquí.

      Con respecto al título, etiquetas, tags y eso que no sé exactamente qué es, yo uso Webmasters Tools y esta utilidad para los microdatos, pero poco más. No sé si será eso lo que buscas.

      Eliminar
    2. Oloman, gracias por tu respuesta. Los probaré.

      Por otro lado, te comento que el encontré el sitio en cuestión. Se llama "WooRank". Creo que habría que darle una oportunidad.

      Saludos.

      Eliminar
    3. Ahora que lo he visto recuerdo que una vez lo probé. La verdad es que da una información muy completa, aunque opino que no hay que obsesionarse con todo. El problema es que es de pago y sólo deja hacer un análisis gratuito a la semana.

      Eliminar
  10. Hola Oloman, de nuevo estuviste genial. Gracias a tus brillantes explicaciones pude implementarlo a la perfección, es realmente muy útil. Igualmente tengo un problema, es el siguiente:
    Necesito (quiero) emplear el efecto dos veces, con dos botones y divs distintos. Funciona bien, se cambiar la parte del codigo necesaria. Al segundo boton le hice un nuevo estilo separado de #toggle1 porque lo quería distinto y también funcióno y el efecto en si también. El problema que tengo es que necesito que los dos botones tengan textos diferentes, uno "Social" y "Cerrar" y el otro "Buscar" y "Cerrar". Intente colocar dos nombres reemplazando el "Abrir" que tu habias colocado, pero no consigo acertar con el código para que funcione. También intenté duplicar el script, y colocarle a cada uno un texto distinto para el botón pero tampoco funciona. Si existiera alguna solución que me puedas acercar, te agradecería. Saludos!

    ResponderEliminar
    Respuestas
    1. Para individualizar los rótulos lo fácil es duplicar la función pero del todo. Es decir, creando un toggleblock() como la de aquí y otra toggleblock2() cambiando los textos. Pero luego también tienes que cambiar la llamada en el ONCLICK según necesites una u otra.

      Eliminar
  11. Hola, tienes alguna herramienta similar pero apta para ponerla dentro de un artículo con el fin de agrupar contenido. Algo así como lo que se ve en este artículo: http://www.lasillavacia.com/historia/asi-van-los-macroproyectos-para-descongestionar-bogota-43007

    Y otra consulta. ¿de implementar esta herramienta dentro de un artículo afectaría las búsquedas provenientes de google?

    Gracias por todos los consejos, son muy útiles.

    ResponderEliminar
    Respuestas
    1. En vertical no. Lo más parecido que tengo es esto, pero no lo veo para poner un título largo.

      Eliminar
    2. Ya está. En esta entrada Vagabundia explicó un acordeón de esos con jQuery.

      Eliminar
    3. Es justo lo que buscaba. Muy gentil, gracias.

      Eliminar
  12. Hola Manolo, me descargue la plantilla en un blog de pruebas y me gusto y la he ido modificiando conforme a mis gustos, eso si ahora teng un pequeño problema, quiero quedarme solo con el segundo desplegable (justo el que esta debajo de la cabecera) y eliminar el de arriba de la cabecera y el que esta a pie de pagina... ¿Cómo hago esto a partir de la plantilla? No quiero borrar algo que no es y armarla.. Muchas gracias de antemano crack...

    ResponderEliminar
    Respuestas
    1. En la plantilla hay tres cortes que llevan este código:
      <hr style='height:0;margin: 0 0 20px 0;border:2px solid #6f0000;'/>
      <div class='toggle3' onclick='toggleblock(&quot;.box&quot;,&quot;.toggle3&quot;);'>&#9660; Abrir &#9660;</div>

      Sólo cambia en ellos el número del toggle3 que puede ser 2 o 1. Si quitas esas mismas líneas que te puse te liquidas el de arriba del todo y si quitas las que llevan el toggle2, eliminas el de abajo. El que queda, evidentemente es el 1 ;)

      Eliminar
  13. Muchas Gracias, ya está hecho y corregido, al final solo he borrado el toggle 2 porque al 3 le he encontrado una utilización. Un saludo y lo dicho gracias por solucionarnos estos engorros y perdona por las molestias.

    ResponderEliminar
  14. Hola Oloman, me interesaria SOLAMENTE poner el menu en acordeon de imagenes que tiene este truco (que en la demo aparece con fotos de rayos, etc) pero convertirlo en un menu de paginas estaticas, es decir, que no solo se deslicen las imagenes, sino que ademas se las pueda cliquear y te lleven a una pagina estatica.
    Espero se entienda. Gracias por tantos trucos

    ResponderEliminar
  15. Hola. Tal vez este no sea el post apropiado para exponer mi pregunta, pero... podrías echarme una mano?. Como puedo quitar (ocultar) la sidebar, pero sólo en la pagina "MURO" en la plantilla de este blog? http://bdep105.blogspot.com.es . Gracias.

    ResponderEliminar
    Respuestas
    1. Para eso tendrás que echar mano de las condiciones de las que disponemos en Blogger. En concreto de la que se cita en el anterior enlace para una dirección concreta.

      Dentro de la condición podrías meter unas etiquetas STYLE y en su interior el CSS necesario para que el bloque completo de la sidebar se ocultara (.main-inner .column-right-outer {display:none;}) sin olvidar ensanchar el cuerpo principal (.column-center-outer {width: 1000px;}). El código que puse es sólo un ejemplo, tendrás que ajustarlo a tus necesidades.

      Eliminar
    2. Muchas gracias. Tema solucionado.

      Eliminar
  16. Hola, cómo puedo hacer que la sección aparezca cerrada de forma predeterminada? Saludos

    ResponderEliminar
    Respuestas
    1. Hola Dideco. Pues para eso sólo tienes que añadir "inline" un style='display: none;' a la caja (div) de la sección que quieres ocultar.

      Eliminar