Viajar por Europa

marzo 08, 2011

poner un indice de entradas en blogger

Todas tus entradas relacionadas a modo de índice,  simplemente seleccionando la etiqueta que te interesa. Una relación de los títulos de las  entradas por etiqueta, ayuda mucho a buscar la información en el blog.


En resumen a veces clicas sobre etiquetas y te aparecen toda las entradas que se corresponden con un resumen de lineas. Con ellos se carga mas lento y además si buscas algo rápido pesa más la página, con este truco lo que se hace es relacionar solo los títulos del blogger contenidos en la etiqueta seleccionada.

En blogger hay varias soluciones, aquí voy a explicar a poner un indice de entradas solo para la etiqueta o categoria que selecciones. Difiere de otros listados,  que más bien se corresponden a un  sitemap, todos los posts del blog clasificados por categoria.

La solución es similar a la de un libro. Tienes un indice general, detallado a principio del libro lo que pudieramos llamar el sitemap de la novela y después en cada capítulo tendria un indice de todo lo que se encontrará en el capítulo. La idea  es buena, pero creo que necesita mejorar la presentación, hacerla más amigable.

¿Como funciona este indice de entradas?: Seleccionas una etiqueta del widget "etiquetas o  categorias" una vez seleccionada "clic"  y a continuación  te apareceran relacionadas todas  los títulos relacionados con la etiqueta. Se incluye un corchete a la izquierda [+/-] para extender el título y leer las primeras lineas del post, si interesa ingresas en el escrito completamente seleccionando sobre el título. (Faltaría un comando leer más).

Este truco lo he leido en algúnos blogs dedicados a trucos para blogger,  pero para plantillas antiguas, yo lo he adaptado a las nuevas plantillas de blogger. Te voy a dar unos consejos que he descubierto después sufrir varios errores.

El resultado de este truco lo puedes ver en mi blog, si seleccionas alguna de las etiquetas te aparece un indice con todos los título,  incluidos en esa etiqueta.

La verdad es que para que quede perfecto el indice de entrada deberia aparecer en una pagina del blog limpia, sin gadgets, ni widget, ni adesense, pero´estoy estudiando el tema, no es tan fácil. Otra observación que tengo que hacerte es que los títulos aparecen tal cual está publicados en las entradas, con la misma fuente y tamaño, con recuadro si así está en la entrada. Si no quieres que aparezca la fecha tendrás que cambiarla desde la opción diseño, entrada.

El proceso es como siempre, accedes al HTML del blog, plantilla blogger, expandir artilugios y buscas con "CTR+F" </head> inmediatamente antes insertas el siguiente script : (tienes varias alternativas entre ellas los scripts se pueden guardar en la plantilla de blogger), si no tienes algún servidor puedes subir el script a "sites" en google.


<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='https://sites.google.com/site/aprenderseosem/script/entr_expandibles.js
' type='text/javascript'>

</script>


 
En segundo lugar copia el siguiente código <b:includable id='main' var='top'> y ponlo en la ventana de CTRL+F, cuando lo veas en la plantilla, justo antes pega las sigientes lineas que aparecen en color rojo.


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


A continuación haz la misma operación con el código: <b:include data='post' name='post'/> y cuando aparezca en la plantilla justo antes de ésta linea pega las siguientes lineas que aparecen en rojo. Una vez pegadas estas lineas, incluye a continuación de la linea :    </b:if>  (tal como aparece en el cuadro siguiente)

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


Nota importante:Si cambias la posición de la fecha  para ponerla debajo del titulo de la entrada puede que tengas algun problema con el indice de entradas, como que la fecha deje de aparecer en los títulos del indice y tus lectores si buscan pueden que deseen saber la antigüedad del post . Lo he resuelto de la siguiente forma he añadido la linea subrayada tal como indico a continuación. Las lineas superiores pertenecen a las lineas que aparecen en ventanas enteriores, sobre este truco:


<td><h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3></td></tr></table>

<h2 class='date-header'><data:post.dateHeader/></h2>

No hay comentarios:

Publicar un comentario

Si haces un comentario procura que no sea anónimo y si estás solicitando algo al menos espero que votes en Google Plus. Saludos.