Algunos se habrán fijado que al dar click sobre una etiqueta, al archivo del blog o al hacer una búsqueda, los resultados se muestran en una lista de títulos de las entradas, y al darle click se muestra el contenido.
Esto no sólo ayuda a que el lector localice más fácil lo que está buscando, sino que agiliza enormemente la carga de la página.
Para hacerlo en el blog haz primero un respaldo de tu plantilla y luego haz lo siguiente:
Entra a Diseño > Edición de HTML, marca la casilla Expandir Artilugios y pega antes de</head> lo siguiente:
<script type='text/javascript'>
function toggleIt(id) {
post = document.getElementById(id);
if (post.style.display != 'none') {
post.style.display = 'none';
} else {
post.style.display = '';
}
}
</script>
<script src="http://dl.getdropbox.com/u/647003/CiudadBlogger/Scripts/Expandibles.js" type="text/javascript">
</script>
Ahora busca el código que está en color negro y agrega el código en color rojo donde se indica:
<b:includable id='PeekABooPost' var='post'>
<div class='post uncustomized-post-template'>
<table><tr><td width='40px'>
<a expr:onclick='"javascript:toggleIt(\"" + data:post.id + "\");"' href='javascript:void(0)' style='text-decoration:none' title='Desplegar esta entrada'>[+/-]</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 class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:adStart/>
<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.pageType != "static_page"'>
<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:else/>
<b:include data='post' name='post'/>
</b:if>
Guarda los cambios y listo, podrás ver el resultado al hacer click sobre una etiqueta del blog. Los signos [+/-] que se han agregado a los títulos es para que la entrada se expanda. Puedes hacer click ahí para ver la entrada expandible o directamente en el título del post.
De igual manera esos signos que se encuentran en el primer código en color rojo pueden cambiarse por otros símbolos o por una imagen.
Se recomienda descargar el script y subirlo en en servidor, o bien, alojarlo directamente en la plantilla.
No hay comentarios:
Publicar un comentario