 |
Usuario: Ingresar |
Blog de diseño gráfico, informática, tecnología y cultura política.
 |
| Dirección URL | http://cgnauta.blogspot.com/ Registrado:03-Feb-2008 |
Compartir:
|
|
 Enviar a email | Expandir / Contraer Archivo de Blogger con JQuery: Efecto deslizante en General |  Por matius
el 31-Dec-1969 | 
 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 + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<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'>▼/▲ <data:title/></h2>
</b:if>
<div class='msg_body'>
<div class='widget-content'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<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:
Leído 1 veces
|
|
 |
| Contenido duplicado y el archivo de Blogger | | ¿Que tan cierto que el archivo de Blogger como otros elementos -Etiquetas y paginas de navegación- que generan páginas dinámicas son consideradas contenido duplicado?
Con esto de Google Panda y Google Cafeina, muchas paranoias se han vuelto cosa cotidiana, en especial el contenido dinámico de nuestros propios sitios web que presentan varias veces el mismo contenido. ¿Pero realmente Go [..] Leer nota completa | | Publicado 31-Dec-1969 por Matius Lenin en General
Leído 1 veces. Más resultados en    |
|
 | Desde Algún Lugar De Buenos Aires |  Buenos Aires | Un blog sobre la aventura diaria de ser mujer, laburante, artista, estudiante, internetadicta, madre de familia... y vivir en una ciudad como Buenos Aires. Y bueh, no es fácil ser yo! Desde algun lugar de Buenos Aires |
| Una casa deslizante en las afueras | | Con la ayuda de un arquitecto amigo de la infancia, Ross Russel ha decidido construirse la casa de sus sueños junto al bosque de Suffolk, en Inglaterra. El resultado es un edificio que se desliza y despliega en varios módulos y que permite a la familia Russel cambiar la configuración de su hogar en función de sus necesidades. De esta forma, pueden aprovechar el so [..] Leer nota completa | | Publicado 01-Mar-2009 por aberron en General
Leído 6 veces. Más resultados en |
|
| Salud Y Medicina | San Felipe | Espacio que promociona todo lo nuevo e innovador que acontece el el Mundo de la Ciencia Medica SALUD Y MEDICINA Portal Educativo que divulga lo mas Actual e Innovador de la Ciencia Medica. |
| Como Reducir el Riesgo de Contraer el VIH | | Tomando un antirretroviral diariamente cuando no se está infectado con el VIH puede reducir el riesgo de contraer este Virus de Inmunodeficiencia Humana, causante del sida, hasta en un 73%, según... Leer nota completa | | Publicado 31-Dec-1969 por JesusGutierrezD@gmail.com (Dr. en MedicinaSalud
Leído 2 veces. Más resultados en |
|
| Blog De Boletín Informativo | Caracas | Weblog con noticias internacionales, somos la otra cara de la informacion, noticias en castellano. BOLETIN INFORMATIVO; la otra cara de la informacion Traducir esta web en otros idiomas, busca en nuestros enlaces mas abajoCAPTURADO EN CAMARA, NO APTO PARA MENORES DE EDAD, OBSERVALO POR BOLETIN INFORMATIVO TELEVISION, AHORA ESTAMOS TAMBIEN EN |
| Newton Las Pelotas | | Un mundo de ficciones literarias, hechos asombrosos y máquinas voladoras. Aquí queda suspendida toda ley de gravedad. ¡Newton las Pelotas! |
| ¡Pegale con efecto!... ¡Con efecto Magnus! | | "¡Pegale con efecto!" Este puede ser el el grito de un DT cuando entrena a su pateador en el arte de embocar tiros libres. ¿Pero qué es esto de pegarle con efecto? Es tirar de tal manera que la pelota adquiera una trayectoria levemente elíptica. De lo que estamos hablando es del efecto Magnus, el DT probablemente lo sabe, lo que pasa es que queda mal gritar "¡pegale con efecto Magnus!"
El efecto [..] Leer nota completa | | Publicado 14-Jul-2008 por noreply@blogger.com (JAVIER) en artistas
Leído 36 veces. Más resultados en |
|
| Ipod Total | Buenos Aires | Análisis de productos, noticias e información sobre iPod, iPhone, Apple TV, iTunes y reproductores mp3 iPodTotal - todo sobre iPod, iTunes, iPhone, Apple TV y reproductores mp3 todo sobre iPod, iTunes, iPhone, Apple TV y reproductores mp3 |
|
Advertencia YAAQUI.COM no verifica la veracidad de la información publicada y no se responsabiliza
por el uso que se le de a la infomación del contenido publicado en los feeds y weblogs independientes.
Las opiniones vertidas en este sitio no necesariamente son nuestras. Nos reservamos el derecho de
remover cualqueir material que consideremos inconveniente.
|
|
| |
Hola, Invitado
En línea: 88 visitantes
+ fotos
Todas las personas con tatuajes que cubren diferentes y grandes partes de sus cuerpos están en mayor riesgo de contraer la hepatitis C y otras enfermedades de transmisión sanguínea, según un estudio de la Universidad de Br... [..] 
La semana pasada en CES [..] 
