Entradas de cada categoría comprimidas | Oloblogger En algunos blogs, puede ser útil no mostrar enteras todas las entradas de una misma categoría. En la...

27 de mayo de 2008

Entradas de cada categoría comprimidas

En algunos blogs, puede ser útil no mostrar enteras todas las entradas de una misma categoría. En la presentación que se propone, sólo se ven los títulos de cada post y el usuario despliega las que le interesan o accede directamente a la entrada.

Para conseguir esto, teneis que editar vuestro HTML, seleccionando "Expandir plantillas de artilugios" y realizar tres pasos:

1. Justo antes del </head>, hay que copiar este script:

Ver/Ocultar [+/-]
<!-- Entradas expandibles -->
<script type='text/javascript'>
function toggleIt(id) {
post = document.getElementById(id);
if (post.style.display != 'none') {
post.style.display = 'none';
} else {
post.style.display = '';
}
}
</script>
<script src='http://sites.google.com/site/oloblogger/ficheros/entradas_expan.js' type='text/javascript'/>

Si teneis un sitio donde alojar el fichero JS (por ejemplo en GooglePages), os lo bajais de Anniyalogam y lo subís a vuestro servidor. De esta manera funcionará más rápido. No olvideis cambiar la URL que figura en el código de arriba por la vuestra.

ACTUALIZACION 03-09-2009: El fichero hackosphere.js ya no está en la dirección citada. Para pruebas, podeis utizar el que se ha colocado ahora, aunque seguimos recomendando descargarlo y usar un alojamiento propio para evitar problemas en el futuro. Por cierto, que hoy día el alojamiento alternativo a Google Pages es Google Sites.

2. Hay que localizar la línea <b:includable id='main' var='top'> y justo antes, insertar todo este artilugio:


Ver/Ocultar [+/-]
<b:includable id='PeekABooPost' var='post'>
<div class='post uncustomized-post-template'>
<div align='left'><table><tr><td align='left' valign='top' width='100px'><a expr:onclick='&quot;javascript:toggleIt(\&quot;&quot; + data:post.id + &quot;\&quot;);&quot;' href='javascript:void(0)' style='text-decoration:none' title='Desplegar esta entrada'><img id='data:post.id' src='http://img216.imageshack.us/img216/5504/flechahornu4.gif'/></a></td> <td><h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3></td></tr></table></div>
<div class='post-body' expr:id='data:post.id' style='display:none'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</div>
</b:includable>


3. Por último, ahí mismo, miramos hacia abajo e insertamos las nuevas líneas marcadas en negrita:


Ver/Ocultar [+/-]
<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>

<b:include data='top' name='status-message'/>

<data:adStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:include data='post' name='PeekABooPost'/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>

<b:include data='post' name='post'/>

</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='comments'/>
</b:if>
</b:loop>
<data:adEnd/>
</div>
<!-- navigation -->
<b:include name='nextprev'/>
<!-- feed links -->
<b:include name='feedLinks'/>
</b:includable>


El resultado es algo parecido a ésto...



En mi caso, sale un poco raro por las fechas y el efecto bloc, pero el aspecto de salida coincidirá con el que determine la plantilla de vuestro blog.

La imagen del paso 2 que hace de enlace para desplegar, se puede sustituir por el típico [+/-]. Sólo hay que eliminar toda la etiqueta <img.../> y escribir en su lugar el texto que queramos. También podéis escoger otra imagen que os guste y ponerla en su lugar. En ese caso, sólo teneis que cambiar la URL y ajustar el ancho (width) del primer TD (el que viene con valor 100px), para poner el que quede bien con vuestra imagen. Tened en cuenta que no puede ser muy alta para no descuadrar mucho con el texto de la cabecera.

Visto prácticamente igual en: Gema Bl@g, dónde podeis acudir si no se entiende aquí.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

39 comentarios :

  1. A los fuegos (en construcción)13/6/08 21:18

    Muy bueno el truco.

    Lo apliqué en A los fuegos (en construcción) y quedó fantástico.

    Gracias.

    ResponderEliminar
  2. hola esta muy bueno este truco
    pero sigo teniendo un problema quisiera poner las entradas como tu las tienes igual de otra manera pero esta muy bueno ja adios

    ResponderEliminar
  3. oye por cierto me gustaria que nos enlazaramos y haci yo muestro tu blog en mi blog y viceversa va ja espero tu respuesta
    http://web-mundotodo.blogspot.com/

    ResponderEliminar
  4. oloman, gracias por tu blog, esta buenissimo... tengo una duda respecto a este truco: yo uso una plantilla Minima, y no me aparece el id='main' var='top'>, tengo que agregarlo en algun lado? que hago? porque si no tengo eso, tampoco puedo agregar el codigo que aparece despues... ayudame, en mi blog tengo entradas muy largas y se veria mucho mejor si lo hago como tu tienes aca. la direccion es oficinadiscapacidad.blogspot.com

    ResponderEliminar
  5. ya encontre lo que dije que no estaba, si esta... pero aun asi no me sale, me dice que hay un error, me dice esto -No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
    Mensaje de error de XML: Comment must start with "- donde va eso???

    ResponderEliminar
  6. Alexis, eso sólo puede ser porque te has comido algúna parte del código: un punto, una comilla, un guión...
    Repásalo.
    Un saludo,

    ResponderEliminar
  7. pero lo copie tal cual tu lo tienes... y aun asi me da error

    ResponderEliminar
  8. No sé... A otros les funcionó copiando y pegando.

    Prueba en el enlace de Gema que se facilita al final de esta entrada o mándame una copia de tu plantilla (con artilugios expandidos) por correo electrónico.

    Echándole un vistazo, le inserto el código y te la remito de nuevo. Esto tardaré un poco en hacerlo, porque además de tener poco internet en estos meses, mañana salgo de viaje.

    Un saludo,

    ResponderEliminar
  9. gracias Oloman, te mande mi plantilla... espero lo que tenga que esperar, no te preocupes... y gracias de nuevo

    ResponderEliminar
  10. Maestro, maestro, maestro... por fin lo lograste... la plantilla que me mandaste funciona espectacular... muchas gracias

    ResponderEliminar
  11. una ultima consulta, pero que no tiene nada que ver con esta entrada, que insisto funciono espectacular. Oloman, como puedo poner la nube de etiquetas (que yo le llamo topicos de la pagina) justo bajo el menubar? recuerda que la pagina es http://oficinadiscapacidad.blogspot.com... te lo agradeceria mucho de nuevo

    ResponderEliminar
  12. Alexis, eso que preguntas lo tienes explicado en Colocar un elemento encima de las entradas.
    Saludos.

    ResponderEliminar
  13. ayudandome de nuevo Oloman, muchas gracias... pasa por el blog y deja algun comentario en el panel de mensajes cuando quieras...

    ResponderEliminar
  14. Por finnn, llevo buscando esto desde hace mucho tiempo y en cada pagina que lo ponian no me funcionaba, me decia siempre que la plantilla estaba mal formada, muchas gracias, por cierto el blog, un pedazo de blog jeje, te seguire leyendo.

    ResponderEliminar
  15. Antes que nada muchas gracias por sacarnos de dudas. He comprimido las entradas y me sale perfecto pero me recorta el fondo que tengo en los textos y me gustaría que ocupara toda la pag ¿como hacer? Otra vez gracias.

    ResponderEliminar
  16. Patrice si tu blog es de ancho fijo de columna, prueba a poner dentro de la clase h3 -que es la trata el aspecto del título de los post- un ancho, por ejemplo, añade una línea
    width:300px;

    Si funciona, ajusta los pixels al ancho que necesites.

    ResponderEliminar
  17. Eternamente agradecido, ha funcionado a la perfección.

    ResponderEliminar
  18. Hola
    pues he intentado aplicar este truco en mi blog, copio los codigos como son y los pego exactamente donde dices, pero al final quiero hacer 1 vista previa para ver si quedo el truco. pero la pagina de mi blog no se abre y aparece un erros con estas letras y numeros bX-gq2wvl

    Me podrias ayudar.???

    ResponderEliminar
  19. La vista previa no te servirá para ver si está bien esto Alejandra. Los post comprimidos sólo te salen cuando pinchas en una etiqueta de categoría o en los enlaces "entradas anteriores", "entradas posteriores" y la vista previa sólo te muestra la página Inicio.

    No te queda más remedio que grabar las modificaciones y luego ver cómo queda. Como precaución, graba antes tu plantilla y pon comentarios en las líneas que añades para luego poderlas quitar si es necesario, aunque como tienes esta entrada, te será fácil reconstruilo todo en caso necesario.

    De todas formas, el error ese es un error de Blogger que se te solucionará en un rato (o en unas horas). No sé que significa, pero me ha pasado alguna vez y simplemente es algún tipo de error de conexión. Es posible que si intentas modificar otra cosa, te salga también.

    ResponderEliminar
  20. Muchas gracias Oloman!!
    Yo pensaba que la vista previa servia en este caso.
    pero gracias por la aclaracion
    Ahora mismo voy a intentarlo.

    Espero estes muy bien y descansa, pues veo que ya es un poco tarde por donde vives y yo aqui molestandote n.n

    Muchisimas gracias de nuevo.

    ResponderEliminar
  21. hola sabes no he podido aplicar este truco, en el blog de gema dice ke la primera parte se copia despues de head y aca dice ke hay ke ponerlo antes, pero igual poniendolo antes o despues igual no me funciona, mi plantilla es la minima black y solo le he cambiado el ancho de las columnas y el fondo del blog, ojala puedas ayudarme bye

    ResponderEliminar
  22. Por si es el script general el que falla Blackout, súbelo a un servicio de alojamiento (por ejemplo Skydrive) y sustituye la dirección.

    ResponderEliminar
  23. ya casi ya casi...nomase ke cuando le doy click sobre +/- no se abre nada..solo cuando doy click sobre el titulo de la entrada se abre...ke anda mal

    ResponderEliminar
  24. Blackout, lo que quieras que sirva como enlace tiene que estar justro delante (o detrás) de <data:post.title/>

    o dicho de otra manera, entre el <a express:href="... y el </a>

    ResponderEliminar
  25. Hola,
    En mi caso, he puesto este script y no se ven las fechas de cada entrada. ¿Qué puedo hacer?
    http://ayudadisca.blogspot.com/search/label/Musicoterapia
    Discupe les molestias.

    ResponderEliminar
  26. Vanblog, en el segundo trozo de código que se muestra, es dónde puedes añadir todo lo que quieras.

    Para la fecha, necesitas poner
    &lt,data:post.title/>
    y en tu caso, puedes insertarlo después del código de la imagen... por ejemplo.

    ResponderEliminar
  27. Mil gracias, ahora me ha quedado bien.
    Saludos

    ResponderEliminar
  28. Anónimo8/3/09 2:26

    Interesante... Me Gustaria Colocar Un Sistema Parecido Ami Blog, Me Puedes Decir Que Codigos Tengo Que Colocar Para Que Solo Se Compriman y Todas Salgan Con Fecha y Una Imagen; Como Una Viñeta, Si Expandir. Para Que Paresca Una Lista De La Categoria Seleccionada...

    ResponderEliminar
  29. Hola. El último código mostrado en este post (el tercero), precisamente se coloca para que este estilo no se vea en la portada. Para que sí se vea, que es lo que parece que tú quieres, tendrás que dejarlo así:

    <!-- <b:if cond='data:blog.homepageUrl != data:blog.url'>-->
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:include data='post' name='PeekABooPost'/>
    <b:else/>
    <b:include data='post' name='post'/>
    </b:if>
    <!-- <b:else/>

    <b:include data='post' name='post'/>-->
    <!-- </b:if>-->

    Las líneas entre <!-- y --> están anuladas. El resultado sería el mismo si directamente las borras.

    La imagen va en el segundo trozo de código y bastaria con sustituir la que incluimos a modo de ejemplo en este post, por otra a tu gusto.

    ResponderEliminar
  30. Anónimo9/3/09 3:35

    Parece Que No Me Entendiste, Mira Quiero Que Salga Como Tu Blog Cuando Uno Le Da A Una Etiqueta. Imagen, Título y Fecha Sin Desplegar, Como En Una Lista...

    ResponderEliminar
  31. El código que se indica en esta entrada es precisamente para eso. Este es el que tengo aquí para que se vea como tú lo has visto. Pensaba que querías cambiar algo.

    Si lo instalas, verás que sale así. Si en tu plantilla no se mostrara igual, deja tu URL y le echo un vistazo.

    ResponderEliminar
  32. Oloman Yo Tambien Quiero Aplicar Este Sistema Ami Blog, Pero Que Solo Salgan Las URL (Con Nombre) Como Una Lista. En Tu Blog Las Etiquetas No Tienen Este Sistema Solo Estan Comprimidas y Solo Se Ve El Título, Algo Así Como Tu Blog Quiero... Puedes Decirme Que URL Tengo Que Colocar o Cambiar Algo De Lo Que Ya Mencinaste...

    ResponderEliminar
  33. No hay que cambiar nada. Prueba a montar el código que aquí se indica. En Vista Previa no verás nada porque no funciona en la página Inicio. Tendrás que Grabar y luego probar pinchando en una etiqueta. Entonces podrás comprobar cómo sale.

    Marca con comentarios <!-- --> las líneas que insertes por si luego quieres quitarlas, aunque también puedes volver aquí y seguir al revés los pasos que se indican, para deshacer lo hecho.

    ResponderEliminar
  34. Tengo aplicado lo que explicas en esta entrada: "entradas de cada categoría comprimida" y me funciona perfectamente. Quisiera pedirte, si es posible, como he visto en otros blogs, que cuando haces "click" en el título de la entrada se despliegue pero que lo haga de forma deslizante, creo que es un efecto que queda muy bien.
    Te doy las gracias de antemano. Un saludo.

    ResponderEliminar
  35. Se ve que no te has dado cuenta Inés, pero mientras que el título te lleva al post correspondiente, la flechita es un enlace que despliega la entrada en ese mismo sitio.

    Para que quede más claro, puedes cambiar todo el código correspondiente a la imagen (<img id='data:post.id' src='http://img216.imageshack.us/img216/5504/flechahornu4.gif'/>) en el trozo que se da en segundo lugar, y sustituirlo por la palabra DESPLEGAR u otra cosa que te parezca más adecuada.

    ResponderEliminar
  36. Gracias, por tu rápida respuesta. Creo que no lo he explicado bien. Si sé que al pinchar dónde tu tienes el lápiz se despliega la entrada en ese lugar. Mira al efecto al que me refiero es a qué cuándo haces "click" donde tú tiene el "lápiz" se despliega la entrada pero lo hace de "golpe", lo que yo decía que haces "click" en el lápiz y se despliegue pero de forma deslizante. Bueno no sé si me explico bien. En cualquier caso muchísimas gracias. Me entusiasma tu blog. Un saludo

    ResponderEliminar
  37. Hola Inés. Estaba preparando un post al respecto, cuando mi feed me avisó que alguien ya había publicado justo hoy como resolver ese tema.

    http://elescaparatederosa.blogspot.com/2009/04/efecto-deslizante-slide-para-entradas.html

    Lo único es que dónde dice SLIDE, pruebes por si te gusta más con BLIND.

    Saludos.

    ResponderEliminar
  38. Muchas gracias.
    He seguido las instrucciones que allí se indica, pero mira tengo un problema:
    Añado Prototype y Scriptaculous y todo bien, pero cuando añado: slide"las entradas que están comprimidas por categorías me desaparecen, sin embargo, si quito ;slide" me vuelven aparecer las entradas.
    Yo creo que estoy añadiendo mal esta parte ;slide". Me podrías decir, donde tengo que añadir exactamente ;slide" o como tu sugieres blind>. Veo que tu has añadido este efecto, dime, por favor, donde lo has añadido exactamente esta última parte.
    Muchísimas gracias, y perdona que sea tan pesada.

    ResponderEliminar
  39. Pues tras pelearme con el código y no conseguir tampoco que aceptara el parámetro BLIND (tampoco SLIDE), opté por quitarlo.

    Directamente no pongas la coma, el SLIDE y los &QUOT; que lo rodean. De esta manera te coge el valor por defecto del SCRIPT, que aunque no es ninguno de los mencionados, no queda mal y no da problemas.

    ResponderEliminar