ZKreations
Beta
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Buenas noches amigos, en esta ocasión 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, la más reciente, que para no hacer el cuento largo, decidimos usarla porque tiene un rendimiento muy superior a los feeds basados en la versión 2.
Demostración
---------------------------------------------
Instalar
Ve a tu panel de administración en Blogger > Temas > Personalizar > Opciones avanzadas > CSS Personalizado, y pega el siguiente código.
Insertar CODE, HTML o PHP:
/*!=> 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*/
}Presiona "Aplicar" y ahora vuelve a tu panel de administración, seleccionamos la pestaña "Páginas" y a continuación pulsamos sobre el botón "Página nueva". Ya en el editor, da clic en "Editor HTML" y de contenido pega el siguiente código:
Insertar CODE, HTML o PHP:
<!-- 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:
BlogID
En la pestaña, échale un vistazo la barra de navegación, el código será una combinación numérica que se encuentra después de blogID= hasta la almohadilla #, ejemplo:
Apikey
Puedes obtener la clave de API sigue los pasos de mi articulo Obtener API key para aplicaciones de Blogger.
Una vez reemplazados los datos, pulsa el botón "Publicar" y listo. Es el primer complemento que desarrollamos con esta api, así que cualquier cosa no dudes en comentar. Si quieres saber mas al respecto, te recomiendo visitar mi publicación original en zkreations. Gracias por pasar.
