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://lh6.googleusercontent.com/-nQ8zeWgwI5A/TeP1Z9xH23I/AAAAAAAAU5k/hBAAuNeNouw/down_arrow50pocent.png) 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 son moderados serán revisados antes de publicarse.

Este no es un foro de adolescentes, no uses letras en vez de palabras completas como "q" en vez de "que", ni escribas tus mensajes en mayúsculas, se respetuoso con los demás, si no estás de acuerdo no comentes.

Una cosa es que no te guste una crítica, otra que uses un lenguaje inapropiado para demostrarlo. No me siento en la obligación de publicar ningún mensaje en específico o de leerlo entero si usas palabras altisonantes.

3 comentarios:

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

    ResponderEliminar
  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/

    ResponderEliminar
  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

    ResponderEliminar

Termina la serie Grimgar de Fantasía y Cenizas

Grimgar de Fantasía y Cenizas (2016)Llegó a su fin Grimgar de Fantasía y Cenizas luego de doce episodios.

[Leer artículo...]

One Punch Man OVA 4 (2016): Review y crítica

One Punch Man OVA 4 (2016): Review y críticaY llega una nueva adaptación de personajes del universo marvel, una divertida aventura espacial.

[Leer artículo...]

Gate: Segunda temporada (2016): Episodio 12 Final: Reseña y crítica

Gate: Segunda temporada (2016): Episodio 12 Final: Reseña y críticaLas aventuras de Itami y sus amigos llega a su fin con el rescate de Piña de las manos de Zorzal.

[Leer artículo...]

Desaparecida: Boku Dake ga Inai Machi (2016) Episodio 12 Final - Reseña y crítica del anime

Desaparecida: Boku Dake ga Inai Machi (2016)Satoru descubre al culpable de la trama, es el momento de enfrentarse y tendrá que dar todo de sí para cambiar su suerte.

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

Anexos

Bitacoras.com