Hola a todos, en este nuevo artículo les quiero compartir un complemento para mostrar una lista de entradas ordenadas alfabéticamente para blogger, este complemento ha sido desarrollado con la api de blogger, por lo cual tendremos un excelente rendimiento a la hora de mostrar las entradas.

Ver demo Ver repositorio

Caracteristicas

  • Desarrollado en vanillaJS (sin plugins ni complementos)
  • Peso ligero (3kb en su versión minificada)
  • api blogger para extraer las entradas de un blog de blogger
  • Entre otras...

Instalación

Antes que nada, debemos agregar el css del complemento, por lo cuál nos iremos a nuestro panel de administración, y buscamos: Temas » Personalizar » Opciones avanzadas » CSS Personalizado y agregamos el siguiente css:

/*! azList v1.0.0 | github.com/Karasu-themes/krs-azlist-blogger */
.krs-azlist{width:100%;font-family:"Roboto";font-size:16px}.krs-azlist__headline{background:#f5f5f5;color:#263238;padding:0 16px;line-height:56px;font-size:18px;text-align:left;font-weight:600;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.krs-azlist__count{display:block;font-size:12px;font-weight:500;opacity:.5}.krs-azlist__loading{background:#f5f5f5;color:#263238;padding:16px;font-size:14px;font-weight:500}.krs-azlist__toggle{width:24px;height:24px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;opacity:.5;cursor:pointer;-webkit-transition:all 0.15s ease-in-out;transition:all 0.15s ease-in-out}.krs-azlist__toggle:before{content:"";border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #000}.krs-azlist__toggle.actived{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.krs-azlist__row{margin-bottom:8px}@-webkit-keyframes itemActived{0%{-webkit-transform:translateY(-10px);transform:translateY(-10px);opacity:0}to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes itemActived{0%{-webkit-transform:translateY(-10px);transform:translateY(-10px);opacity:0}to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}.krs-azlist__items{margin:0;padding:16px 0}.krs-azlist__items.isRounded li a img{border-radius:4px}.krs-azlist__items.isEllipses li a img{border-radius:50%}.krs-azlist__items li{list-style:none;border-bottom:1px solid rgba(0, 0, 0, .1)}.krs-azlist__items li:last-child{border-bottom:0}.krs-azlist__items li a{padding:16px;font-size:14px;color:#263238;text-decoration:none;font-weight:500;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transition:all 0.15s;transition:all 0.15s}.krs-azlist__items li a:hover{color:#283593}.krs-azlist__items li a img{width:48px;height:48px;-o-object-fit:cover;object-fit:cover;margin-right:8px;-webkit-box-shadow:0 3px 5px -2px rgba(0, 0, 0, .3);box-shadow:0 3px 5px -2px rgba(0, 0, 0, .3)}

Ya agregado el css, nos iremos a la pestaña Páginas de nuestro panel de administración, allí crearemos una nueva página y agregaremos el siguiente código:

<!-- azList v1.0.0 | github.com/Karasu-themes/krs-azlist-blogger -->
<div class="krs-azlist"><div class="krs-azlist__loading">cargando entradas...</div></div>
<script src='//karasu-themes.github.io/cdn/azlist/krs-azlist.min.js'></script>
<script>
var azList = new azList({
blogId: "blog_id", //Id del blog de blogger
apiKey: "api_key" //Api key de blogger (puedes obtenerla en: console.developers.google.com/projectselector/apis/credentials)
});
</script>

Guardamos los cambios y listo. con eso ya debería de estar instalado nuestro nuevo complemento.

Obtener id del blog y api key

Para conseguir el id de nuestro blog, debemos irnos a nuestro panel de administración y fijarnos en la url del navegador, debería de tener el siguiente aspecto:

https://www.blogger.com/blogger.g?blogID=14607093160910XXXXX#allposts

donde está marcado, es el id de nuestro blog.

Para obtener el api_key, debemos irnos al siguiente enlace y crear nuestra credencial. Si te dificulta hacerlo, te recomiendo este artículo de zkreations para obtener dicha clave.


Hasta aquí el post, espero te haya sido de ayuda este complemento, gracias a zkreations y su complemento wjs-history, el cuál me inspiró a crear este complemento. Si tienes dudas, sugerencias y/o quieres reportar algún error, no dudes en hacerlo. Saludos y hasta pronto.