En realidad, no es nada del otro mundo, solamente una variante de Expandir/Contraer pero aplicado a uno de esos elementos que Blogger maneja por su cuenta y sobre el cual no es mucho lo que podemos hacer así que debemos hacer trampa.
La idea es usar dos elementos diferentes, en uno (HTML) pondremos los códigos que controlan al otro (Archivos). Empecemos por el final, si no lo tenemos, agregamos el elemento Archivos y lo ubicamos en la sidebar donde deseemos con las opciones que nos gusten.
![](http://4.bp.blogspot.com/_hljKDuw-cxQ/SK0R0IKcOaI/AAAAAAAAHxw/jynVIcb_8O0/s00/archivosBlogger_1.png)
![](http://3.bp.blogspot.com/_hljKDuw-cxQ/SK0R0bf6_JI/AAAAAAAAHx4/q1H-TKiS9AQ/s00/archivosBlogger_2.png)
![](http://3.bp.blogspot.com/_hljKDuw-cxQ/SK0R0fiS2CI/AAAAAAAAHyA/LIuW14KQBro/s00/archivosBlogger_3.png)
<b:widget id='HTMLX' locked='false' title='ARCHIVOS ON/OFF' type='HTML'/>
<b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'/>
<b:widget id='HTMLX' locked='false' title='ARCHIVOS ON/OFF' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
Como la idea es simular el mismo estilo de los títulos del resto de la sidebar y agregarle un pequeño ícono para desplegar y contraer el elemento Archivos, vamos a poner directamente el código allí y para eso, necesitaríamos saber cuáles son las propiedades CSS, cosa que en general, está definida como:
.sidebar h2 { ....... }
Para no complicarme la vida alineando yo usé una tabla pero, podemos hacerlo de cualquier otra forma:
<table id="tablaArchivos" cellspacing="0" cellpadding="0">
<tr>
<td valign="middle">ARCHIVOS</td>
<td align="center" valign="middle" >
<a href="javascript:void(0);" onclick="masmenosArchivos();" title="Expandir/Contraer archivos">
<img id='manejaArchivos' src='URL_imagenContraido' />
</a>
</td>
</tr>
</table>
![](http://3.bp.blogspot.com/_hljKDuw-cxQ/SKzzYfqLzDI/AAAAAAAAHxY/CigrbFP6NVE/s00/demoArchivosContraido.gif)
Para probar que vamos bien, agregaremos los estilos CSS antes de </b:skin>. En este caso:
#tablaArchivos { /* son las mismas de .sidebar h2 */
background: #0F181F url(URL_imagenFondo) no-repeat 0 50%;
border; none;
color: #FF9933;
[ ... font-family ... font-size ... font-weight ... margin ... padding ... a gusto ... ]
height: 28px;
width: 100%;
}
a#manejaArchivos, a#manejaArchivos:link,
a#manejaArchivos:visited, a#manejaArchivos:active,
a#manejaArchivos:hover {
display: block;
[ ... height ... width ... dependen del tamaño de la imagen a usar ... ]
margin: 0;
padding: 0;
}
#BlogArchive1 {
display: none;
padding: 0;
}
<script type='text/javascript'>
// <![CDATA[
var archivosIMG = new Array();
archivosIMG[0] = "URL_imagenContraido";
archivosIMG[1] = "URL_imagenCerrar";
function masmenosArchivos() {
if(document.getElementById('BlogArchive1').style.display== "block") {
document.getElementById('manejaArchivos').src=archivosIMG[0];
document.getElementById('BlogArchive1').style.display="none";
} else {
document.getElementById('manejaArchivos').src=archivosIMG[1];
document.getElementById('BlogArchive1').style.display="block";
}
}
// ]]>
</script>
Si guardamos y probamos (con Vista Previa no podremos porque los scripts se deshabilitan), todo debería funcionar aunque nos quedaría por resolver un detalle: eliminar el título del elemento Archivos.
![](http://4.bp.blogspot.com/_hljKDuw-cxQ/SK0R0UWD1yI/AAAAAAAAHyI/_eMoGmG3M-I/s00/archivosBlogger_4.png)
<b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
.......
![](http://1.bp.blogspot.com/_hljKDuw-cxQ/SKz6E_kPntI/AAAAAAAAHxo/fCZ3IHcDoxQ/s00/demoArchivosCerrar.gif)
<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>
<table border='0' cellpadding='0' cellspacing='0' id='tablaCerrarArchivos'>
<tr>
<td align='center' valign='middle'>CONTRAER ARCHIVOS</td>
<td align='center' valign='middle'>
<a href='javascript:void(0);' onclick='masmenosArchivos();'>
<img align='right' src='URL_imagenCerrar' />
</a>
</td>
</tr>
</table>
<b:include name='quickedit'/>
</div>
</b:includable>
![](http://2.bp.blogspot.com/_hljKDuw-cxQ/SK0R0iV82gI/AAAAAAAAHyQ/q1wTtW-42mI/s00/archivosBlogger_5.png)
94 comentarios:
Gracias JMiur
Ya lo estoy probando.
Un saludo
(Gracias)
Me habría convertido en la cuarta persona en preguntarte lo mismo. Gracias.
Salud!
No me había fijado :O ¡Está genial! También se le puede dar estilo (imagen de fondo, etc) a los archivos añadiendo al CSS:
#Blogarchive1 {
background:url();
...}
¿Cierto? Yo agregué así la imagen de fondo (me lo preguntan mucho también). Es un elemento que, como el formulario de comentarios, se resiste bastante a ser personalizado, y siempre me disgustó un poco... Esto me encanta. ¡Gracias!
no, a mí no me salio.
aparece solo la palabra archivos, y no hay manera de desplegar.
:O
Gracias igual.
En realidad es bastante sencillo y sí, el fondo puede modificarse de esa manera.
¿Un poco lío no? Yo prefiero poner una lista con los 5 últimos posts.
yuo tengo otra consulta, el cuerpo de entradas de mi blog esta demasiado encima del sidebar y ademas es muy angosto, me gustaria correrlo un poco y ampliarlo, pero no se como hacerlo, si tu sabes y me puedes ayudar, me harias un favor bien grande...
Gracias!
Griseada:
En este momento, no podrías separalos porque ocupan todo el ancho disponible pero, si aumentas ese ancho disponible, se separarán por si mismos.
Eso es sencillo de hacer y probar. Fíjate si encuentras esto:
#outter-wrapper {
.......
width: 660px;
}
y aumenta ese valor, por ejemplo a 670px
El resultado, peudes verlo con Vista Previa e ir probando valores sin que cambie la plantilla.
Hola JMiur, una consultirijilla, ¿En qué consiste eso de Creative Commons? Explicámelo fácil, por que me metí en los FAQ's de eso y no entendí ni jota, hablaban de arte, propiedad, derechos, pero no entendí... y por cierto, ¿por qué Gema tiene abajito de su blog una C de copyright ©? jejejeje, nos leemos!
No creo poder explicarlo, tal vez te sirva el artículo de la Wikipedia
Bueno se a quedado bien ,mi problema es que cuando le pongo debajo de los archivos otro gadget , cuando entro y le doy a los archivos se queda el gadget 2 que le puse abajo de archivos ,se queda arriba y no se como arreglarlo y los archivos abajo .
Haber si me puedes echar una mano.
Gracias
Un Saludo
Fijate que el orden en que están ahora es:
HTML12
Label11
BlogArchive1
Y deberían estar:
HTML12
BlogArchive1
Label11
Simplemente ve a Diseño y mueve el elemento archivos para que quede arriba de las etiquetas.
gracias pero me ha pasado lo mismo que a monja.
ya volvi a hacer todo el proceso y me aparece lo mismo =(
En el elemento HTML2 que dice Archivos on/off no hay nada, está vacio. Allí debería haber un enlace que ejecute el script, en el ejemplo, es una imagen.
No me aparece: Archivos del blog,solo me aparece Archivos on/off . Te dejo esta imagen para que veas.
Imagen
No aparece porque esta oculto con display:none. Habría que haberlo ubicado antes pero, no importa; ahora:
Primero quita eso de display:none y guarda la plantilla.
Ve a Diseño y mueve elemento que ahora, será visible. Guarda.
Vuelve a colocar display:none y guarda la plantilla.
Tambien puedes hacerlo directamente desde el HTML de la plantilla. Sin expandir los artilugios, copias la línea y la mueves:
<b:widget id='HTML2' locked='false' title='ON OFF' type='HTML'/>
<b:widget id='BlogArchive1' locked='false' title='ARCHIVOS' type='BlogArchive'/>
<b:widget id='Label11' locked='false' title='ETIQUETAS' type='Label'/>
Este truco está genial pero creo que lo que quiero hacer no es exactamente eso.
¿Hay alguna manera de que no aparezcan desplegados el último año y las entradas del último mes sino sólo los años o los meses del último año tal cómo queda cuando nosotros lo volvemos a contraer?
Mil gracias.
Hola Jmiur, la verdad esto es lo que buscaba, me ha salido una variante de como lo tienes tu pero estan desplegados los archivos, y me gustaría que estuvieran ocultos, no sabras a que se debe o en que fallo??
He borrado el display:none, habra sido eso por lo que se muestran en un principio expandidos?
Juanjo.
Mr.Prado:
No conozco ningún método para controlar ese elemento, es una de esas cosas que Blogger guarda bajo siete llaves :(
Juanjo:
Exactamente es eso. Si el estado inicial es "oculto", debe tener la propiedad display:none
Pues efectivamente era eso jeje, gracias de nuevo JMiur, ahora funciona a la perfección.
Saludos!!
hola, no puedo estableser las propiedades css, es decir, que no se muestran, esta copiado de tu ejemplo, nada diferente, igualito, esta en mi blog de pruebas
No veo el elemtno Archivos en el blog de pruebas, ni ninguna otra parte de lo dicho acá.
Hola JMiur!
Una consulta. Me gustaría este truco pero veo mucho nivel por aqui !!! y yo estoy muy pez en esto.
Estaba siguiendo todos los pasos hasta que he llegado a
"está definida como: .sidebar h2 { ....... }" quieres decir que lo que tenemos que copiar está antes del ultimo }, no?
[ ... font-family ... font-size ... font-weight ... margin ... padding ... a gusto ... ]"
no se lo que tengo que poner ahí, si todo, o algo, o qué, o no se... puedes poner algo tipo aunque tenga que modificarlo a mi gusto?
[ ... height ... width ... dependen del tamaño de la imagen a usar ... ] ahí tampoco he entendido qué tengo que meter...
qué faena estar tan pez, pero es que he tenido casi 200 entradas en un mes y me interesaría mucho este truco porque este mes no habrá tantas entradas pero sí muchas
GRACIAS!
.sidebar h2 { ....... } Eso que está entre ambas llaves, son las propiedades de los títulos de la sidebar. Lo que quiero decir es que, si queremos que el nuevo título se vea igual, debemos copiar ese contenido. Es puramente estético así que, cualquier cosa, puedes saltearte eso y continuar, luego, una vez que funciona, lo vemos y lo agregamos.
Lo mismo ocurre con el resto, son todas propiedades que hacen que eso se vea de cierta manera, de que color, de que tamaño, etc. Como te dije antes, puedes obviarlo y seguir ya que todos esos detalle podemos agrregarlos luego.
Genial, ahora ya está entendido. Y me ha salido, por cierto, ahora solo tengo que darle las propiedades del texto y eso. Lo tengo en un blog de pruebas, en cuanto haga modificaciones en el "bueno" lo incluiré. MUCHAS GRACIAS!
Perfecto, Maite, me alegra que lo resolvieras.
Necesito ayuda extra, JMiur. Ayer finalmente lo puse en el "bueno", genial. Pero acabo de hacer los cambios a la plantilla y he quitado una de las sidebar, casualidad donde estaba lo de archivos. Se han ido todos los elementos encima de las entradas, y al ir a pasarlos a la ya unica sidebar de la derecha resulta que me ha desaparecido el gadget de archivos original.
No se si habrá algún truco para recuperarla, o bien hago todos los pasos a la inversa. He intentado poner otra vez el gadget de blooger de archivos, pero claro, me dice que ya lo tengo incluido.
Qué me sugieres? ir pasos atrás o bien se te ocurre otra manera? Es una lástima, funcionaba a la perfección!
Esto me da que es dificilisisisisimo !!!!!
Gracias. Maite
Ya está solucionado. No he podido usar tu truco pero tengo una entrada con todos los archivos ordenados por etiquetas que siempre actualizo cuando hago nuevas y he hecho un enlace a ella.
Mira debado de etiquetas...
http://hastalalunaidayvuelta.blogspot.com/
Ya que está hecho así lo aprovecho mejor.
Gracias, tu truco era fantástico.
Maite
AH! he probado en el de pruebas a ir pasos atrás, y si, funcionaba, aparecía de nuevo archivos, pero en el bueno ha desaparecido con la sidebar borrada y he hecho la prueba de dar marcha atrás y no aparecía el gagdet de archivos originales.
Perfecto Maite :D
Hola JMiur!
Aquí de nuevo jajaja. Lo conseguí gracias a tus indicaciones de ayer, mil gracias, pero... PONGO UN PERO !!!
He hecho la prueba abajo del todo del blog, por si metía la pata, y resulta que ahora no puedo mover los archivos. SIEMPRE VA A ESTAR ÁHÍ ABAJO, y tendrá que ser siempre el último porque y si quiero ponerle un gadget por debajo, por ejemplo un video, me sale entre el título y la lista de archivos jajaja qué locura!
No me importaaaaa me ha salido! pero es importante saber que donde se haga, ahí se va a tener que quedar.
Personalmente ESTOY MUY CONTENTA, MUCHAS GRACIAS!!!!!
Me alegro, Maite y resolvamos el pero :D
Ocurre esto, has agregado 2 elemento, uno con el título y otro con los archivos. Debes mover ambos. Pero (otro pero) si lo haces desde Elementos de la plantilla, ese de archivos no lo verás porque le has dicho que se oculte.
Dos soluciones. Simplemente colocalo visible:
#BlogArchive1 {
display: block;
padding: 0;
}
lo ubicas y luego vuelves a ocultarlo.
Sino, sin expandir los artilugios verás que cada elemento es sólo una línea de código. Copias y pegas donde quieras que aparezca, es decir, mueves esas dos lineas de los elementos a otra posición.
Menos mal que venía a hacerte otra consulta y he entrado por este post! me hubiera perdido la resolución del PERO ! Tienes arreglo para todo, qué gusto da! lo voy a probar, por supuesto!
No se donde dejarte esta consulta así que te la dejo aquí mismo...
Sería posible poner un índice de páginas bajo "entradas mas recientes, principal y entradas anteriores"??? Aunque simplemente fueran números? Aunque fuese en fila india, en línea, no me importa, solo números o como tú quieras, confío en tu criterio. Me sería muy útil.
Gracias !!
Voy a arreglar el PERO ! GENIAL!
No estoy seguro de lo que quieres hacer, Maite ¿Un índice como una paginación?
HOLA!!!!
Vuelvo por aquí, como ya te conté lo de la paginación lo he dejado para más adelante...
Iba a ponerme a hacer este mismo truco de extandir/contraer TAMBIEN para la lista de blogs porque ya son demasiados, pero ... se me ha ocurrido que quizá no deba hacerlo por si hay "interferencias" con el expandir/contraer de los archivos? Es que lo voy a hacer en la misma sidebar!
Si ves que pueda haber problemas ni lo intento! se mezclarán códigos y se me volverá loco?
Si no... me pongo a ello en cuanto me des vía libre :D
GRACIAS!
No debería haber problemas, Maite. Aunque hacen cosas similares, como las funciones se llaman diferentes, no interferirán entre si. Yo uso ambos sin problemas.
Me gustaría probar a hacer esto, pero, entre otras cosas, en "Sidebar Content" no encuentro .sidebar h2. Por otro lado, entiendo que los códigos de la "tablaArchivos" hay que escribirlos en el widget recién creado. Asimismo, supongo que puede utilizarse la misma imagen para expadir y contraer. Por último: ¿en lugar de Archivos, donde esta palabra se lee puede ponerse otra cosa?
Primero, verifica que los títulos de la sidebar estén en esa etiqueta; suelen decir esto:
<h2 class='title'><data:title/></h2>
pero podría ser otra como H3, por ejemplo. Si pudiera ver tu blog te lo diría.
Si la definición no está en el estilo, se puede agregar.
Sí, exacto, el código de la tabla va en el elemento creado.
También puede usarse la misma imagen y no cambiarla, no hay problema y los textos también puedes cambairlos por cualqueir otro.
Gracias, JMiur.
Sigo sin encontrar el elemento. La dirección de mi blog es:
http://porelcaminodelaletra.blogspot.com.
Por lo que veo, los títulos de la sidebar están en etiquetas H2
<h2><data:title/></h2>
y no tiene definiciones CSS así que si en necesario, puedes agregarla:
.sidebar h2 {
..................
}
Gracias, JMiur.
Ya. Ahora el problema, para mí, sería darle esas definiciones, teniendo en cuenta que no tengo mucha idea.
En principio, toda esa parte del CSS es sólo gráfica así que podrías intentar ignorarla hasta lograr que funcione.
Gracias!!!! lo haré entonces.
Hola JMiur de vuelta!, tengo una duda, a mi solamente m aparece el título "Archivos" y las pequeñas imágenes al lado. Y cuando hago clic en la "imagen expandir", aparece la otra "imagen cerrar" y así sucesivamente, pero sin resultado alguno. Ese widget está vacío, que anteriormente se llamaba "Archivos ON/OFF", hay que colocarle un script para que se ejecute y aparezcan las entradas? Cuál es?
Cristian:
Lo que has hecho funciona perfectamente, l oque ocurre es que no logras verlo ya que un elemento, ese conde esta la imagen de expandir/contraer está en la parte superior de la sidebar y, el elemento Archivos que es el que sespliega y contrae, está mucho más abajo.
Simplemente mueve el eleemnto archivos para que esté debajo. Uno debe quedar debajo del otro para que puedas verlo sin dificultad.
SIIIIIIIIIIIIIIIIIII!!!!!! :) :) :) :) Muchisimas gracias!! Me anduvo perfectamente!!! sos un genio.. no se como agradecerte. Realmente me molestaba mucho como se alargaba cada vez más ese elemento. Ahora lo tengo resuelto, gracias a vos. Muchas gracias ! Me encanta este blog y más este tipo de ayudas. Sigue asi! ;)
Me alegro que sirviera. Lo habías hecho perfectamente bien, sólo faltaba ese detalle de ubicación :D
Juan:
En http://porelcaminodelaletra.blogspot.com/ los veo aparecer contraidos. Ahora bien, el script hace que se contraigan de entrada una vez que se ejecuta, es decir, hay un tiempo incial en que aparecen desplegados pero ese tiempo es mínimo. Si hay un problema de conexión o tarda un poco, los verás desplegados y luego se contraerán. No lo he notado pero, es posible.
Lo que has hecho está bien, no veo errores ¿Puedes confirmarme el problema?
Vaya, venía a darte de nuevo las gracias. Por eso borré el anterior comentario. No se contraía después de un tiempo, como dices. Sin embargo, recordé lo que publicaste sobre bloques animados, que ya había probado, pero no funcionó por causa de los enlaces (tenía el animatedcollapsed alojado en SkyDrive y no conseguía dar con la url), y lo que tengo ahora funciona perfectamente y casi que me seduce más, aunque usar dos imágenes distintas tiene su encanto. He dejado una de ellas para que los lectores anónimos que visitan mi blog no se despisten.
Saludos desde Madrid y buena Navidad, si es que no me dejo caer antes por aquí, porque es un placer y se aprende mucho.
No hay problema, Juan :D
Feliz Navidad para ti también.
Y para hacer lo mismo con otro elemento (en mi caso id='Subscribe1' -Enlaces de suscripción-), ¿sería muy diferente?
No. Sería exactamente el mismo procedimiento excepto que debes utilizar los IDs correspondientes, en tu caso Suscribe1.
Pues... lo he probado dos veces con los dos elementos (BlogArchive1 y Subscribe1), borrando los cambios de cada prueba para hacer la siguiente, y sólo me ha funcionado con los Archivos.
¿Hay algún otro modo de conseguir algo parecido con este tipo de elementos de Blogger? (Con "elementos de Blogger" me refiero a gadgets; que no se ofenda nadie :D)...
Tendría que ver el ejemplo en tu blog, aunque no funcionara. El procedimiento es el mismo para cualquier otro elemento y sólo deben cambairse los nombres de los IDs y tener una función para cada uno de ellos.
Ya lei todo, pero no entendi donde tengo que poner este codigo. Soy un poco lento :S
En que parte lo coloco???
<table id="tablaArchivos" cellspacing="0" cellpadding="0">
<tr>
<td valign="middle">ARCHIVOS</td>
<td align="center" valign="middle" >
<a href="javascript:void(0);" onclick="masmenosArchivos();" title="Expandir/Contraer archivos">
<img id='manejaArchivos' src='URL_imagenContraido' />
</a>
</td>
</tr>
</table>
Saludos como siempre JMiur, ya me volvi adicto a tu blog. :D
Esa tabla la colocas en un elemento HTML nuevo que creas y colocas justo encima del elemento Archivos. Desde ese elemento HTML, ocultarás y mostrarás el de archios que estará abajo.
Ok gracias JMiur, Saludos :D
Ya me quedo JMiur ahora voy a intentar hacerlo con las etiquetas.
Las variables que tendria que modificar. ¿serian estas?
*BlogArchive1
*id="tablaArchivos"
*id='manejaArchivos'
*masmenosArchivos()
¿le puedo agregar una funcion mas al script? o tengo que hacer otro script?
archivosIMG = new Array()
¿si uso el mismo script dejo el mismo arreglo verdad?
Pregunto esto pq quiero estar seguro, buen dia men... :D
Si. Debes cambiar los IDs, usar la misma imagen y lo más sencillo es copia el script y hacer otro con otro nombre tipo masmenosEtiquetas.
Hola, una pregunta.
Yo quiero armar un fixture de un torneo de futbol. La idea es agregar el gadget LISTA o TEXTO y con este armo la lista de todos los partidos. Lo que quiero saber si se puede es apretar en cada partido y que se expanda la informacion del mismo. adjunto una imagen por si no se entiende bien
http://i486.photobucket.com/albums/rr224/montefc/prueba.jpg
muchas gracias, saludos
No. Para eso debes usar un elemento HTML y allí, colocar el código.
Ahi estuve averiguando y ya lo logre hacer con HTML, la verdad no entiendo nada de esto.
Muchas gracias por la rapida repsuesta
Hola JMiur, aprovechando este post, quería consultarte si es posible hacer lo mismo con toda la columna lateral del blog o con los que uno elija.
Desde ya muchas gracias tanto por tu respuesta como por lo mucho que vengo usando de tus entradas y explicaciones!!!!
Saludos!!!
Sí, Susana. Fíjate en este post.
Hola JMiur.
¿crees que podría esconderse -como las pelusas bajo la moqueta ;) - el módulo de seguidores de forma similar a la de los archivos?
Sería una solución perfecta, pero me temo que no se podrá... al no ser una jerarquía o una lista tipo etiquetas o archivos...
Un saludo
En teoría debería poder hacerse. No lo he probado pero me imagino que es posible hacerlo.
Tiraremos de la teoría...y trastearé un rato en el blog de pruebas que me temo que la liaré y bien :S
Un saludo y mil gracias JMiur
Fíjate si logras algo y cualquier cosa me avisas. Veré si me hago algo de tiempo par hacer alguna prueba en alguna parte :)
gracias ,graciasss, me ha quedado perfecto tengo que confesar que he copiado tu imagen de contraer y expandir ,si te molesta la quito de todas modos buscare otras por ahi unn abrazo maestro
Hola, llevo toda la tarde probando y para variar la estoy pifiando. Se me ocurren dos explicaciones fáciles, una que este colocando el table id donde no es (lo estoy poniendo justo donde estoy quitando el titulo (la parte roja que tienes marcada arriba))y dos una cuestión de nombres porque yo lo que quiero contraer son CATEGORÍAS no archivos, aunque he probado también a cambiar donde tu pones archivos poner categorías y sigue igual. Lo tercero que se me ocurre es que cuando coloco el script lo haga mal, lo estoy poniendo entre (/b:skin
/head). ¿puede ser alguna de estas tres cosas?, y otra cuestión como hago para darle después los dos colores como al resto de los títulos de la sidebar, vuelvo a poner ((h2 CATEG span)ORIAS /span)/h2 ))???
Soy bruta lo he pensado, lo tengo que colocar en el elemento html no en la plantilla verdad????, he sido bruta de nuevo, siempre hay una explicación mas fácil, de todas formas influye lo de los terminos que uso??? categorias y no archivos???
Veamos. En tu blog faltaría el script. En el este ejmplo, se habla de los archivos que es el elemento BlogArchive1. Si quieres que sea el elemento etiquetas que en tu blog tiene por título CATEGORIAS, el elemento es el Label1.
Este script haría que ese elemento se ocultara y desplegara:
<script type='text/javascript'>
// <![CDATA[
function masmenosArchivos() {
if(document.getElementById('Label1').style.display== "block") {
document.getElementById('Label1').style.display="none";
} else {
document.getElementById('Label1').style.display="block";
}
}
// ]]>
</script>
Vale, osea que entiendo que tengo que hacer todo igual que en el ejemplo pero con label1 y este script, no??
He conseguido que funcione pero solo a medias, porque consigo el efecto contrario parte de estar estirado a contraerse solo si presionas la flecha ¿alguna idea de que hago mal?, y no se donde cambiar los colores de las letras para que sean igual que el resto desde el propio elemento html lo he intentado y tampoco lo coge.
Perfecto. Ahora, si quieres que aparezca oculto de entrada, agrega lo siguiente en la parte del CSS de la plantilla:
#Label1 {display:none;}
Eso, lo ocultará cuando se cargue el sitio.
Is Perfect, ahora solo me queda igualar colores que no atino.
Muy buenas;
Primero decir que estas ayudas son lo mas interesante que he visto al respecto por internet, una pagina excepcional con grandes ayudas para los profanos como yo que no tienen mas que trabajo, lectura y mas trabajo por delante antes de ver como van tomando forma sus proyectos. No se puede decir mas que GRACIAS por este lugar donde, al menos, tenemos todo al alcance de la mano aunque a veces no sea suficiente XD
El tema en cuestion (en esta ^^) es que llevo horas y horas liado con lo que explicas y no doy con mi error... quiza sea que ya he llegado a ese punto en el que te obcecas y los arboles no te dejan ver el bosque... vamos ni idea; solo he conseguido hacer desaparecer las listas de archivos y que quede un hueco en negro... asi pues solicitaba tu ayuda en ello a ver si debo prenderle fuego al blog o solo meter tijera.
Ten en cuenta que llevo dos dias en esto y no entiendo de codigos ni cosas asi ni la o con un canuto asi que, paciencia, por favor XD
El blog es: http:\\arcoonte.blogspot.com
Muchiiiiisimas gracias.
Hasta acá parece ir bien. Lo que parece faltarte es colocar el código en el elemento HTML5 que es el que has creado y que está arriba de los archivos. Al parecer, no tiene nada dentro.
Debes colocarle la primea parte:
<table id="tablaArchivos" cellspacing="0" cellpadding="0">
.............
<a href="javascript:void(0);" onclick="masmenosArchivos();" title="Expandir/Contraer archivos">
<img id='manejaArchivos' src='URL_imagenContraido' />
</a>
.............
</table>
Hecho eso, verás la imagen de exandir/contraer y, por lo que vi, debería funcionar porque el resto está bien.
Sólo te falta ese detalle, el enlace que active todo.
UFF!
Ya estaba escribiendo otra parrafada buscando como un loco la solucion sin verla. Tenia copiada la tablilla esa en todos lados, dentro del widget nuevo, dentro de todos los html5 posibles y ya estaba otra vez con la cabeza loca hasta que, revisando los expandidos, me he dado cuenta que en el nuevo widget (expandido) no estaba la tabla... asi que ale, a copiar!! XD
Y tras eso ale... hop!!
Muchas gracias por la ayuda, ahora solo queda maquearla un poco jejeje
Sin duda tienes la mejor pagina-blog-web de ayuda en estas lides, un placer poder aprender aqui ;)
Nos vemos!
Es como decías, uno de esos errores que están ahi delante y que no podemos ver :D Nos pasa a todos :D
Buenas "again", ya estoy aqui denuevo pero vamos, es una cosa mas que simple. Resulta que el boton de "contraer/expandir" me queda muy pegado a las letras y no tengo ni idea de como separarlo. He intentado alinearlo a un lateral pero se conoce que el texto ya ocupa casi todo no tiene espacio suficiente para dejar un poco mas de margen. Alguna idea? Gracias nuevamente.
No sé si es el botón que está dentro del widget de archivos. Si es ese, hay muchas formas.
puedes variar el cellspacing de la tabla, colocando un valor distinto de cero
puedes tarde un ancho a la celda del borón con width="25px" o cualquier otro número
puedes agregarle style="margin-left:10px" a la etiqueta IMG del botón
Si el ancho es escaso, disminuye el tamaño de la fuente del texto.
Gracias, perfecto ^^
Ya estoy en ello y va genial ;)
Hola JMiur
Hice todo el procedimiento como indicas en el tutorial, pero ahora no puedo vizualizar los "archivos de temas", el blog funciona sin eso, pero me interesa terminarlo bien...
Me falta la imagen, de donde la saco, y eso de los atributos del css como que no se me da; que debo de poner en el elemento ARCHIVOS ON/OFF, lo que está en color azul y amarillo del código, ahí no entiendo mucho.
Te agradezco si me puedes ayudar con esto...
Saludos desde México.
Ever Torres
¿A qué llamas Archivos de Temas? La imagen puede ser cualquiera, a tu gusto. Lo que está en amarillo es justamente la dirección de esas imágenes que debes alojar en alguna parte o en Blogger mismo.
No puedo agregar mucho más porque no puedo ver tu ejemplo
Me gustan los menus desplegables de wikipedia, pero no lo admite Blogger. Hay muchos efectos que ni Multiply ni blogger admite. Saludos:Juan
En Blogegr no hay limitaciones en cuanto a agregar scripts así que, seguramente es posible aunque desconozco cuales son.
Hola JMiur, en referencia a la pregunta que te hice, que aparece con el No. 85, te comento lo siguiente, tengo los links de las imagenes, y los coloco dentro del código donde viene señalado con amarillo, pero sigue sin aparecer la imagen...lo esos links de las imagenes los tengo que poner en el elemento que dice ARCHIVOS ON/OFF o donde más lo inserto...
Respecto de a que me refiero con Archivos de Temas, es que así lo nombre, en lugar de Archivos de Blog...
Si le puedes echar un vistazo a al blog porfavor, haber que esto haciendo mal, dado que solo aparece una X, despliega y cierra los archivos, pero la imagen no aparece...
http://nullumtribute.blogspot.com
Gracias por tus comentarios...
Saludos desde México.
Ever Torres.
pd: No te había comentado antes, porque le estuve haciendo primero el intento de arreglar según tus indicaciones pero no me dio resultado, no se si quieras que te envíe el código para que veas como está o como le haría para que lo vieras...
Ever Torres:
OK. Viéndolo ya es más fácil entender el problema. Es muy simple de resolver ya que se trata de un error en las URLs de las os imágenes; no estás colocando el enlace directo a ellas sino el enlace a la página de ImageShack y por eso, no ves nada.
Cambai esta URL:
http://img522.imageshack.us/i/barraa.jpg/
por esta otra:
http://img522.imageshack.us/img522/1429/barraa.jpg
y esta URL:
http://img692.imageshack.us/i/cerrartemas.jpg/
por esta otra:
http://img692.imageshack.us/img692/4472/cerrartemas.jpg
Con eso las verás y el script funcionará sin problemas.
Hola JMiur,
De nuevo solicitando tu apoyo...hice como me digiste pero sigo sin poder visualizar nada, antes se veía solo una X en IE, aunque con firefox no se venía nada, pero con los cambios ya tampoco se ve en IE...lo de menos es volver al estado original eliminando los cambios, pero me gustaría salir con esto, a propósito, como hacer para que se vea bien en ambos browsers.
Otro problema que se me presenta es con el formato para que los visitantes dejen sus comentarios en el blog, no me aparece el formato, ya hice como dice en este artículo tuyo...pero nada de nada, de hecho encontré casi todo lo que ahí se menciona, aun así, no se visualiza.
http://vagabundia.blogspot.com/2008/06/solucin-para-algunos-problemas-al.html
el blog es: http://nullumtribute.blogspot.com
Cuando tengas oportunidad, hay te pido otra ayudadita, si fuera posible con algo más concreto, aunque creo que no estoy interpretando bien los códigos...
Saludos desde México.
Ever Torres.
Lo concreto es lo que te dije en el comentario anterior. Las dos imágenes tiene URLs erróneas y mientras no cambies eso, jamás las verás. Es simple de comprobar, coloca las direcciones en el navegdor y te darás cuenta que unas te llevan a la página de ImageShack y las otras a la imagen en si misma.
No sé l oque has hecho pero ahora, el elemento HTML5 que es donde estaba el enlace para abrir, no tiene contenido así que seguramente lo has borrado o algo similar ya que en el código fuente no se ve nada en absoluto.
Repito otra vez; las direcciones URL de ambas ímagenes son erróneas: no son imágenes, son las direcciones de dos páginas webs. Las direcciones de las imágenes son las que te di y son las que pueden verse en el enlace que dice Link to Share this Image | Direct de ImageShack.
Hola Amigos e notado que algunos tienen promeblas para encontrar, pues una forma practica de encontrar algo en el html para quienes no lo saben, es oprimiendo la tecla F1, te sandra un cuadro de busqueda en la parte baja del navegador.
Saludos y gracias.
Potencializa Tu Negocio:
Eso, depende del navegador que uses :D
(¬¬ había escrito un mensaje antes de este y no lo envio.. Dio error :( que coñazo)
En fin..
PERFECTT. Terminado!!
Grazie JMiur, magnifica entrada..
La única pega fue que, la imagen de la flechita queda totalmente "al lado", pegada de las letras (archivos).. Intente ponerle un espacio con: & nbsp pero lo ignora y con "br" es salto de renglón.. =S
Lo que se me ocurrió fue editar la imagen, y ponerle un margen del lado izquierdo "transparente" para así simular ese espacio..
Pero bueno ya será luego y eso si no encuentro otro modo..
Un saludo..
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
Nota: sólo los miembros de este blog pueden publicar comentarios.
Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.
Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...