Como hacer un encabezado plegable y ahorrar espacio en blogger

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:

Codigo:

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

¿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?

Publicado por Oloman Oloman