

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:

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.