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 en zkreations, mi amigo y miembro del staff José Gregorio Materany mi persona, hemos desarrollado un widget que te permitirá crear secciones 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.0.0
 * Copyright 2020 zkreations
 * Licensed under MIT (github.com/zkreations/wjs-sections/blob/master/LICENSE)
 */
/*! Core (No modificar) {{*/
LinkList201,.widget#LinkList201{background:0 0;margin:0;padding:0;position:relative;-webkit-box-shadow:0 0 transparent;box-shadow:0 0 transparent;outline:0;border:0;display:block}.wjs-section__more{display:inline-block}.wjs-section{font-size:14px;margin-left:-.5em;margin-right:-.5em;display:-ms-flexbox;display:-webkit-box;display:flex;-ms-flex-align:start;-webkit-box-align:start;align-items:start;-ms-flex-wrap:wrap;flex-wrap:wrap}.wjs1-card{padding-right:.5em;padding-left:.5em;padding-bottom:1em;width:100%}.wjs1-card__image{overflow:hidden;display:block;-webkit-transform:translateZ(0);transform:translateZ(0)}.wjs1-card__image img{width:100%;transition:-webkit-transform .3s;-webkit-transition:-webkit-transform .3s;-o-transition:transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;-webkit-transform:scale(1) rotate(0) translateZ(0);transform:scale(1) rotate(0) translateZ(0);will-change:transform}.wjs1-card__image:hover img{-webkit-transform:scale(1.05) rotate(-2deg) translateZ(0);transform:scale(1.05) rotate(-2deg) translateZ(0)}.wjs1-card__content{overflow:hidden}@media (min-width:576px){.wjs1-card{width:50%}}@media (min-width:768px){.wjs1-card{width:33.333333%}}/*! Material Design Spinner | codepen.io/zkreations/pen/JwjpMV */.circular{-webkit-animation:rotate 1.5s linear infinite;animation:rotate 1.5s linear infinite;height:84px;position:relative;width:84px}.circular .path{-webkit-animation:dash 1.5s ease-in-out infinite;animation:dash 1.5s ease-in-out infinite;cx:42px;cy:42px;fill:none;r:16.8px;stroke:#141414;stroke-dasharray:1%,200%;stroke-dashoffset:0;stroke-linecap:round;stroke-width:4}@-webkit-keyframes rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes dash{0%{stroke-dasharray:1%,200%;stroke-dashoffset:0}50%{stroke-dasharray:90%,200%;stroke-dashoffset:-35%}100%{stroke-dasharray:90%,200%;stroke-dashoffset:-124%}}@keyframes dash{0%{stroke-dasharray:1%,200%;stroke-dashoffset:0}50%{stroke-dasharray:90%,200%;stroke-dashoffset:-35%}100%{stroke-dasharray:90%,200%;stroke-dashoffset:-124%}}
/*}} Fin del core */

/*! Personalización */
/* Card
-------------------------------------*/
.wjs1-card__content {
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.05),0 1px 5px 0 rgba(0,0,0,.05),
                0 2px 3px -2px rgba(0,0,0,.4); /* sombra */
    border-radius: 4px; /* borde redondeado */
    background-color: #fff; /* color de fondo */
}
.wjs1-card__meta {
    padding: 1.5em; /* Naruto, digo relleno */
}
.wjs1-card__title {
    font-size: 1.2em; /* tamaño de los títulos */
}
.wjs1-card__title a {
    color: #262626; /* color de los títulos */
}
.wjs1-card__date {
    color: #AAA; /* color de la fecha */
    font-size: .9em; /* tamaño de los títulos */
}
.wjs1-card__snippet {
    padding-top: .5em; /* separación */
    color: #757575; /* color del resumen */
    font-size: 1.1em; /* tamaño de los títulos */
}
/* Botón "Mostrar todo"
-------------------------------------*/
.wjs-section__more {
     margin-top: 1rem; /* separación */
     padding: .8rem 1.5rem; /* relleno */
     background: #f1f1f1; /* color de fondo */
     font-size: 14px; /* tamaño del texto */
     font-weight: 400; /* densidad del texto */
     color: #757575; /* color */
     border-radius: 3px; /* borde redondeado */
}

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 cond='data:view.isHomepage' 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'/>
          <svg class='circular' xmlns='http://www.w3.org/2000/svg'><circle class='path'/></svg>
        </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.0.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 = {};
         var defaults = {
             homeUrl: window.location.protocol + '//' + window.location.hostname, // Url blog
             image: 'img/no-img-blogger.png', // Imagen por defecto
             className: '.wjs-section',
             snippet: 100, // Cantidad texto para el resumen
             imgSize: 'w300-h168-p-k-no-nu', // Cantidad texto para el resumen
         };
         //! Core (No modificar) {{
         var section = {'category': null,'max-results': 6,template:{default:'<div class="wjs1-card"><div class="wjs1-card__content"><div class="wjs1-card__header"><a class="wjs1-card__image" href="URL"><img src="IMG" /></a></div><div class="wjs1-card__meta"><h2 class="wjs1-card__title"><a href="URL">TITLE</a></h2><time class="wjs1-card__date">TIME</time><p class="wjs1-card__snippet">SNIPPET</p></div></div></div>',empty:'<p class="wjs1-alert">No se han encontrado entradas</p>'}};function forEach(items,callback){var i,item;for(i=0;item=items[i++];)if(false===callback.call(item,i,item))break;return items}function getCurrentData(element){var name,value;var obj={};for(name in section){value=element.getAttribute("data-"+name);if(value)obj[name]=value}return obj}function temp(content,data){var name;for(name in data)content=content.replace(new RegExp(name, "g"),data[name]);return content}function getLabel(element,data){var name;var category=data.category;var script=document.createElement("script");var src=defaults.homeUrl+"/feeds/posts/default?alt=json-in-script&callback=callbacks."+category.replace(/[^A-Z0-9]/ig, '');callbacks[category.replace(/[^A-Z0-9]/ig, '')]=function(json){var i,post;var html="";var entry=json.feed.entry;if(entry)for(i=0;post=entry[i++];){var content=post.content;var summary=post.summary;var body=content?content.$t:summary.$t;var img=post.media$thumbnail;var tempHtml=document.createElement("div");tempHtml.innerHTML=body;var imgHtml=tempHtml.querySelector("img");html+=temp(data.template,{IMG:(img?img.url:imgHtml?imgHtml.src:defaults.image).replace(/s\B\d{2,4}-c/,defaults.imgSize),TITLE:post.title.$t,TIME:(new Date(post.published.$t)).toLocaleDateString("es-ES",{month:"long",day:"2-digit"}),SNIPPET:body.replace(/<[^>]*>?/g,"").substring(0,defaults.snippet)+"...",URL:function(){var i,link;for(i=0;link=post.link[i++];)if(link.rel==="alternate")return link.href}})}else html+=section.template.empty;element.innerHTML=html};for(name in data)if(name!=="template")src+="&"+name+"="+data[name];script.src=src;document.body.appendChild(script)}forEach(document.querySelectorAll(defaults.className),function(index,element){var currentData=getCurrentData(element);if(currentData.category){if(!currentData["max-results"])currentData["max-results"]=section["max-results"];currentData.template=section.template["default"];getLabel(element,currentData)}});
         //!}} Fin del core
      //]]></script>
   </b:includable>
</b:widget>

Guardamos los cambios y listo. AHora ya puedes agregar todas las secciones que quieras, basado en etiquetas del blog.


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. Puedes agregar todas las secciones que quieras usando el mismo formato.


De momento 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 que estén buscando lo mismo. Gracias por pasar y leer.