generador de entradas por etiquetas widget para mostrar entradas por etiquetas

Demo en Codepen

En Blogger no tenemos la opciones de cargar entradas con etiquetas específicas, tampoco podemos crear secciones con el mismo filtro, por ello nos pusimos manos a la obra y desarrollamos un widget que te permitirá crear secciones de entradas en Blogger.


Contenido


Instalar

Primero vamos a agregar el codigo CSS, para ello ve a Temas Personalizar Opciones avanzadas Agregar CSS y pega lo siguiente:


/*!
 * wjs-section v2.1.0
 * Copyright 2018 zkreations
 * Daniel Abel M. (fb.com/danieI.abel)
 * Licensed under MIT (github.com/zkreations/wjs-sections/blob/master/LICENSE)
 */
/*! Core (No modificar) {{*/
.widget#LinkList201{
   background: none;
   margin:0;
   padding:0;
   box-shadow: none;
   outline:0;
   border:0;
}
.wjs-section__more {display: inline-block;}
.stns-title, .stns-image, .stns-image img {display: block;}
.stns-content {overflow: hidden}
.wjs-section {
   display: flex;
   flex: 1 0 100%;
   flex-wrap: wrap;
   font-size: 14px;
   margin-top: calc(var(--wjs-gutter-y) * -1);
   margin-left: calc(var(--wjs-gutter-x) / -2);
   margin-right: calc(var(--wjs-gutter-x) / -2);
}
.stns-alert,
.stns-card {
   flex-shrink: 0;
   width: 100%;
   max-width: 100%;
   flex: 0 0 auto;
   padding-right: calc(var(--wjs-gutter-x) / 2);
   padding-left: calc(var(--wjs-gutter-x) / 2);
   margin-top: var(--wjs-gutter-y);
}
@media (min-width:376px) {.stns-card {width: 50%;}}
@media (min-width:576px) {
   .stns-card {width: 33.333333%}
   .wjs-section {font-size: 16px;}
}
/*! Personalización */
/* Estructura
-----------------------------------------*/
.wjs-section {
   --wjs-gutter-x: 1rem; /* Separacion orizontal */
   --wjs-gutter-y: 1rem; /* Separacion vertical */
}
/* Cuerpo
-----------------------------------------*/
.stns-content {
   box-shadow: 0 3px 6px -2px rgba(0, 0, 0, 0.25); /* sombra */
   border-radius: 4px; /* bordes redondeados */
}
/* Contenedor de datos
-----------------------------------------*/
.stns-meta {
   padding: 1.2em; /* relleno */
   background-color: #fff; /* color de fondo */
}
/* Titulo
-----------------------------------------*/
.stns-title {
   font-size: 1em; /* tamaño del título */
   margin-bottom: .25em; /* separación */
   color: #464646; /* color del titulo */
   font-weight: 500; /* densidad del texto */
}
/* Fecha
-----------------------------------------*/
.stns-date {
   font-size: .9em; /* tamaño del texto */
   color: #BBBBBB; /* color de la fecha */
}
/* Resumen
-----------------------------------------*/
.stns-snippet {
   margin-top: .5em; /* separación */
   color: #757575; /* color del texto */
}
/* Boton "Mostrar todo"
-------------------------------------*/
.wjs-section__more {
   margin-top: 1.5rem; /* Separacion */
   padding: .8rem 1.5rem; /* relleno */
   background-color: #f1f1f1; /* color de fondo */
   font-size: 1em; /* tamaño del texto */
   font-weight: 500; /* densidad del texto */
   color: #757575; /* color del texto */
   border-radius: 4px; /* bordes redondeados */
}

Presiona el botón "Aplicar" para guardar los cambios. Ahora vuelve a Temas Editar HTML, busca <b:widget id='Blog1'> (el widget de Entradas del blog) y arriba de eso pega el siguiente código:


<b:widget id='LinkList201' title='WJS Sections' type='LinkList'>
   <b:includable id='main'>
      <b:loop values='data:links' var='section'>
        <b:with expr:value='"{" + data:section.target + "}"' var='category'>
          <div class='widget'>
            <b:include name='sections-title'/>
            <b:include name='content'/>
          </div>
        </b:with>
      </b:loop>
      <b:include name='js'/>
    </b:includable>
   <b:includable id='sections-title'>
      <b:tag expr:name='data:widgets ? "h3" : "h2"' class='widget-title'>
        <span class='widget-name'><data:section.name/></span>
      </b:tag>
   </b:includable>
   <b:includable id='content'>
      <div class='widget-content'>
        <div class='wjs-section' expr:data-category="data:category.tag">
          <b:attr cond='data:category.results' name='data-max-results' expr:value='data:category.results'/>
          <p class="stns-alert">Cargando entradas...</p>
        </div>
        <a class='wjs-section__more' expr:href='+("/search/label/",data:category.tag)'>
          <data:messages.showAll/>
        </a>
      </div><!-- .widget-content -->
   </b:includable>
   <b:includable id='js'>
      <script>//<![CDATA[
         /*!
          * wjs-section v2.1.0
          * Copyright 2018 zkreations
          * Developed by José Gregorio (fb.com/JGMateran)
          * Licensed under MIT (github.com/zkreations/wjs-sections/blob/master/LICENSE)
          */
         'use strict';
         var callbacks = {},
             defaults = {
                homeUrl: window.location.protocol + '//' + window.location.hostname, // Url blog
                image: 'img/no-img-blogger.png', // Imagen por defecto
                className: '.wjs-section',
                localeDate: 'es-ES', //Idioma
                snippet: 60, // Cantidad texto para el resumen
                imgSize: 'w300-h240-c', // Cantidad texto para el resumen
         };
         //! Core (No modificar) {{
         function forEach(e,t){var a,s;for(a=0;(s=e[a++])&&!1!==t.call(s,a,s););return e}function getCurrentData(e){var t,a,s={};for(t in section)a=e.getAttribute("data-"+t),a&&(s[t]=a);return s}function temp(e,t){var a;for(a in t)e=e.replace(new RegExp(a,"g"),t[a]);return e}function getLabel(e,t){var a,s=t.category,n=s.replace(/[^A-Z0-9]/gi,""),r=document.createElement("script"),l=defaults.homeUrl+"/feeds/posts/default?alt=json-in-script&callback=callbacks."+n;callbacks[n]=function(a){var s,n,r="",l=a.feed.entry;if(l)for(s=0;n=l[s++];){var c=n.content,i=n.summary,o=c?c.$t:i.$t,d=n.media$thumbnail,u=document.createElement("div");u.innerHTML=o;var m=u.querySelector("img");r+=temp(t.template,{IMG:(d?d.url:m?m.src:defaults.image).replace(section.expReg,defaults.imgSize),TITLE:n.title.$t,TIME:new Date(n.published.$t).toLocaleDateString(defaults.localeDate,{month:"long",day:"2-digit"}),SNIPPET:o.replace(/<[^>]*>?/g,"").substring(0,defaults.snippet)+"...",URL:function(){var e,t;for(e=0;t=n.link[e++];)if("alternate"===t.rel)return t.href}})}else r+=section.template.empty;e.innerHTML=r};for(a in t)"template"!==a&&(l+="&"+a+"="+t[a]);r.src=l,document.body.appendChild(r)}var section={expReg:/[swh]\d{2,4}(?:-[swh]\d{2,4})?(?:-c)?/,category:null,"max-results":6,template:{"default":'<div class="stns-card"><div class="stns-content"><div class="stns-header"><a class="stns-image" href="URL"><img src="IMG" /></a></div><div class="stns-meta"><a class="stns-title" href="URL">TITLE</a><time class="stns-date">TIME</time><p class="stns-snippet">SNIPPET</p></div></div></div>',empty:'<p class="stns-alert">No se han encontrado entradas</p>'}};forEach(document.querySelectorAll(defaults.className),function(e,t){var a=getCurrentData(t);a.category&&(a["max-results"]||(a["max-results"]=section["max-results"]),a.template=section.template["default"],getLabel(t,a))});
         //!}} Fin del core
      //]]></script>
   </b:includable>
</b:widget>

Guardamos los cambios y listo.


Modo de uso

Para agregar una sección, ve a la pestaña "Diseño" del panel de administración de blogger, edita el widget "WJS Sections" y agrega el nombre de la sección, la etiqueta y la cantidad de entradas:


secciones

En el campo "Nombre del sitio" escribes el nombre de la sección, mientras que en "Url del sitio", escribes el nombre de la etiqueta y la cantidad de entradas en formato JSON, aqui un ejemplo del codigo necesario:


tag: "Viajes", results: 10

Presta mucha atención a la coma y los espacios, ya que si no se escribe correctamente la sección no se generará. Guardamos los cambios y listo.


Opciones

La variable defaults contiene opciones que puedes modificar. La siguiente tabla explica las opciones:


Opción Tipo Descripcion
homeUrl string Enlace de la página principal. Debe corresponder al id del post
image image Url de la imagen por defecto. Se usa cuando no existen imágenes en el post
localeDate string Idioma y localidad
snippet number Cantidad de texto para el resumen
imgSize string Parámetros para el tamaño de las imágenes
className string Clase del contenedor detonante

Conclusion

Eso ha sido todo, si tienes alguna duda déjala en los comentarios y no olvides compartir este articulo, ya que eso me ayuda mucho y además ayudarás a más personas. Gracias por pasar y leer.