Historial con todas las entradas del blog

generador de entradas por etiquetas widget para mostrar entradas por etiquetas

Demostración Repositorio Star

Hoy les comparto nuestra creación más reciente. Se trata de un complemento que genera un índice de entradas organizadas por fecha de publicación, escrito en javascript puro y basado en la api 3.0 de Blogger.


No tiene el problema del límite de 150 entradas, ya que puede tomar todos los post del blog y lo hace de manera optimizada, solicitando solo los datos que requiere el historial, con lo cual, alcanza un excelente rendimiento.


Instalar

Vamos a entrar en nuestro panel de administración de Blogger, luego nos dirigimos a Temas > Personalizar > Opciones avanzadas > CSS Personalizado, en donde pegaremos el siguiente código.


/*!
=> GetData Historial v1.0.2
=> Copyright 2018 Daniel Abel | fb.com/danieI.abel (zkreations)
=> Licensed under MIT | github.com/zkreations/GetData/blob/master/LICENSE
*/.wjs-history__list,.wjs-history__list-element,.wjs-history__title,.wjs-history__title-url{background:0 0;padding:0;margin:0;border:0;list-style-type:none;box-shadow:0 0 transparent;font:inherit;text-decoration:none}.list-element__count,.list-element__date,.wjs-history__list-element{display:flex}.list-element__count,.list-element__date{align-items:center}.wjs-history__title::before{display:block;position:absolute;content:"";top:50%;width:100%;left:0;transform:translateY(-50%)}.wjs-history__title-url{display:inline-block;padding-right:1em;position:relative;z-index:1}.wjs-history__title{position:relative;margin-bottom:.5em}.list-element__count{padding:0 1em}.wjs-history__list{margin-bottom:1em}.list-element__title{display:block}.list-element__title,.wjs-history__title-url{transition:color .3s}.list-element__date svg{margin-right:.5em}@keyframes loading{from{transform:rotate(0)}to{transform:rotate(360deg)}}svg.wjs-history__loading{animation:loading infinite linear .5s;fill:rgba(0,0,0,.75)}
/*
=> Personalizar
*/
/* Cuerpo
--------------------------------------------*/
.wjs-history {
    font-size: 14px; /*tamaño de fuentes*/
}

/* Titulo (mes y año)
--------------------------------------------*/
.wjs-history__title-url {
    background-color: #ffffff; /*color de fondo*/
    color: rgba(0, 0, 0, 0.5); /*color*/
    font-weight: 700; /*grosor del texto*/
    font-size: 1.1em; /*tamaño de fuente*/
}
.wjs-history__title::before {
    border-top: 4px double #D9D9D9; /*decoracion del titulo*/
}
/* Lista
--------------------------------------------*/
.wjs-history__list {
    margin-bottom: 1.5em; /*Separacion entra listas*/
    background-color:rgba(222, 221, 218, 0.2); /*color de fondo*/
}
.wjs-history__list-element:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.05); /*color de fondo cada 1 elemento*/
}

/* Elementos de la lista
--------------------------------------------*/
.list-element__count {
    font-weight: 700; /*grosor del texto (dia)*/
    background: rgba(0, 0, 0, 0.1); /*color de fondo (dia)*/
    font-size: 1.1em; /*tamaño de fuente (dia)*/
}
.list-element__data {
    padding: 1em; /*relleno (datos)*/
}

/* Titulo del post
--------------------------------------------*/
.list-element__title {
    color: rgba(0, 0, 0, 0.75); /*color*/
    font-size: 1.1em; /*tamaño de fuente*/
    font-weight: 500; /*grosor del texto*/
}

/* Fecha del post
--------------------------------------------*/
.list-element__date svg {
    width: 16px; /*tamaño del icono*/
    fill: rgba(0, 0, 0, 0.4); /*color*/
}
.list-element__date {
    color: rgba(0, 0, 0, 0.4); /*color*/
    font-weight: 700; /*grosor del texto*/
    font-size: 12px; /*tamaño de fuente*/
}

No olvides presionar el botón "Aplicar" para que los cambios surtan efecto. Posteriormente volvemos a nuestro panel de administración, seleccionamos la pestaña "Páginas" y a continuación pulsamos sobre el botón "Página nueva":


Página nueva

Ya en el editor de entradas, cambiamos el editor a modo HTML y posteriormente pegamos el siguiente código como contenido:


<!-- Historial v1.0.2 | github.com/zkreations/GetData -->
<div id='wjs-history' data-blogid='{blogid}' data-apikey='{apikey}'>
   <svg class='wjs-history__loading' xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 50 50'><path d='M43.935 25.145c0-10.318-8.364-18.683-18.683-18.683-10.318 0-18.683 8.365-18.683 18.683h4.068c0-8.071 6.543-14.615 14.615-14.615s14.615 6.543 14.615 14.615h4.068z'></path></svg>
</div>
<script src='//cdn.rawgit.com/zkreations/GetData/master/labs/plugins/wjs-history/getdata_historial.min.js'></script>

Es obligatorio reemplazar {blogid} por el código de identificación de tu blog y {apikey} por tu clave de API. A continuación se explica cómo obtener ambos:


Obteniendo datos

{blogid}

Para obtener el código de identificación, simplemente revisa la barra de navegación, el código será la combinación numérica que se encuentra después de blogID= hasta la almohadilla #:


blog id historial api

{apikey}

Para conseguir facilmente la clave de API sigue los pasos de mi articulo Obtener API key para aplicaciones de Blogger.


Una vez reemplazados los datos correctamente, presiona el botón "Publicar", para que la página que acabamos de crear este disponible en el blog y listo.


Personalizar

Cómo acostumbro a hacer en mis aportes, he separado el codigo css funcional, del estético y también he dejado comentarios a lo largo de todo el código para que puedan saber lo que modifica cada cosa.


Eso a sido todo por ahora, si tienes alguna duda dejala en los comentarios, respondo a todos. Espero que este aporte les haya sido de utilidad, si fue asi, no olvides compartirlo en tus redes sociales.

Quizás te interese