JMiur [E]

¿Existe alguna manera para que el elemento "Archivos" se vea como lo tienes tú? es una pregunta que me hicieron por lo menos tres veces en una semana y que espero poder contestar.

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.


Ahora agregamos un elemento HTML al que también le damos un título y algún contenido (una palabra, lo que sea) para que nos permita guardarlo. Lo ubicamos entonces, encima del anterior.


Si miramos el blog ... no veremos mucho.


Vamos entonces a la Edición HTML de la plantilla y si no expandimos los artilugios, nos mostrará este código:
<b:widget id='HTMLX' locked='false' title='ARCHIVOS ON/OFF' type='HTML'/>
<b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'/>
donde HTMLX variará según la cantidad de elementos que tengamos agregados. Ahora, expandimos los artilugios para ver el código completo y vamos a buscar el elemento HTML (para eso le pusimos un título). Nos mostrará esto y allí, sin que nos tiemble la mano, eliminaremos todo lo que está en rojo:
<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>
Si ahora usáramos la Vista Previa no lo veríamos ya que le hemos quitado el código que mostraba el título y el contenido.

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>
La tabla tiene un ID (tablaArchivos) que es el que luego usaremos para darle las propiedades CSS. En la primera celda (TD) está el título y en la segunda, un enlace que también tiene un ID (manejaArchivos) que es el que ejecutará el script para expandir y contraer el elemento Archivos.

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;
}
Y necesitamos el script así que antes de </head> colocamos:
<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>
Lo que hará ese script es verificar el estado del elemento Archivos; si está oculto, lo mostrará y viceversa. Al mismo tiempo, cambiará la imagen de fondo que usamos en el enlace.

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.


Cuando agregamos ese elemento en la plantilla el código siempre es el mismo sin importar las opciones que elijamos. Es uno de los más engorrosos de entender y uno de los más largos pero esto no es problema porque no es necesario hacerle modificaciones sofisticadas:
<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'>
.......
Otra vez, eliminamos lo que está en rojo que es el código que muestra el título.

Eventualmente, si quisiéramos, podríamos agregar un ícono similar en este elemento, de tal manera de poder cerrarlo desde ahí (algo útil si la lista es larga). Para eso, buscamos lo siguiente:
<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>
Allí agregamos lo marcado en color, un código similar al que usamos antes y y usamos el ID (tablaCerrarArchivos) para darle el diseño gráfico que nos guste.

94 comentarios:

Anónimo  

Gracias JMiur
Ya lo estoy probando.

Un saludo

Responder
Anónimo  

(Gracias)

Responder
Fender Stratokaster  

Me habría convertido en la cuarta persona en preguntarte lo mismo. Gracias.

Salud!

Responder
La Blogueria  

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!

Responder
Anónimo  

no, a mí no me salio.
aparece solo la palabra archivos, y no hay manera de desplegar.

:O

Gracias igual.

Responder
JMiur  

En realidad es bastante sencillo y sí, el fondo puede modificarse de esa manera.

Responder
Anónimo  

¿Un poco lío no? Yo prefiero poner una lista con los 5 últimos posts.

Responder
Bavarovich  

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!

Responder
JMiur  

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.

Responder
Anónimo  

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!

Responder
JMiur  

No creo poder explicarlo, tal vez te sirva el artículo de la Wikipedia

Responder
Anónimo  

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

Responder
JMiur  

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.

Responder
Anónimo  

gracias pero me ha pasado lo mismo que a monja.


ya volvi a hacer todo el proceso y me aparece lo mismo =(

Responder
JMiur  

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.

Responder
Anónimo  

No me aparece: Archivos del blog,solo me aparece Archivos on/off . Te dejo esta imagen para que veas.

Imagen

Responder
JMiur  

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

Responder
Mr. Prado  

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.

Responder
Anónimo  

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.

Responder
JMiur  

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

Responder
Anónimo  

Pues efectivamente era eso jeje, gracias de nuevo JMiur, ahora funciona a la perfección.

Saludos!!

Responder
Shark_Bloody  

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

Responder
JMiur  

No veo el elemtno Archivos en el blog de pruebas, ni ninguna otra parte de lo dicho acá.

Responder
Anónimo  

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!

Responder
JMiur  

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

Responder
Anónimo  

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!

Responder
JMiur  

Perfecto, Maite, me alegra que lo resolvieras.

Responder
Anónimo  

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

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

Responder
JMiur  

Perfecto Maite :D

Responder
Maite  

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

Responder
JMiur  

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.

Responder
Maite  

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!

Responder
JMiur  

No estoy seguro de lo que quieres hacer, Maite ¿Un índice como una paginación?

Responder
Maite  

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!

Responder
JMiur  

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.

Responder
Juan Carlos López  

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?

Responder
JMiur  

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.

Responder
Juan Carlos López  

Gracias, JMiur.

Sigo sin encontrar el elemento. La dirección de mi blog es:

http://porelcaminodelaletra.blogspot.com.

Responder
JMiur  

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

Responder
Juan Carlos López  

Gracias, JMiur.

Ya. Ahora el problema, para mí, sería darle esas definiciones, teniendo en cuenta que no tengo mucha idea.

Responder
JMiur  

En principio, toda esa parte del CSS es sólo gráfica así que podrías intentar ignorarla hasta lograr que funcione.

Responder
Maite  

Gracias!!!! lo haré entonces.

Responder
Anónimo  

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?

Responder
JMiur  

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.

Responder
Prof. Cristian E. Moyano  

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! ;)

Responder
JMiur  

Me alegro que sirviera. Lo habías hecho perfectamente bien, sólo faltaba ese detalle de ubicación :D

Responder
JMiur  

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?

Responder
Juan Carlos López  

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.

Responder
JMiur  

No hay problema, Juan :D
Feliz Navidad para ti también.

Responder
Anónimo  

Y para hacer lo mismo con otro elemento (en mi caso id='Subscribe1' -Enlaces de suscripción-), ¿sería muy diferente?

Responder
JMiur  

No. Sería exactamente el mismo procedimiento excepto que debes utilizar los IDs correspondientes, en tu caso Suscribe1.

Responder
Anónimo  

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

Responder
JMiur  

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.

Responder
Usuario10  

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

Responder
JMiur  

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.

Responder
Usuario10  

Ok gracias JMiur, Saludos :D

Responder
Usuario10  

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

Responder
JMiur  

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.

Responder
etche  

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

Responder
JMiur  

No. Para eso debes usar un elemento HTML y allí, colocar el código.

Responder
etche  

Ahi estuve averiguando y ya lo logre hacer con HTML, la verdad no entiendo nada de esto.
Muchas gracias por la rapida repsuesta

Responder
susana espíndola  

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

Responder
JMiur  

Sí, Susana. Fíjate en este post.

Responder
Anónimo  

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

Responder
JMiur  

En teoría debería poder hacerse. No lo he probado pero me imagino que es posible hacerlo.

Responder
Anónimo  

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

Responder
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 :)

Responder
atajar  

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

Responder
EM2.0  

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

Responder
EM2.0  

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

Responder
JMiur  

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>

Responder
EM2.0  

Vale, osea que entiendo que tengo que hacer todo igual que en el ejemplo pero con label1 y este script, no??

Responder
EM2.0  

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.

Responder
JMiur  

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.

Responder
EM2.0  

Is Perfect, ahora solo me queda igualar colores que no atino.

Responder
El_Predicador_YO  

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.

Responder
JMiur  

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.

Responder
El_Predicador_YO  

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!

Responder
JMiur  

Es como decías, uno de esos errores que están ahi delante y que no podemos ver :D Nos pasa a todos :D

Responder
El_Predicador_YO  

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.

Responder
JMiur  

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.

Responder
El_Predicador_YO  

Gracias, perfecto ^^

Ya estoy en ello y va genial ;)

Responder
Everardo Torres V.  

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

Responder
JMiur  

¿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

Responder
Juan y Juana  

Me gustan los menus desplegables de wikipedia, pero no lo admite Blogger. Hay muchos efectos que ni Multiply ni blogger admite. Saludos:Juan

Responder
JMiur  

En Blogegr no hay limitaciones en cuanto a agregar scripts así que, seguramente es posible aunque desconozco cuales son.

Responder
Everardo Torres V.  

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

Responder
JMiur  

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.

Responder
Everardo Torres V.  

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.

Responder
JMiur  

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.

Responder
Potencializa Tu Negocio  

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.

Responder
JMiur  

Potencializa Tu Negocio:
Eso, depende del navegador que uses :D

Responder
Puzzle  

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

Responder

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

 
CERRAR