Widget generador de secciones por etiquetas

generador de entradas por etiquetas widget para mostrar entradas por etiquetas

Demostración Repositorio Star

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.


He desarrollado un widget que te permite crear secciones con entradas de etiquetas en específicas. Se basa en el sistema que implemente por primera vez para mi plantilla kuro pero mejorado. Está versión tiene corregido los problemas presentes en Kuro, además de que al ser un widget independiente, se puede instalar en cualquier plantilla.


Instalar

Vamos a visitar nuestro panel de administración en Blogger, nos dirigimos a Temas > Personalizar > Opciones avanzadas > CSS Personalizado y en ese campo agregamos el siguiente código css:


/*!
* Widget: Wjs-Sections v1.0.2
* by zkreations
*/#LinkList101,.widget#LinkList101{background:0 0;margin:0;padding:0;position:relative;box-shadow:0 0 transparent;outline:0;border:0;display:block}.wjs-infoItems{margin-left:.5em;margin-right:.5em;padding:1.5em;width:100%;border-radius:3px;font-weight:500}.wjs-sections{font-size:14px;margin-left:-.5em;margin-right:-.5em;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:start;-ms-flex-wrap:wrap;flex-wrap:wrap}.wjs-card{padding-right:.5em;padding-left:.5em;padding-bottom:1em;width:100%}@media (min-width:576px){.wjs-card{width:50%}}@media (min-width:768px){.wjs-card{width:33.333333%}}.wjs-card__content{overflow:hidden}.wjs-card__time{padding-top:.75em;display:block;font-weight:500}.wjs-card__image{overflow:hidden;display:block;border-radius:4px 4px 0 0;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform:translateZ(0);transform:translateZ(0)}.wjs-card__image img{width:100%;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform:scale(1) rotate(0) translateZ(0);transform:scale(1) rotate(0) translateZ(0)}.wjs-card__image:hover img{-webkit-transform:scale(1.05) rotate(-2deg) translateZ(0);transform:scale(1.05) rotate(-2deg) translateZ(0)}
/*
=> Personalizacion
*/
.wjs-card__content {
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.04), 0 1px 5px 0 rgba(0,0,0,.05), 0 2px 1px -2px rgba(0,0,0,.2); /*=> Sombra*/
    border-radius: 3px; /*=> Bordes redondeados*/
    background-color: #fff; /*=> Color de fondo*/
}
.wjs-card__data {
    padding: 1.4em; /*=> Relleno*/
}
.wjs-card__title {
    font-size: 1.2em; /*=> Tamaño de los titulos*/
}
.wjs-card__title a {
    color: rgba(0, 0, 0, 0.75); /*=> Color de los titulos*/
}
.wjs-card__time {
    color: rgba(0, 0, 0, 0.4); /*=> Color de la fecha*/
}
.wjs-infoItems{
    background-color:#263238; /*=> Color de fondo del aviso*/
    color:#fff; /*=> Color de texto del aviso*/
}
.wjs-sections__more {
    color: #006064; /*=> Color de enlace "ver mas"*/
}

Presionamos el botón "Aplicar" de la esquina superior derecha para guardar los cambios. Ahora volvemos a "Temas", pero esta vez presionamos el botón "Editar HTML". Dentro del editor pulsamos CTRL + F y buscamos </b:section>, arriba de eso pegamos lo siguiente:


<b:widget id='LinkList101' cond='data:view.isHomepage' locked='false' title='Whale Sections' type='LinkList' version='1'>
   <b:includable id='main'>
      <b:loop values='data:links' var='i'>
         <div class='widget'>
           <h2><data:i.name/> <a class='wjs-sections__more' expr:href='+(data:blog.homepageUrl.canonical,"search/label/",data:i.target)' rel='nofollow'>Ver más</a></h2>
            <div class='widget-content'>
               <div class='wjs-sections' expr:data-wjslabel='data:i.target'>
                  <p class='wjs-infoItems'><b:eval expr='data:blog.isPrivateBlog ? "No disponible en blogs privado" : "Cargando"'/></p>
               </div><!-- .wjs-sections -->
            </div><!-- .widget-content -->
         </div><!-- .widget -->
      </b:loop>
      <b:with value='{postNum: 6, imageSize: "w300-h225-c", imageDefault: "https://i.imgur.com/6RxzlUm.png"}' var='options'>
         <script>//<![CDATA[
         //! Mini templating exclusivo de bling.js y zkreations.com | @copyright José Gregorio Materán (fb.com/JGMateran) | Editado por Daniel Abel (fb.com/danieI.abel)
         !function(){function t(){}function e(t,e){for(var i=0;i<t.length&&!1!==e.call(t[i],i,t[i]);i++);}function i(t){return"[object Array]"===l.call(t)}function n(t,r){var a="";return i(r)?e(r,function(e,i){a+=n(t,i)}):a=t.replace(/{([\s\S]+?)}/g,function(t,e){return r[e.trim()]}),a}var r=1,a={},l=a.toString,c=document.URL,o=/\/label\//.test(c)?"/-/"+c.match(/\/label\/[^?^]*/)[0].substring(7):"";t.f={},/*]]>*/t.h="<data:blog.homepageUrl.canonical/>",/*<![CDATA[*/t.b=['<div class="wjs-card"><div class="wjs-card__content"><a class="wjs-card__image" href="{url}"><img alt="{title}" src="{image}"/></a><div class="wjs-card__data"><h2 class="wjs-card__title"><a href="{url}">{title}</a></h2><time class="wjs-card__time" datetime="{timeISO}">{time}</time></div></div></div>'].join(""),/*]]>*/t.c={img:"<data:options.imageDefault/>",results:<data:options.postNum/>,imgSize:"<data:options.imageSize/>",/*<![CDATA[*/word:"wjs-sections",attr:"data-wjslabel"},e(document.querySelectorAll("."+t.c.word),function(i,a){var l,i="c"+r++,c=document.createElement("script"),u=t.h+"feeds/posts/default/-/"+a.getAttribute(t.c.attr);u+=o+"?alt=json-in-script&callback=zkreations.f."+i,(l=t.c.results)&&(u+="&max-results="+l),c.src=u,t.f[i]=function(i){var r=[];e(i.feed.entry,function(e,i){r.push({image:(i.media$thumbnail ? i.media$thumbnail.url : t.c.img).replace(/s72-c/,t.c.imgSize),title:i.title.$t,time:(new Date(i.published.$t)).toLocaleDateString("es-ES",{month:"long",day:"2-digit"}),timeISO:i.published.$t,url:function(){for(var t,e=0;t=i.link[e++];)if("alternate"===t.rel)return t.href}()})}),a.innerHTML=n(t.b,r)},document.body.appendChild(c)}),window.zkreations=t}();
         //]]></script>
      </b:with>
   </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 debajo del widget "Blog" o "Entradas del blog" ya que solo puede ser usado correctamente debajo o arriba de este. Finalmente presionamos el botón "Guardar cambios".


Opciones

Dentro del codigo del widget encontraras una etiqueta b:with que contiene parámetros los cuales puedes configurar a tu gusto:


<b:with value='{postNum: [number], imageSize: [string], imageDefault: [string]}' var='options'>

Los valores establecidos afectarán a todas las secciones generadas por el widget, En la siguiente tabla especifico lo que significan cada uno de ellos:


postNum [number] Cantidad de artículos de las secciones (obligatorio).
imageSize [string] Tipo de corte que se realizará en la imagen (obligatorio).
imageDefault [string] Imagen por defecto si la entrada no tiene imagen (opcional).

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 "Whale Sections", lo que nos mostrará lo siguiente:


editar el widget lista de enlaces

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":


elementos de la lista etiquetas

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.


Personalizar

El código css que copiamos y pegamos en el paso uno, contiene comentarios para que puedas entender que modifica cada cosa. Recomiendo modificar los estilos para adaptar las entradas al diseño de tu blog, ya que mejora la experiencia de usuario y visualmente se verá menos intrusivo.


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.