Añade un índice a tu Blogger personalizable por títulos o etiquetas

En esta entrada te explicó paso a paso como crear un página en Blogger que muestre un índice personalizable ✅ de tus entradas por títulos o etiquetas.

Añade un índice a tu Blogger personalizable por títulos o categorías

Con este simple tutorial podrás crear una lista de entradas ordenada por etiquetas para mostrarle a tus visitantes todas tus publicaciones, pero también puedes mostrar todas las entradas de una sola etiqueta. El script que se utiliza para lograr esto es de Jmacuna y permite personalizar lo siguiente:
  • Ordenar alfabéticamente por Etiquetas.
  • Ordenar alfabéticamente por Título.
  • Ordenar por Fecha de publicación.
  • Mostrar la fecha de publicación.
  • Definir el texto o marca que aparece en los últimos artículos.
  • Ejm: New!!
  • Determinar el número de artículos a los que poner la marca.

Añadir el índice a una página de Blogger

Debes crear una página nueva dirigiéndote al Panel de control de blogger → Páginas → Dale clic al botón Página nueva. Ya que ingresaste escribe el título que tu desees. El tutorial lo separare en dos partes la primera muestra todas las entradas por etiqueta y la segunda una sola etiqueta con todas sus entradas.

Mostrar todas las entradas por etiqueta

En la esquina superior izquierda veras los botones de Redactar con HTML, presionas HTML y agregas el siguiente código:
<div id="all-post" class="all-post"></div>
<script>
var conf = {
 sortBy:   'orderlabel',  // forma en que se muestran las artículos publicados
 lastPost: 10,            // últimos post (10) a los que les pongo una marca
 date:     1,             // 0:no aparece la fecha de publicación | 1:mostramos la fecha de publicación
 newPost: 'Nuevo!!',      // texto o marca que aparece en los últimos artículos
 newtab:   1              // 0:abre link en la misma ventana | 1:abre link en ventana nueva
}
</script>
<script src="https://cdn.jsdelivr.net/gh/jmacuna/index-blogger@master/index-blogger.js"></script>
<script src="[URL DE TU BLOG]/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
Debes borrar lo que esta en rojo para escribir la url de tu blog con http:// o https:// según corresponda, pero SIN "www.". Además puedes personalizar la lista modificando los siguientes parámetros:
  • sortBy puede tomar los siguientes valores:

    1. orderlabel: ordena alfabéticamente por Categorías
    2. titleasc: ordena alfabéticamente por Título del Post (de A a Z)
    3. titledesc: ordena alfabéticamente por Título del Post (de Z a A)
    4. dateoldest: ordena el Título del Post por fecha de publicación (del más antiguo al más reciente)
    5. datenewest: ordena el Título del Post por fecha de publicación (del más reciente al más antiguo).

  • lastPost: número de artículos que aparecerán como nuevos, ordenados por última fecha de publicación.
  • date0 si no queremos mostrar la fecha de publicación del artículo o 1 para mostrarla.
  • newPost: texto o etiqueta que aparecerán en los artículos nuevos.
  • newtab0 para abrir el artículo seleccionado en la misma ventana o 1 para abrir el link en una ventana nueva.
El resultado sería el siguiente:


Mostrar todas las entradas de una sola etiqueta

Existe solo una condición para que esto funcione y es que todas tus entradas deben tener solo una etiqueta, porque el script mostrará la segunda etiqueta que se muestre en alguna entrada de la primera etiqueta, es decir, en vez de mostrar solo una etiqueta mostrará dos o tres o cuatro... dependiendo de la cantidad de etiquetas que contenga la entrada.

Lo único que debes modificar del código anterior es la url hasta default:
Código original (Borrar lo que esta en rojo)

<script src="[URL DE TU BLOG]/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>

Reemplaza lo que acabas de borrar por:

[URL DE TU BLOG]/feeds/posts/default/-/tucategoria%20con%20este%20formato
En el caso de que tu etiqueta contenga un espacio lo reemplazas por %20, como por ejemplo, la etiqueta "fotos gatitos" en el código sería "fotos%20gatitos". Las etiqueta debe estar escrita tal cual como la escribes en tus entradas respetando mayúsculas y minúsculas.

Eso fue todo, espero sea de ayuda esta actualización de la entrada de Jmacuna.

Comentarios

Estas cordialmente invitado a compartir tu ideas y comentarios.