English Português

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

  2. Buscamos el siguiente código:
    ]]></b:skin>
  3. Y justo después colocamos lo siguiente:
    <script type='text/javascript'src='http://blogyweb.googlepages.com/entradas-expandibles.js' />
  4. 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>
  5. Guardamos y listo.
Escrito por Francisco Oliveros

Soy un gran aficionado del diseño y de todo lo que el código puede comunicar. Ingeniero mecánico por profesión, pero dedicado al desarrollo web a tiempo completo.

Blog / Twitter

Artículos relacionados

Sigue leyendo consejos, tips y tutoriales para tu blog.

    Comentarios

    1. ekz / Hace 10 años /

      Se olvido poner como usarlo =(, la cosa es que después de probar muchos códigos para lograr esto (y de revertir cambios muchas veces) la única forma de lograrlo fue a través de http://mentoliptus.blogspot.com/2007/02/resumen-expandible-2007.html

      SAludos gran página

      Responder a ekz →
    2. Iván / Hace 10 años /

      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.

      Responder a Iván →
    3. santi_monse / Hace 10 años /

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

      Responder a santi_monse →
    4. Carlos Álvarez / Hace 10 años /

      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

      Responder a Carlos Álvarez →
    5. Francisco / Hace 10 años /

      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!

      Responder a Francisco →
    6. Carlos Álvarez / Hace 10 años /

      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.

      Responder a Carlos Álvarez →
    7. Francisco / Hace 10 años /

      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!

      Responder a Francisco →
    8. Carlos Álvarez / Hace 10 años /

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

      Un saludo.

      Responder a Carlos Álvarez →
    9. battosaiiiii / Hace 10 años /

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

      Responder a battosaiiiii →
    10. Luis / Hace 10 años /

      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

      Responder a Luis →
    11. xGothikkax / Hace 10 años /

      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

      Responder a xGothikkax →
    12. Francisco / Hace 10 años /

      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!

      Responder a Francisco →
    13. Fernando / Hace 10 años /

      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 “/>”.

      Responder a Fernando →
    14. Fernando / Hace 10 años /

      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?

      Responder a Fernando →
    15. Fernando / Hace 10 años /

      Por favor conteste!! necesito ayuda!!

      Responder a Fernando →
    16. Paula / Hace 10 años /

      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 🙁

      Responder a Paula →
    17. Paula / Hace 10 años /

      mm perdon, queria decir que hace los mismo con los comentarios (no los post) 🙂

      Responder a Paula →
    18. Francisco / Hace 10 años /

      Hola!

      Fernando, realmente no sé a que se deba tu problema al copiar el código, pero si esto el problema, puedes ver este mismo proceso en el blog de gema.

      Paula, no he visto algo específico para los comentarios, pero hay script generales que te ayudan a expandir y contraer cualquier elemento.

      Saludos!

      Responder a Francisco →
    19. Jenny / Hace 9 años /

      🙁 no encuentro el segundo codigo …

      Responder a Jenny →
    20. patricia garza / Hace 8 años /

      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

      Responder a patricia garza →

    Responder

    ¡Gracias por dejar tu opinión! Por favor procura que tus comentarios estén dentro tema, que no sean promocionales (spam), ilegales u ofensivos, de otro modo, serán borrados. Todos los enlaces serán moderados y la URL indicada NO será enlazada.

    Blog and Web es un blog de Blógstica. Hospedado desde 2008 en Liquid Web.

    Términos de uso - Política de privacidad