Widget generador de secciones por etiquetas

diciembre 24, 2018

widget para mostrar entradas por etiquetas

En Blogger no tenemos la opciones de cargar entradas solo de ciertas etiquetas, peor aun, tampoco podemos crear secciones con dicho filtro, por ello me dispuse a crear un gadget para esa labor.

Mi amigo y miembro del staff José Gregorio Materan hace tiempo programó un script para mí, que pretendía usar de forma exclusiva, sin embargo, el código es tan bueno que lo utilice de base para crear la versión 2 del widget generador de secciones, que ahora se instala en un solo paso si tienes una de mis plantillas.

Instalar en Anime.xml

Ve a tu panel de administración en Blogger, dirígete a Temas > Editar HTML y busca el siguiente código:


<b:section id='Blog'>

Debajo de eso pega el siguiente widget:


<b:widget cond='data:view.isHomepage' id='LinkList201' locked='false' title='WJS Sections' type='LinkList' version='1'>
   <b:includable id='main'>
      <b:loop values='data:links' var='i'>
         <div class='widget'>
            <h3 class='widget-title'><data:i.name/></h3>
            <a class='wjs-section__more widget-title' expr:href='+("/search/label/",data:i.target)' rel='nofollow'><data:messages.showAll/></a>
            <div class='widget-content'>
               <div class='wjs-section items row' expr:data-category='data:i.target' data-max-results='6'>
                  <b:class cond='data:skin.vars.config_ta_card' expr:name='data:skin.vars.config_ta_card'/>
                  <svg class='circular' xmlns='http://www.w3.org/2000/svg'><circle class='path'/></svg>
               </div><!-- .wjs-section -->
            </div><!-- .widget-content -->
         </div><!-- .widget -->
      </b:loop>
      <link href='//cdn.jsdelivr.net/gh/zero20659/danielhost@1/labs/spinner.min.css' rel='stylesheet'/>
      <style>/*<![CDATA[*/
         .wjs-section__more {line-height: 1.2;float: right;transition: background .3s}
         .wjs-section__more:hover {background-color: #212121;color: #fff}
      /*]]>*/</style>
      <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', // Recorte
         };
         var section = {
             'category': null,
             'max-results': 6,
             template:{
             //]]>
             <b:with value='data:skin.vars.config_post_column' var='isColumn'>
                 default:"<div class='card'><b:class expr:name='data:isColumn == 2 ? "col-6-sm" : (data:isColumn == 3 ? "col-4-md col-6-sm" : (data:isColumn == 4 ? "col-3-lg col-4-md col-6-sm" : (data:isColumn == 5 ? "col-5ta-xl col-3-lg col-4-md col-6-sm" : (data:isColumn == 6 ? "col-2-xl col-3-lg col-4-md col-6-sm" : "col-12"))))'/><div class='card__content'><a class='card__image flex-none' href='URL'><img src='IMG'/><i class='card__more fas fa-search'/></a><div class='card__data'><h2 class='skin-font card__title card__space'><a class='skin-color-hover' href='URL'>TITLE</a></h2><b:if cond='data:layout.showSnippet'><p class='card__descripcion card__space'>SNIPPET</p></b:if><b:if cond='data:layout.showMeta'><time class='meta__item meta__space published skin-color-text'><i class='far fa-clock'/> TIME</time></b:if></div></div></div>",
             </b:with>
             empty:"<div class='col-12'><p class='alert'><data:messages.theresNothingHere/></p></div>"
             }//<![CDATA[
         };
         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;callbacks[category]=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)}});
          //]]>
      </script>
   </b:includable>
</b:widget>

Guarda los cambios y listo. No se necesita agregar css ya que el widget utilizará los estilos y las opciones de la plantilla. Si lo hiciste bien, al agregar una etiqueta el resultado será como este:

Cualquier plantilla

Para otras plantillas es necesario Agregar CSS, para ello ve a Temas > Personalizar > Opciones avanzadas > Agregar CSS y pega lo siguiente:


/*!
 * wjs-section v2.0.0
 * Copyright 2018 zkreations
 * Licensed under MIT (github.com/zkreations/wjs-sections/blob/master/LICENSE)
 */#LinkList201,.widget#LinkList201{background:0 0;margin:0;padding:0;position:relative;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:flex;-ms-flex-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;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%}}

/*
=> Personalizacion
*/

/* 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 titulos */
}
.wjs1-card__title a {
    color: #262626; /*=> Color de los titulos */
}
.wjs1-card__date {
    color: #AAA; /*=> Color de la fecha */
    font-size: .9em; /*=> Tamaño de los titulos */
}
.wjs1-card__snippet {
    padding-top: .5em; /*=> Separacion */
    color: #757575; /*=> Color del resumena */
    font-size: 1.1em; /*=> Tamaño de los titulos */
}

/* Boton "Mostrar todo"
-------------------------------------*/
.wjs-section__more {
     margin-top: 1rem;
     padding: .8rem 1.5rem;
     background: #f1f1f1;
     font-size: 14px;
     font-weight: 400;
     color: #757575;
     border-radius: 3px;
}

Presionamos el botón "Aplicar" de la esquina superior derecha para guardar los cambios. Ahora volvemos a Temas > Editar HTML y buscamos </b:section>, arriba de eso pegamos lo siguiente:


<b:widget cond='data:view.isHomepage' id='LinkList201' locked='false' title='WJS Sections' type='LinkList' version='1'>
   <b:includable id='main'>
      <b:loop values='data:links' var='i'>
         <div class='widget'>
            <h3 class='widget-title'><data:i.name/></h3>
            <div class='widget-content'>
               <div class='wjs-section items row' expr:data-category='data:i.target' data-max-results='6'>
                  <svg class='circular' xmlns='http://www.w3.org/2000/svg'><circle class='path'/></svg>
               </div><!-- .wjs-section -->
               <a class='wjs-section__more' expr:href='+("/search/label/",data:i.target)' rel='nofollow'><data:messages.showAll/></a>
            </div><!-- .widget-content -->
         </div><!-- .widget -->
      </b:loop>
      <link href='//cdn.jsdelivr.net/gh/zero20659/danielhost@1/labs/spinner.min.css' rel='stylesheet'/>
      <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
         };
         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;callbacks[category]=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)}});
          //]]>
      </script>
   </b:includable>
</b:widget>

Guardamos los cambios y por último vamos a la pestaña "Diseño", buscamos el widget "Whale Sections" y lo vamos a mover cerca del widget "Blog/Entradas del blog" ya que solo puede ser usado correctamente debajo o arriba de este. Finalmente presionamos el botón "Guardar cambios".

Opciones

Agregar elementos a la lista

El widget no será visible hasta no agregar al menos un elemento. Para ello vamos a "Diseño" nuevamente y editamos el widget "WJS Sections", lo que nos mostrará lo siguiente:

En el campo "Nuevo nombre del sitio" se escribe el nombre que tendrá tu sección, mientras que en el campo "Url del sitio nuevo" ingresamos el nombre exacto de la etiqueta de la cual queremos generar entradas. Al reemplazar los datos precionamos el boton "Agregar vinculo":

Este lo podemos repetir las veces que sean necesarias para crear nuevas secciones, sin embargo ten en cuenta que por cada sección, el widget generará una consulta hacia un feeds de Blogger correspondiente a la etiqueta ingresada. Tener demasiadas consultas bajará el rendimiento de tu blog.

Cambiar número de entradas

Por defecto cada sección tendrá 6 entradas. Si quieres cambiar el número de entradas busca en el widget data-max-results='6' y cambia "6" por el número de entradas a mostrar deseado.

Personalizar

Si instalaste el widget en una de mis plantillas, todas las opciones de personalización que incluye dicha plantilla afectan también a las secciones. En caso de usar el método para "Cualquier plantilla", edita el css que se encuentra comentado bajo el nombre "Personalizar" para darle el estilo deseado.

De momento eso a 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.