53

Archivos y Feed (expandir y contraer)

Hace tiempo explicaba como aplicar al gadget de "Etiquetas" un script para mostrarlas con la posibilidad de expandir y contraer desde su título dicho gadget.

Algunas personas me han consultado sobre la posibilidad de hacer lo mismo con el gadget de "Archivos" y "Feed" voy a explicar como hacerlo ya que, aunque el sistema es exactamente el mismo, será más fácil de aplicar con la explicación para el gadget concreto.

Gadget de Archivos



[1] En la parte de "Diseño HTML" de nuestro panel, sin expandir las plantillas de artilugios, localizamos la línea que corresponde al Gadget de "Archivos":
<b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'/>
[2] Sustituimos esa línea por todo este código:

<b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'>
<b:includable id='main'>
<script type='text/javascript'>
//<![CDATA[
if(typeof(rnd) == 'undefined') var rnd = '';
rnd = Math.floor(Math.random()*1000);
rnd = 'id-' + rnd;
document.write('<a href="#" onclick="tmp = document.getElementById(&quot;' + rnd + '&quot;); tmp.style.display = (tmp.style.display == &quot;none&quot;) ? &quot;block&quot; : &quot;none&quot;; return false;" style="float:left;margin-right:5px;">');
//]]>
</script>[+/-]
<script type='text/javascript'>
//<![CDATA[
document.write('<\/a>');
//]]>
</script>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>
<script type='text/javascript'>
//<![CDATA[
document.write('<div id="' + rnd + '" style="display:none;">');
//]]>
</script>
  <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>
<script type='text/javascript'>
//<![CDATA[
document.write('<\/div>');
//]]>
</script>
  <b:include name='quickedit'/>
  </div>
</b:includable>
<b:includable id='flat' var='data'>
  <ul>
    <b:loop values='data:data' var='i'>
      <li class='archivedate'>
        <a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
      </li>
    </b:loop>
  </ul>
</b:includable>
<b:includable id='menu' var='data'>
  <select expr:id='data:widget.instanceId + &quot;_ArchiveMenu&quot;'>
    <option value=''><data:title/></option>
    <b:loop values='data:data' var='i'>
      <option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
    </b:loop>
  </select>
</b:includable>
<b:includable id='interval' var='intervalData'>
  <b:loop values='data:intervalData' var='i'>
      <ul>
        <li expr:class='&quot;archivedate &quot; + data:i.expclass'>
          <b:include data='i' name='toggle'/>
          <a class='post-count-link' expr:href='data:i.url'><data:i.name/></a>
            <span class='post-count' dir='ltr'>(<data:i.post-count/>)</span>
          <b:if cond='data:i.data'>
            <b:include data='i.data' name='interval'/>
          </b:if>
          <b:if cond='data:i.posts'>
            <b:include data='i.posts' name='posts'/>
          </b:if>
        </li>
      </ul>
  </b:loop>
</b:includable>
<b:includable id='toggle' var='interval'>
  <b:if cond='data:interval.toggleId'>
  <b:if cond='data:interval.expclass == &quot;expanded&quot;'>
    <a class='toggle' expr:href='data:widget.actionUrl + &quot;&amp;action=toggle&quot; +       &quot;&amp;dir=close&amp;toggle=&quot; + data:interval.toggleId +       &quot;&amp;toggleopen=&quot; + data:toggleopen'>
        <span class='zippy toggle-open'>&#9660; </span>
    </a>
  <b:else/>
    <a class='toggle' expr:href='data:widget.actionUrl + &quot;&amp;action=toggle&quot; +         &quot;&amp;dir=open&amp;toggle=&quot; + data:interval.toggleId +         &quot;&amp;toggleopen=&quot; + data:toggleopen'>
          <span class='zippy'>
            <b:if cond='data:blog.languageDirection == &quot;rtl&quot;'>
              &#9668;
            <b:else/>
              &#9658;
            </b:if>
          </span>
    </a>
  </b:if>
 </b:if>
</b:includable>
<b:includable id='posts' var='posts'>
  <ul class='posts'>
    <b:loop values='data:posts' var='i'>
      <li><a expr:href='data:i.url'><data:i.title/></a></li>
    </b:loop>
  </ul>
</b:includable>
</b:widget>
Notas:
Los archivos se mostraran como en el ejemplo de la imagen de arriba, es decir, el gadget con la opción "Jerarquía" en un principio, pero usar la opción "Lista" e incluso la de "Menú desplegable"  no supondrá ningún problema; podremos cambiar de una opción a otra desde "Editar" del mismo Gadget sin que este pierda la función de expandir y contraer.


Gadget Feed

[1] Localizamos la línea correspondiente al Gadget del Feed que será algo así:

<b:widget id='Feed1' locked='false' title='El Escaparate (Ayuda para tu blog)' type='Feed'>

[2] Sustituimos esa linea por este código:

<b:widget id='Feed1' locked='false' title='El Escaparate (Ayuda para tu blog)' type='Feed'>
<b:includable id='main'>
<script type='text/javascript'>
//<![CDATA[
if(typeof(rnd) == 'undefined') var rnd = '';
rnd = Math.floor(Math.random()*1000);
rnd = 'id-' + rnd;
document.write('<a href="#" onclick="tmp = document.getElementById(&quot;' + rnd + '&quot;); tmp.style.display = (tmp.style.display == &quot;none&quot;) ? &quot;block&quot; : &quot;none&quot;; return false;" style="float:left;margin-right:5px;">');
//]]>
</script>[+/-]
<script type='text/javascript'>
//<![CDATA[
document.write('<\/a>');
//]]>
</script>
    <h2><data:title/></h2>
    <div class='widget-content'>
<script type='text/javascript'>
//<![CDATA[
document.write('<div id="' + rnd + '" style="display:none;">');
//]]>
</script>
    <ul expr:id='data:widget.instanceId + &quot;_feedItemListDisplay&quot;'>
      <b:loop values='data:feedData.items' var='i'>
        <li>
          <span class='item-title'>
            <a expr:href='data:i.alternate.href'>
              <data:i.title/>
            </a>
          </span>
          <b:if cond='data:showItemDate'>
            <b:if cond='data:i.str_published != &quot;&quot;'>
              <span class='item-date'>
                &#160;-&#160;<data:i.str_published/>
              </span>
            </b:if>
          </b:if>
          <b:if cond='data:showItemAuthor'>
            <b:if cond='data:i.author != &quot;&quot;'>
              <span class='item-author'>
                &#160;-&#160;<data:i.author/>
              </span>
            </b:if>
          </b:if>
        </li>
      </b:loop>
    </ul>
<script type='text/javascript'>
//<![CDATA[
document.write('<\/div>');
//]]>
</script>
    <b:include name='quickedit'/>
    </div>
  </b:includable>
</b:widget>

Entradas Relacionadas:

53 comentarios:


Sole

Hola Rosa, antes de nada feliciatarte por tu blog, me es de mucha ayuda y si me visitas verás que te he copiado un montón de ideas, pero se me resisten dos en cuanto a su funcionamiento,la nube de etiquetas en movimiento y texto para suscribirse. Al pinchar sobre ellos aparece "no se encuentra el blog que busca". Espero que mi consulta no sea demasiado molesta.
Gracias
Mi blog es : http://solete1975.blogspot.com/

Rubí

Hola Rosa, algo le sucede a tu blog, bueno espero que sea mi compu y no tu blog el que trae problemas. Lo que noté es lo siguiente: El nombre de la persona que opina no se ve completo, y sale una x en vez de la imagen del autor. También noté que al darle clic a algun comentario de los recientes no me lleva al post que debe o por lo menos no aparece el comentario de la persona que lo hizo.

Un beso!

Anónimo

¡¡Hola!! ¡¡si ke si!! me sirvio a la perfección y es lo que queria, ¡je je! ¡muchas gracias! de verdad estoy ¡muy agradecido!

Le dejo muchos saludos y buenos deseos. ¡felices fiestas!

¡Adiós!

Anónimo

LeonardoMC, me alegro!
Por cierto, me gusta tu cabecera;)

Anónimo

Rubí, los feed de los comentarios de Blogger están dando problemas, no se que estarán haciendo o probando, pero así es...los comentarios que salen son antiguos además.
En cuanto a las imágenes, creo que ya está arreglado ¿no? las he cambiado de alojamiento...

Gracias por molestarte en decirmelo cielete:-L

Rubí

Rosa me cambié ahora al firefox para probar pensé que era el navegador IE, ya se ve bien el nombre pero no sale la imagen del autor.

Anónimo

Sole, a mi tus etiquetas me funcionan perfectamente:O

Lo del suscribirse, es que lo has copiado tal cual sin poner tus datos...
Quizás te interese <a href="http://Tu_blog.blogspot.com/feeds/posts/default">subscribirte a mi blog</a> o recibir las<a href="URL_DE_SUSCRIPCION_POR_EMAIL"> actualizaciones por email.</a>

Lo que ves en negrita es donde has de colocar tus datos, en el primero la dire de tu blog y en el segundo la dire del servicio que uses para la suscripción por correo.

Anónimo

Rubí,es cierto...jo, hace un minuto se veían...no lo entiendo :O lo que si tengo claro es que las imágenes no son el problema...miraré a ver...:/

Rubí

En IE se ve la tachita y el nombre del autor movido hacia abajo, en firefox veo el nombre bien alineado yno se ve la tachita pero tampoco la imagen.

LeonardoMC

Usen Firefox, neveguen más rapido y más seguro con Firefox... Saludos a todos! Gracias por el comentario de la cabecera de mi blog.

Anónimo

Rubí, lo he dejado en la forma original y deberían verse los iconos de Blogger, pero resulta que tampoco se ven:O

Rubí

Ya se siente el escaparate otra vez, aunque no se ven las imágenes...pero ya se ve bien! estoy segura que lograrás poner las imágenes de nuevo, eres un astro en esto de los bloggers.

JBfansblog

Claro,claro....ese si lo sé...pero del que yo hablo es del widget que vos enseñás a hacer en un post...creo que es el que estás usando...

Porque lo que pasa es que a mi me queda como en el jemplo que vos pusiste en una imágen...pero yo quiero que me quede como el que estás usando vos...me explicás como hiciste tu "Archivo del blog"?

Ese es el que quieroe n mi blog...el que tas usando vos. =P!

Anónimo

JBfansblog , mi widget de Archivos es el que Blogger proporciona con la opción "Jerarquía" luego solo he añadido la barra de scroll...

http://elescaparatederosa.blogspot.com/2007/10/scrollbars-en-cualquier-parte-del-blog.html

Andybel

.-ROSA: Aplico el código pero surge un problema:

EL [+/-] SALE JUSTO AL LADO DEL HEADER "ARCHIVO DEL BLOG" CON LO QUE LO DESPLAZA Y ENTONCES ÉSTE DESENTONA DEL RESTO DE HEADERS DE LA SIDEBAR.

.-¿Cómo lo arreglo?

.-ENLACE A MI BLOG: Cosas y Casos.

.-Saludos, gracias anticipadas y Feliz Navidad.

Anónimo

Andybel, en ese caso creo que estaría bien que el [+/-] saliese a la derecha del título ¿no crees?

Localiza en el código del widget (con los artilugios expandidos) esta línea, está un poco más arriba que el [+/-]:

style="float:left;margin-right:5px;">');

Y cambiala así:

style="float:right;margin-left:5px;">')

Como ves, cambiamos el float (flotación) a la derecha (right) y la separación del símbolo que la ponemos a la izda, son 5px de distancia entre el título y el símbolo, que puedes aumentar o reducir a tu gusto. :D

Ana B.

:-) Como siempre, perfecto !! Como todo lo que tu recomiendas y lo que nos enseñas. Un millón de gracias Rosa.
Besitos

Unknown

Hola Rosi!!!!!!! eres un amor :-L
Gracias me resultó genial!!!!!!!!! :D

besotes y un abrazo!!!!!!
que tengas un lindo fin de semana prrrrrrrrr :D

Anónimo

hola mi Rosi, espero estés disfrutando del frío!!! jijiji...yo te cambio por unos días del calorón de aquí!!! que dicen que el verano europeo es diferente. Algo que he notado en mi blog, bueno primero no funcionaba publicar comentarios, luego si...y la cantidad de enlaces???!!!...y sin pincho en uno me lleva a blogs que no han enlazado la entrada, solo blogs!!!...será una nueva forma de hacerse propaganda...tienes mis besos, con ésta temperatura no logro concentrarme!!!

Anónimo

Graciela, :( enlaces a kilos en los backlinks que no se sabe de donde han salido, los últimos comentarios que muestran comments del 2007, las imágenes de los autores del comments que se me han descolocado y no hay manera de hacerlas encajar de nuevo...:(:(

Blogger jugando con los comentarios mientras yo juego con la nieve :D

Mil abrazos linda:-L

Anónimo

Pau, brrrr:-L

Unknown

Jugando con la nieve :D que entrete te puedo tirar un copo??? jejejejeje brrrrrrr con razón veía tanto desorden al hacer cosas en mi blog pero... ahhhh ya te cayó!!!!!!! ^_^

besotes!!!!!!!! prrrrrrrr :-L

Unknown

pero mi vida, entiendo un pomo o sea nada...fueron apareciendo día a día los links...AHÍ DIJE ESTÁS EN LA CIMA!!! jajaja...pero comencé a mirar que en todos lados pasa lo mismo ME DIJE: BAJA A LA TIERRA QUE TODAVÍA TE FALTA UNA VIDA PARA SER FAMOSA Y RICA!!!...además comento no salen los comentarios, me comentan y tampoco!!!...estoy hablando con BILL que además es el más rico de los EE.UU., me dice 'no te hagas problemas nena, pronto te soluciono todo' eso les pasa por pedir tanto al Niño Dios, Santa!!! mis besos que hoy estoy tan cabreada con la policía municipal que me importa un bledo mi blog!!!

Unknown

Hola Rosita, desde el pesebre de mi casa, deseo que el niño Jesús traiga paz para ti y tu familia y guíe tus pasos con amor, salud y felicidad cada día del 2009
Feliz Navidad y mis mejores deseos con unas naranjitas entre en cada uno ^_^

Un fuerte abrazo y muchos besos ronroneados :-L

Andybel

.-ROSA: Eres una gloria, gracias por tus respustas y explicaciones.

.-Que te vaya bien y que te toque la lotería mañana para pagar todos los buenos y efectivos consejos sobre blogs que nos das habitualmente.

.-Saludos desde Cosas y Casos.

Emerald

Rosi, solo paso a desearte unas hermosas fiestas rodeada de tus familiares y afectos! que el año nuevo sea muchísimo mejor que el que termina! Gracias por haberme ayudado tanto con mi blog!!
Un gran abrazo

MARGA'S HAPPY CRAFTS

Rosa, disculpa mi ignorancia, pero que es exactamente los feeds?
Gracias por estar siempre ahi al otro lado de la pantalla.

Anónimo

Marga, mira aquí:
http://elescaparatederosa.blogspot.com/2007/09/qu-es-el-rss.html

Anónimo

Hola Rosita, de nuevo por aca... he estado experimentando con mi blog y trate de aplicar lo mismo de esta entrada en mis listas de enlaces y texto, pero no se me habre... pense que era lo mismo que para los archivos del blog... porque no me resulto, ahi algo mas que cambiar o poner?? :$

Anónimo

Jose, lo miraré, ahora mismo no se decirte :$

De todos modos tengo algo parecido en borradores para las listas, si no recuerdo mal, lo miro...

Anónimo

Si es que puede y tiene tiempo nomas, me carga molestar, si tan solo los codigos no fueran chino para mi, trataria de hacerlo yo :D Sigo pensando que deberian darle un gran reconocimiento por lo que hace, no solo por la gran variedad, sino que tambien por como lo explica, si yo lo he logrado es porque ud lo explica muy bien, gracias...

Anónimo

Hola Rosa, me gustaría instalar esto en mi blog. Pero de otra forma, te comento.

Tengo en mi blog instalado lo de "Comentarios recientes". Lo que quiero es que se vean por ejemplo los tres últimos comentarios y si quieres ver el resto de comentarios que tengo( el total de: var numcomments = 10;)pues hay que pinchar en lo de "expandir/contraer".

No se si me entiendes. Un saludo

Anónimo

El blog de Bollulleros. No conozco la manera de lograr eso, casi me atrevería a decir que no puede hacerse, lo siento.

Dra. Irasema

Rosa, gracias por esta nueva opción que nos brindas de guardar los archivos.

Esteré pendiente de tus temas.... Gracias a ti, mi blog es un encanto.!

Un abrazo cálido desde Tijuana, México.

Anónimo

Dr Irasema Lo mejor el contenido ;) es una gran labor el orientar a chic@s adolescentes.

Quién te lo dijo...

Rosi: Al colocar [+/-] sobre un fondo oscuro no se ven los símbolos de contraer ¿como puedo ponerlos de otro color (blanco por ej.)?.

Gracias

Anónimo

¿Quién te lo dijo... Tienen que verse porque se adaptan al color del texto del resto del gadget...

Quién te lo dijo...

Por favor quieres verlo en mi blog? quizá me puedas indicar cual es el problema porque no se ve.
Gracias

Anónimo

¿Quién te lo dijo... Tu blog yo tengo que verlo a través del código fuente para comprobar este tipo de cosas y no siempre ahí se ve todo lo que necesito ver... no obstante parece estar todo correcto en este caso... ¿en el gadget de archivos has marcado el "mostrar los archivos en Jerarquia"?...quizás sea eso...

Quién te lo dijo...

Rosa, Estoy un poco perdido por la respuesta y quizá no me explico bién.
El probema es que me aparece el signo [+/-] y además puedo expandir/contraer, el problema es que el signo aparece dentro de fondo de color oscuro y el signo también, por eso ni se nota casi.
Por favor, echale una mirada a mi blog y ya me dirás que se te puede ocurrir para arreglarlo. Además también me interesa achicar los titulos y el contorno de color que dibuja la plantilla pero no se como hacerlo.

Gracias
JC

Anónimo

¿Quién te lo dijo... No... perdóname tu a mi...fuí al blog y la verdad que no vi el símbolo por su color, así que pensé no te había salido :$
No se ve, porque el simbolo toma el color de tus enlaces de forma automática y como son de ese mismo color que el fondo de los títulos por eso no se aprecia...

Bien, ve a tu panel Edición HTML y marca la casilla de expandir elementos para localizar el código que añadiste, dentro del código verás el simbolo [+/-] lo incluyes entre estas etiquetas, así:
<span style='color: #fff;'>[+/-]</span>

De esta manera se verá de color blanco, si quieres otro color, cambias #fff por el código del color que necesites.
USA VISTA PREVIA ANTES DE GUARDAR NADA.

En cuanto a lo que comentas del tamaño de los títulos... ¿cual? entradas...sidebar...¿ambos?

Quién te lo dijo...

Rosaaa, Gracias, me has solucionado el color de [+/-] que no se veía.

El tamaño de los títulos que te mencionaba es por ejemplo en: Moda Informal, Acerca de Nosotros, etc. No se como poner por acá una captura para orientarte mejor. espero que te des cuenta.

Gracias

Anónimo

¿Quién te lo dijo... En esta parte del código de tu blog, donde dice 14px pon un valor menor:

.sidebar h2, .rsidebar h2, .lsidebar h2 {
background: #753d48 ;
color: #fff;
font: 14px;
font-weight: normal;
margin: 0px 0px 10px 0px;
padding: 10px;
}

Quién te lo dijo...

Rosa, puse los valores que me dices pero no hay caso no cambia el tamaño de la letra, y eso que intenté ponerle el valor 8 para notar mejor la diferencia.

Además, me parece un poco grande el fondo que tiene mi plantilla para los títulos, lo pone respecto al tamaño de la letra (será q se ajusta automáticamente?) y me gustaría saber donde poder modificarlo.

Gracias!!

Anónimo

Y como se hace con el gadget de seguidores?
estos días me estuve pasando por la radio, jaja,muy buena en serio...

Anónimo

Ascesino96 No lo he probado con ese gadget... supongo que sería muy parecido pero no lo se...
En otro tipo de trucos para mostrar/ocultar no pueden hacerse con ese gadget, quizá este tampoco, pero no lo se... trata de probarlo tu mismo.

Anónimo

Quien te lo dijo... Estoy segura de que es ahí donde se controla el tamaño del texto de los títulos de la sidebar... prueba cambiando: font: 14px; por font-size: 14px; con el valor menor ahí por supuesto...

El fondo de los títulos de la sidebar, no se adapta al texto, sino al ancho de tu sidebar... lo que podrías hacer es centrar los títulos...

Quién te lo dijo...

Hola Rosa, como puedo mostrar los Archivos del Blog expandidos por default??

Gracias

Anónimo

Quien te lo dijo... Pues no lo se... todos los script que conozco los muestran antes "cerrados" ya que están hechos para ahorrar espacio... si los muestras abiertos nadie los va a cerrar... no veo el objeto de eso...

Les Habitués

¡Hola, Rosa! Te escribo por primera vez, mi nombre es Coque, y recién empiezo a ver de qué se trata esto de "retocar" el blog. Primero quiero felicitarte y agradecerte por el trabajo que te tomás para ayudar a los pobres ignorantes que como yo están aprendiendo.

Estuve intentando con todos los consejos que das, en varias entradas, para contraer y expandir los gadgets, y no logré hacerlo funcionar: el gadget aparece contraído, pero no toma el [+/-] como enlace y no se expande.

Estoy modificando una de las platillas "nuevas" de blogger, y veo que la estructura de los gadgets, en este caso, son bastante distintas a la que das como ejemplo. ¿Tendrá que ver con eso? Y, ¿se podrá lograr el efecto, o desisto?

Gracias nuevamente y un saludo afectuoso
Coque

Anónimo

Los HabituésSon bien distintas si... hasta que yo misma tenga claro como hacer en el caso de las nuevas, no solo para este efecto, sino para muchos más, seguiré como hasta ahora, para las de siempre y trataré poco a poco de ir introduciendo alguna entrada para las nuevas.

Norberto Briones

Rosa, muchas gracias por esta opción. Mi pregunta es ¿Puedo reemplazar el [+/-] por algún otro símbolo o alguna imagen?

Estaría agradecido de su respuesta.

Anónimo

Norberto Si, puedes cambiarlo sustituyéndolo por el código para mostrar la imagen o el símbolo que vayas a utilizar...

Publicar un comentario

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.

:) :(( :( :P :D :$ ;) :I :X :O |O :S