Blogger

Artículos expandibles dentro de las categorias de Blogger

Este es un script muy popular desarrollado por hackosphere que hace que desde la página de las etiquetas los artículos sean expandibles, es decir, que sólo se mostrara el título de la entrada y al dar click, se mostrara abajo el contenido.

    1. Entra a la pestaña «Plantilla» o también llamada «Diseño» desde el escritorio y después a la opción «Edición de HTML» donde activamos la casilla «Expandir plantillas de artilugios».


  1. Buscamos el siguiente código:
    ]]></b:skin>
  2. Y justo después colocamos lo siguiente:
    <script type='text/javascript'src='http://blogyweb.googlepages.com/entradas-expandibles.js' />
  3. Ahora buscamos el siguiente código:
    <b:includable id='main' var='top'>
    <!-- posts -->
    <div id='blog-posts'>
    <b:loop values='data:posts' var='post'>
    <b:if cond='data:post.dateHeader'>
    <h2 class='date-header'><data:post.dateHeader/></h2>
    </b:if>
    <b:include data='post' name='post'/>
    <b:if cond='data:blog.pageType == "item"'>
    <b:if cond='data:post.allowComments'>
    <b:include data='post' name='comments'/>
    </b:if>
    </b:if>
    </b:loop>
    </div>

    Y lo remplazamos con el siguiente:

    <b:includable id='PeekABooPost' var='post'>
    <div class='post uncustomized-post-template'>
    <table><tr>
    <td width='40px'>
    <a href='javascript:void(0)' title='Expande/Oculta este Artículo' style='text-decoration:none' expr:onclick='"javascript:toggleIt(\"" + data:post.id + "\");"'>[+/-]</a>
    </td>
    <td>
    <h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
    </td>
    </tr></table>
    <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>
    
    <b:includable id='main' var='top'>
    <!-- posts -->
    <div id='blog-posts'>
    <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 != "item"'>
    <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 == "item"'>
    <b:if cond='data:post.allowComments'>
    <b:include data='post' name='comments'/>
    </b:if>
    </b:if>
    </b:loop>
    </div>
  4. Guardamos y listo.

Deja un comentario

20 Comentarios

  • Hola!
    Como dice ekz no tenéis puesto el código para activar el script. Ando como loco buscando la manera de implementarlo en el blog y no he sido capaz.
    Gtacias de antemano.

  • ¡Esto es lo que estaba buscando! Ignorá el comentario que te hice en otro post 😛 ¡Saludos y gracias!

  • Ayudame por favor!!! Traté de implementar lo de los artículos expandibles y ya no puedo visualizar mis etiquetas, ni los archivos de mi blog. Además de que me volvió a aparecer la fecha antes del titulo del post!!! Por favor

    Si llegarás a requerir mi plantilla te la mando, pero ayudame por favor

  • Hola Carlos!

    Primero preguntarte, tienes alguna copia de seguridad de tu plantilla? ella podría sacarte del problema, sino bueno, intenta seguir los pasos de esta entrada a la inversa e ir eliminando los códigos que agregaste. Si esto ya no funciona me la mandas.

    Un saludo!

  • Hola estimado Francisco.

    Muchas gracias por responder mi comentario y a mi solicitud de ayuda. Mira lo que pasa es que me encanta su sitio y he aplicado muchas de sus enseñanzas en mi sencillo blog. Tengo dos meses haciendo este blog, he tratado de ser autodidacta y empezé con una plantilla que tienen ustedes (Zen) y de ahí fuí adaptandola (echandola a perder), pero como ha quedado me gusta. Sin embargo, cuando intenté hacer lo de los artículos expandibles, le emepze a mover, trat-e de hacer los pasos a la inversa, pero como no sé nada de html, todo me salió mal y no se que tanto le moví, la verdad. Estoy un poco desesperado, en esl sentido de que la gente que ingresa al blog no puede ver mis etiquetas (de hecho ya las quité por elmomento, junto con el archivo, de la barra lateral.
    También me volvió a aparecer la fecha arriba y me gusta más con el cuadrito ese. Espero me puedas ayudar. Te lo pide un blogger novato desesperadon. Gracias Francisco. Y solo me resta pedirte un correo al cual enviarte la plantilla. Te lo agradeceré infinitamente. Atte. Carlos.

  • Hola Carlos, recién noto que me llego tu plantilla porque la capturo el spam, espero en estos días darte un respuesta, un saludo!

  • Te lo agradezco muchisimo mi estimado Francisco, de hecho no he posteado nada por lo mismo.

    Un saludo.

  • me da un mensaje de error.

    El artilugio con el ID «Blog1» contiene como mínimo dos elementos b:includable con el mismo ID: «PeekABooPost». Todos los elementos b:includable deben disponer de un ID exclusivo para un artilugio determinado.

    ¿como puedo arreglar esto?

    muchas gracias por vuestra web ^^

  • Una duda no ahi algun trukito para poner un boton que diga LEER MAS porque mi blog es de programacion java bueno recien estoy aprendiendo ye stoy subiendo mis codigo y son muy extensos y cada noticia que pongo es esta me ocuap mucho espacio , estare agradecido por ayuda

  • Ante todo felicitarles por la increible labor que realizan, ya que gracias a su ayuda estoy mejorando el diseño de mi blog.
    Mi pregunta es similar a la de Luis (puede que sea la misma), me gustaria saber como se puede hacer en un blog de blogger para que en la pagina principal aparezca solo un fragmento de la entrada y luego un link que diga algo como «leer mas». He visto este diseño en otros blogs, pero no soy capaz de añadirlo al mio, ademas he intentado utilizar el truco que dan en esta entrada pero me da error. Me gustaria mucho que me ayudaran por favor

    muchas gracias

  • battosaiiiii, es probable que hallas puesto de más lo que se muestra en el paso 4 o que hallas instalado otro código con ese ID, solo cambia id=’PeekABooPost’ por id=’PeekABooPost3′ por ejemplo.

    Luis, xGothikkax, pueden ver como hacer eso en blogmundi

    Saludos!

  • Me pone lo siguiente:
    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: Element type «script» must be followed by either attribute specifications, «>» or «/>».

  • No puedo poner eso. Hayo los codigos que mencionan aplastando el boton Expandir plantillas de artilugios, luego al cambiar el tercer codigo por el 4to no lo copea bien es decir cuando trato de poner el cuarto codigo copea el tercero en vez del cuarto entienden? luego trato de poner el cuarto codigo por partes a ver si asi lo copia pero de todos modos me pone error.
    Que Hago?

  • Hola!! me gustaria saber como puedo implementar algo parecido a esto.. eso que hace los mismo pero con los post, ojala puedan responderme, porque he buscado los codigos en muchas paginas y no me ha resultado ninguno 🙁

  • HOla… traté de seguir las instrucciones, pero mi plantilla no coincide, pues no contiene los codigos que ustedes me señalan para reemplazar (paso 4).. solo coinciden los primeros dos renglones y tuve miedo de borrar aquello y pegar lo que me indicaban ustedes… Podrian guiarme?.. realmente necesito esa aplicación en mi blog… mil gracias, Paty GArza