lunes, 30 de mayo de 2011

Expandir / Contraer Archivo de Blogger con JQuery: Efecto deslizante

Esta es una adaptación del artículo Expand-collapse toggle panel (div) [...] que hice para Blogger, permitiendo contraer y expandir los elementos dentro del Archivo del Blog, que cuando crece mucho un sitio, es un artilugio con un diseño visualmente molesto.

Así que podemos de muchas formas hacer que se contraiga, el método que uso en CGnauta es un script simple de ocultar/mostrar, pero este otro método con JQuery es rápido y simple y compatible con el Slider de JQuery que adapté a blogger.

El resultado hará que el item de Archivo de blog esté oculto hasta que alguien de un clic, ver aquí como quedará finalmente.

Modo on
Modo off
*Antes que nada respalde su plantilla.

Modificando Archivo: 
Vamos a la plantilla en Diseño - Edición de HTML, marcamos Expandir plantilla de artilugios y buscamos la sección:

<b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'>

El archivo tienen diferentes etiquetas <b:includable> ... </b:includable>, pero nosotros únicamente tenemos que buscar la que dice <b:includable id='main'> que es la que imprime resultado, generalmente está al principio, pero si introdujeron condicionales será enviada hasta el final, esta contiene el siguiente contenido:

<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
<b:if cond='data:style == &quot;HIERARCHY&quot;'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == &quot;FLAT&quot;'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == &quot;MENU&quot;'>    
<b:include data='data' name='menu'/>
</b:if>
</div>
 </div>
<b:include name='quickedit'/>
</div>

</b:includable>

Vamos a reemplazar el contenido marcado en azul entre <b:includable id='main'> y </b:includable> por el siguiente código:
<div class='msg_list'>
  <b:if cond='data:title'>
    <h2 class='msg_head'>&#9660;/&#9650; <data:title/></h2>
  </b:if>
<div class='msg_body'>
  <div class='widget-content'>
  <div id='ArchiveList'>
  <div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
    <b:if cond='data:style == &quot;HIERARCHY&quot;'>
     <b:include data='data' name='interval'/>
    </b:if>
    <b:if cond='data:style == &quot;FLAT&quot;'>
      <b:include data='data' name='flat'/>
    </b:if>
    <b:if cond='data:style == &quot;MENU&quot;'>
      <b:include data='data' name='menu'/>
    </b:if>
  </div>
  </div>
</div>
<b:include name='quickedit'/>
  </div>
</div>
Guardamos la plantilla y desmarcamos Expandir plantilla de artilugios.

En la parte de CSS de nuestra plantilla pegamos las siguientes reglas CSS:
/* expandir contraer archivo por matius */
.msg_list {
margin: 0px auto;
padding: 0px;
width: 100%;

}
.msg_head {
padding: 5px 10px;
cursor: pointer;
position: relative;
/*background:#fff;*/ / *Quite las marcas de comentario CSS, si quiere poner un fondo de color*/
margin:0px;
}
.msg_body {
padding: 5px 10px 135px; /* El último valor es para el espacio de la imagen*/
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUv1bCDeFDelnQYVBuljwPjcdB3w0QEhhK9vCBuhytN1dUIYsytntCPKnL6_D-rGOc1ZZQdDODFM7zDOFKmO6pj72WNSXk1oGUcgVJThB44pZEDtEsIqVsIBwO763XDU8LHPuLpw/) center bottom no-repeat; /* La imagen puede quitarla y poner un fondo de color */
}
/*fin expandir contraer archivo */
Instalando JQuery
Podemos usar cualquier otra versión, aunque la versión 1.3.1 funciona perfectamente con el Slider de mi anterior tutorial.

Para instalar JQuery, buscamos la etiqueta </head> y justo después pegamos:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>
<script type="text/javascript">
$(document).ready(function()
{
  //hide the all of the element with class msg_body
  $(".msg_body").hide();
  //toggle the componenet with class msg_body
  $(".msg_head").click(function()
  {
    $(this).next(".msg_body").slideToggle(600);
  });
});
</script>
Guardamos la plantilla.

Y ahora deberán ver que el archivo se contrae:

Comentarios y Consultas

Los mensajes serán revisados a veces. No te olvides que soy una persona, no se trata de faltar al respeto, todos tenemos opiniones, no hay que enojarse.

Puedes marcar Notificarme para recibir la notificación de la respuesta.

3 comentarios:

  1. muchisimas gracias lo estaba buscando me ha quedado genial, muchas gracias

    ResponderBorrar
  2. Esta rutina funciona muy bien. Pero desde que la incorporé, el blog comenzó a dar un error que dice "Def Ready", alguna idea?. http://venezuelasolo1.blogspot.com/

    ResponderBorrar
  3. Resuelto el error DefReady, venia causado por un Countown que terminó su cuenta casualmente al mismo tiempo que incorporé su rutina. Ya cambié la fecha del countdown

    ResponderBorrar

El ascenso de Skywalker(2019)

Joker 2019Una película que ha roto a divido a los fans muchos culparán a sus director por querer reparar Los últimos Jedi, no es su culpa al final.

[Leer artículo...]

La Espada del Inmortal (2019

Blade of The Immortal (2019)La historia de Manji, un guerrero samurái sin señor que ha sido condenado con la inmortalidad...

[Leer artículo...]

Kemono Michi: Rise Up (2019)

Kemono Michi: Rise Up (2019)Del autor de Konosuba, Genzo Shibata es un luchador japonés que es transportado a un mundo de fantasía, quien está obsesionado con los seres peludos.

[Leer artículo...]

ELI (2019)de Netflix

ELI (2019)de Netflix Reseña y criticaPelícula lanzada directo a video que nos cuenta una historia que parecería sacada de la Dimensión desconocida.

[Leer artículo...]

  © Cgnauta | CGsign blog | [Ver Licencia de uso] | Matius Lenin, Creative Commons, algunos derechos reservados

Regresar ARRIBA  

Vistas desde Mayo 2009

▼/▲ Archivo del Blog

Visitas totales

Información

IBSN: Internet Blog Serial Number 01-77-94-2008

Esta plantilla es creada y diseñada por Matius Lenin para CGnauta blog. Con Scripts de JQuery bajo licencia GNU/GPL. CGnauta es una marca registrada propiedad de Matius Lenin.