sábado, 16 de junio de 2007

::Vista de posts expandibles en las entradas::

::Vista de posts expandibles en las entradas::

.
Es otro mas de los hack secretos que tengo implementado en mi blog, el siguiente hack nos ayuda a mejorar la experiencia del usuario. La idea es mostrar solo el titulo del post pero tambien provisto de un [+/-] para poder expandir y leer el post.

Nos dirigimos a:

Plantilla--Edición de HTML--Expandir plantilla de artilugios

Buscamos este código </head> y colocamos el siguiente codigo antes:


<script type='text/javascript'
src='http://www.anniyalogam.com/widgets/hackosphere.js' ></script>

Ahora tu necesitas buscar el codigo que se encuentra con amarillo y añadir las partes que se sobresaltan con rojo:

<b:includable id='PeekABooPost' var='post'>

<div class='post uncustomized-post-template'>

<table><tr>

<td width='40px'>

<a href='javascript:void(0)' title='Expand/collapse this post' 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>

Guardamos cambios y listo.

No olvides dejar tus comentarios


Escucha este escrito

4 Personas dejaron sus comentarios:

Macross VoXp comento sobre este post...

Perdon, pero no entiendo qué hay que hacer con el el código rojo. Tengo que buscarlo, cortarlo y pegar el codigo amarillo en su lugar??? O solo agregar???
Ahh, mi sitio es http://macrossvoxp.blogspot.com
ahi voy a agregar el script.
Gracias.

Avatar comento sobre este post...

Hola, lo que tienes que hacer solo es buecar las partes q estan en amarillo, y agregas las partes que estan en rojo, es muy facil.

F.Melero comento sobre este post...

No me funciona el codigo, me dice que algun elemento no esta bien cerrado...

sabes a que se puede deber?

Garzazul comento sobre este post...

Hola yo quería poner eso en mi blog, pero sólo encuentro parte del primer código que tengo que buscar, es decir que no se en donde ponerlo. ¿si te lo mando me lo haces? :S

Calendario de posts

Cargando...

 
ir arriba