JMiur [E]

Esta segunda entrada explica la forma de crear Posts Expandibles un hack desarrollado por Ramani de Hackosphere. Lo que sigue es una traducción libre de lo publicado originalmente.

En todos los casos, es aconsejable hacer una copia de seguridad ANTES de hacer cualquier cambio a la plantilla.

La idea es que ciertos posts, sólo tendrán visible un texto sumario y el resto se mantendrá oculto hasta tanto se haga click sobre un vínculo ubicado en la parte inferior. Al hacer esto, el texto oculto se hará visible y se agregará otro vínculo al final de este para poder ocultarlo otra vez.

De un modo simple, se puede decidir si el post será normal o expandible.

La implementación es relativamente compleja por lo que se debe ser muy cuidadoso al modificar la plantilla.

1. Para comenzar, ir a Diseño Editar HTML y expanadir los widgets. Luego, buscar el tag </head> y copiar el siguiente código ANTES:

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

2. Buscar el siguiente widget:

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

y dentro de este, el inicio de la siguiente sección:

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

La sección original debería ser algo así:

<b:includable id='post' var='post'>
<div class='post'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'>
<data:post.title/>
</a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'>
<data:post.title/>
</a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
<div class='post-header-line-1'/>
<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/>
</div>
... el resto del código ...
</div>
</b:includable>

Los cambios a realizar estan resaltados:

<b:includable id='post' var='post'>
<div class='post' expr:id='"post-" + data:post.id'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'>
<data:post.title/>
</a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'>
<data:post.title/>
</a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
<div class='post-header-line-1'/>
<div class='post-body' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p>
<a expr:onclick='"javascript:showFull(\"post-" +
data:post.id + "\");"'
href='javascript:void(0);'>
EXPANDIR POST
</a>
</p>
</span>
<span id='hidelink' style='display:none'>
<p>
<a expr:onclick='"javascript:hideFull(\"post-" +
data:post.id + "\");"'
href='javascript:void(0);'>
VER SUMARIO
</a>
</p>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>")
</script>
</b:if>
<div style='clear: both;'/>
</div>
... el resto del código ...
</div>
</b:includable>

3. En Opciones Formato, sobre el final de la página hay un área de texto donde puede colocarse un modelo básico que será visto al agregar entradas (Plantilla de entrada). Agregar el siguiente código y guardar:

Escribir el sumario AQUI
<span id="fullpost">
escribir el el resto del post aquí
</span>

Al crearse una nueva entrada se mostrará claramente donde debe ir el SUMARIO (la parte siempre visible) y donde debe ir el resto (lo que quedará oculto).

Si se desea, pueden editarse las entradas ya publicadas y aplicar el hack, incluyendo la parte no visible entre los tags <span id="fullpost"> y <span>.

CÓMO FUNCIONARÁ: los cambios realizados harán que, al abrir la página principal, cada entrada tendrá un SUMARIO (siempre visible) y un texto-vínculo (por ejemplo: 'EXPANDIR POST'). Si bien, el resto del post se cargará, NO será visible hasta hacer click en el vínculo. Entonces, se mostrará todo y el texto-vínculo cambiará a VER SUMARIO. Haciendo click sobre este, se ocultará y nuevamente aparecerá sólo el sumario.

Esto NO se ejecutará en las páginas de items individuales, allí, las entradas se verán completas.

Si se quiere que un post se vea completo, basta borrar el editor antes de comenzar o eliminar el tag <span id="fullpost">.

BUGS: dependiendo de la plantilla, la "distancia" entre la última línea del sumario y la primera del resto de la entrada cuando esta se hace visible puede variar (estar muy juntas o muy pegadas). La solución es experimentar, eliminando/agregando líneas en blanco o tags <br /> en el editor.

PERSONALIZAR: puede ponerse cualquier texto-vínculos y también es posible darles un estilo (fuente, color, tamaño, etc.). Para esto, basta crear una CLASE y agregarla a las declaraciones de estilo en el HEAD de la plantilla. Por ejemplo:
.nuevaClase a {color: ... ; font-family: ... ; text-decoration: ... ;}
.nuevaClase a:link {color: ... ; font-family: ... ; text-decoration: ... ;}
.nuevaClase a:visited {color: ... ; font-family: ... ; text-decoration: ... ;}
.nuevaClase a:hover {color: ... ; font-family: ... ; text-decoration: ... ;}
Y luego modificar las siguientes líneas:
<span id='showlink'>
<p class='nuevaClase'>
<a expr:onclick= ... >EXPANDIR POST</a>
</p>
</span>
<span id='hidelink' style='display:none'>
<p class='nuevaClase'>
<a expr:onclick= ... >SUMARIO</a>
</p>
</span>
POSTS EXPANDIBLES (Expandable Posts)
  • hackosphere Homepage
  • Expandable posts with Peekaboo view
  • Collapsable Posts

    • 128 comentarios |

    Suscribirse a la entradas
     
    CERRAR