Hacker of the Web
Tus ideas en código!...y mas

Entradas expandibles en Blogger

Un efecto bastante vistoso, pues puedes hacer que las entradas se muestren expandidas o contraídas, para ahorrar espacio o simplemente por estética o por simple decoración. Puedes configurarlo para que sean por defecto o solo en las paginas de etiquetas y búsquedas.

Entradas expandibles

/!\ Actualizacion 21/01/10: Se actualizo en el paso 3, la solución al problema de las páginas individuales de Blogger


[1] Para colocarlo simplemente debes dirigirte a Diseño>Edicion HTML>Expandir plantillas de artilugios y agregar las siguientes lineas de código antes de la etiqueta </head>, para cargar los archivos JavaScript, que contienen los códigos necesarios para el efecto de desplazamiento(Prototype.js y scripttaculous.js):
<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load("prototype","1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>

[2] Ahora solo tienes que buscar la siguientes lineas de código:
<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 == &quot;item&quot;'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:post.includeAd'>
<data:adEnd/>
<data:adCode/>
<data:adStart/>
</b:if>
</b:loop>

[3] Y reemplazar el código en rojo, por cualquiera de los siguientes códigos:
Antes de continuar si estás utilizando las páginas estáticas de Blogger y ya habías agregado este hack seguro tienes problemas con ellas. Para solucionar el que se muestre completamente dicha página, reemplaza el siguiente código:
<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>
Por cualquiera de los siguientes códigos:

Para agregarlo a las paginas de etiquetas y búsquedas(con parche para paginas individuales):

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

Para agregarlo como default:
<b:include data='post' name='PeekABooPost'/>

[4] Por ultimo necesitas encontrar algo parecido a la siguiente linea de código:
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'>

Y justo debajo de esta, colocar la siguiente:
<b:includable id='PeekABooPost' var='post'>
<div class='post uncustomized-post-template'>
<table><tr>
<td width='40px'><a expr:onclick='&quot;Effect.toggle(\&quot;&quot; + data:post.id + &quot;\&quot;,\&quot;slide\&quot;);&quot;' href='javascript:void(0)' style='text-decoration:none' title='Mostrar/Ocultar'>[+/-]</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>

En donde el texto color:

Rojo: Se cambia por inline, si se desea que las entradas se muestren expandidas por default, es decir, si esta en none, las entradas estarán comprimidas, pero si esta en inline, estas estarán expandidas.
Verde: Linea de código que se encarga de mostrar la entrada completa.


[5] PERO, si estas utilizando el truco de Leer mas...Nota completa, necesitas reemplazar el código verde por este otro:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<data:post.body/><a expr:href='data:post.url' expr:title='data:post.title'> ...Entrada completa</a>
</b:if>


/!\ En esta entrada se asume que tienes conocimientos de como editar la plantilla. Si no sabes como o donde se modifica, revisa esta entrada: Donde editar el código HTML de nuestra plantilla.

#

Deja tu huella y comenta!

Hola!, por favor deja tus comentarios, te aseguro serán contestados, dudas, sugerencias, lo que sea!!!!!!!!!!.

Si el formulario no funciona, o quieres irte a la segura: agrega tu comentario de forma tradicional

Si necesitas ayuda mas personalizada deja un <a href='URL'>ENLACE</a> hacia tu blog.

Emoticons
Comenta con tu:
Comenta:

2 comentarios !

M.R.M dijo...

Hola, he intentado crear el truco pero en la entrada Nº 4 que hay que copiar justo debajo

me da el siguiente error:

"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 "div" must be followed by either attribute specifications, ">" or "/>""
Me puedes ayudar

Iker Javier dijo...

Hola, podias decirme si existe alguna forma de ver los contenidos completos de las entradas del blog sin que se tenga que ir a "Leer mas". Gracias


Página Principal
Arriba