Convertir las Entradas Populares en un Slider de Publicaciones Populares con Navegación de Miniaturas
Tutorial Entradas Populares en Slider con Miniaturas
Aprende a transformar el gadget de entradas populares de Blogger en un slider moderno con navegación por miniaturas
Introducción
Después de haber presentado varios tutoriales de entradas populares para Blogger, hoy les traigo otra alternativa: convertir sus entradas populares en un Slider de Publicaciones Populares con Navegación de Miniaturas.
Este diseño es diferente a los anteriores que he publicado. Lo mejor de todo es que es completamente responsive, funcionando perfectamente tanto en computadoras de escritorio como en dispositivos móviles.
Nota Importante
Este tutorial es actualizado a la fecha, no tendrá ningún inconveniente al momento de su instalación.
Garantizado y completamente funcionalA continuación puede ver su demostración en el siguiente blog
Antes de empezar este tutorial, se recomienda realizar una copia de seguridad de su blog de Blogger, o primero practicar en un blog de ejemplos. Si no sabe cómo realizar una copia de seguridad de su blog, puede seguir las instrucciones del siguiente enlace:
Ayudadeblogger.com no se responsabiliza, si usted no realizo correctamente la inserción del código, para más detalles específicos, puede visitar el siguiente enlace:
Implementación paso a paso
Accede a tu panel de Blogger
Diríjase a Blogger.
Navega al editor de temas
En el menú lateral, haz clic en "Tema" para acceder a las opciones de personalización de tu plantilla.
Edita el HTML
Haz clic en "Editar HTML" .
Localiza la etiqueta body
Busca la etiqueta <body> en el código (puedes usar Ctrl+F para buscarla).
Ahora busca el lugar donde ubicar tu nuevo Gadget de Entradas populares, inserta las siguientes lineas de codigo:
<b:section class='gadget-pop' id='gadget-pop' preferred='yes' showaddelement='yes'>
<b:widget id='PopularPosts6' locked='false' title='Entradas populares Modernas' type='PopularPosts' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='numItemsToShow'>10</b:widget-setting>
<b:widget-setting name='showThumbnails'>true</b:widget-setting>
<b:widget-setting name='showSnippets'>true</b:widget-setting>
<b:widget-setting name='timeRange'>ALL_TIME</b:widget-setting>
</b:widget-settings>
<b:includable id='main' var='this'>
<b:if cond='data:posts and data:posts.length > 0'>
<div class='pp-slider-container' expr:id='"pp-slider-" + data:widget.instanceId'>
<div class='pp-slider-content-wrap'>
<!-- Contenedor para la publicación principal (columna izquierda) -->
<div class='pp-main-feature-post'>
<div class='pp-slide-image-area'>
<a class='pp-slide-image-link' href='javascript:void(0)'>
<img alt='' class='pp-slide-image' loading='lazy' src=''/>
<div class='pp-slide-author-avatar-overlay'>
<img alt='Author' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVGVf-caKSV2T2v3UDcJS972LBkP13PO7IV3f47YROYZCigGNuD9UXWYQuMtndphuv8DDoZW89o-Dg9QMco0XkGV9hb4AwHF6MTeGga2p8YCMQn-92W0zTJgcjSIXhnmxfUx002G3Zc7foL-Qrdn5azS3QqjwJ6Q-qt3tL9CUwaBJ40W1UDnGr86hK8Z6a/s200/avatar-ai.png'/>
</div>
</a>
</div>
<div class='pp-slide-text-overlay'>
<h3 class='pp-slide-title'><a href='javascript:void(0)'/></h3>
<p class='pp-slide-snippet'/>
<div class='pp-slide-meta'>
<span class='pp-meta-author'>
<img alt='Author' class='pp-meta-author-avatar' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVGVf-caKSV2T2v3UDcJS972LBkP13PO7IV3f47YROYZCigGNuD9UXWYQuMtndphuv8DDoZW89o-Dg9QMco0XkGV9hb4AwHF6MTeGga2p8YCMQn-92W0zTJgcjSIXhnmxfUx002G3Zc7foL-Qrdn5azS3QqjwJ6Q-qt3tL9CUwaBJ40W1UDnGr86hK8Z6a/s200/avatar-ai.png'/>
<span class='author-name'/>
</span>
<span class='pp-meta-date'>
<!-- SVG de Calendario Estándar -->
<svg viewBox='0 0 24 24'><path d='M19,19H5V8H19M16,1V3H8V1H6V3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3H18V1M17,10H7V12H17V10Z'/></svg>
<time class='pp-formatted-date' datetime=''/>
</span>
<span class='pp-meta-comments'>
<!-- SVG de Comentarios Estándar -->
<svg viewBox='0 0 24 24'><path d='M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4V4c0-1.1-.9-2-2-2zm0 14H4V4h16v12z'/></svg>
<span class='num-comments'/>
</span>
</div>
</div>
</div>
<!-- Contenedor para el navegador de miniaturas (columna derecha) -->
<div class='pp-thumbnail-navigator'>
<div class='pp-small-post-list'>
<!-- Los elementos se rellenarán aquí con JavaScript -->
</div>
</div>
</div>
<!-- Contenedor oculto para que JavaScript pueda extraer los datos de los posts -->
<div class='pp-raw-posts-data' style='display:none;'>
<b:loop values='data:posts' var='post'>
<div class='pp-post-item-data' expr:data-author-name='data:post.author.name' expr:data-author-photo='data:post.author.authorPhoto.image' expr:data-comments-count='data:post.numberOfComments' expr:data-date='data:post.date.iso8601' expr:data-featured-image='data:post.featuredImage' expr:data-snippet='data:post.snippets.short' expr:data-title='data:post.title' expr:data-url='data:post.url'/>
</b:loop>
</div>
</div> <!-- /pp-slider-container -->
<style>
/* Base del contenedor del slider */
.pp-slider-container {
position: relative;
max-width: 100%;
margin: 2em auto;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
background: none;
border-radius: 20px;
box-sizing: border-box;
overflow: hidden;
box-shadow: 0 15px 35px rgba(43,64,117,.1);
}
.pp-slider-content-wrap {
display: grid;
grid-template-columns: 2fr 1fr;
background-color: #f7f9fc;
border-radius: 16px;
overflow: hidden;
min-height: 450px;
}
/* Columna Izquierda: Publicación Principal Grande */
.pp-main-feature-post {
position: relative;
overflow: hidden;
min-height: 100%;
background-color: #fff;
border-radius: 12px 0 0 12px;
}
.pp-main-feature-post .pp-slide-image-area {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
z-index: 0;
}
.pp-main-feature-post .pp-slide-image {
width: 100%; height: 100%; object-fit: cover; display: block;
filter: brightness(0.7);
transition: filter 0.3s ease;
}
.pp-main-feature-post .pp-slide-image-link:hover .pp-slide-image {
filter: brightness(0.85);
}
.pp-main-feature-post .placeholder-bg {
background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
filter: none;
}
.pp-main-feature-post .pp-slide-author-avatar-overlay {
position: absolute;
bottom: 170px;
left: 50%;
transform: translateX(-50%);
width: 70px; height: 70px;
border-radius: 50%;
overflow: hidden;
border: 5px solid #fff;
box-shadow: 0 4px 12px rgba(0,0,0,.25);
z-index: 2;
background-color: #fff;
display: none;
}
.pp-main-feature-post .pp-slide-author-avatar-overlay img {
width: 100% ;
height: 100%;
object-fit: cover;
display: block;
}
.pp-main-feature-post .pp-slide-text-overlay {
position: absolute;
bottom: 0; left: 0; right: 0;
background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 100%);
color: #fff;
padding: 25px 30px;
min-height: 150px;
display: flex; flex-direction: column; justify-content: flex-end;
z-index: 1;
}
.pp-main-feature-post .pp-slide-title {
font-size: 1.4rem; font-weight: 700; margin: 0 0 10px; line-height: 1.3;
color: #ffffff;
}
.pp-main-feature-post .pp-slide-title a {
text-decoration: none; color: #fff; transition: color .3s ease;
}
.pp-main-feature-post .pp-slide-title a:hover { color: #4dabf7; }
.pp-main-feature-post .pp-slide-snippet {
font-size: 1rem; color: rgba(255, 255, 255, 0.9); line-height: 1.6;
margin: 0 0 15px; overflow: hidden; display: -webkit-box;
-webkit-line-clamp: 3; -webkit-box-orient: vertical;
border-left: 4px solid #4dabf7; padding-left: 15px; font-style: italic;
}
.pp-main-feature-post .pp-slide-meta {
display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px;
font-size: .65rem; color: rgba(255, 255, 255, 0.85);
margin-top: 15px; padding-top: 15px;
border-top: 1px solid rgba(255, 255, 255, 0.3);
}
.pp-main-feature-post .pp-meta-author,
.pp-main-feature-post .pp-meta-date,
.pp-main-feature-post .pp-meta-comments {
display: inline-flex; /* CORREGIDO: Usar inline-flex para alinear el SVG y el texto */
align-items: center;
gap: 6px;
color: #fff; /* Asegura el color blanco */
}
/* Eliminada la regla extra .pp-meta-comments { display: inline; } que estaba causando el problema */
.pp-main-feature-post .pp-meta-author-avatar {
width: 24px;
height: 24px;
border-radius: 50%;
object-fit: cover;
border: 2px solid #fff;
display: block;
flex-shrink: 0; /* Para evitar que se comprima si hay poco espacio */
}
.pp-main-feature-post .pp-meta-svg, /* Selector más específico para el SVG principal */
.pp-small-post-meta svg { /* Selector para los SVGs en las miniaturas */
width: 16px; height: 16px; fill: currentColor; opacity: 0.9;
}
/* Eliminada la regla redundante .pp-meta-date svg y la regla genérica .pp-small-post-meta svg se ha movido/unificado */
.pp-meta-comments svg {
width: 14px;
height: 14px;
fill: #adb5bd;
}
/* Columna Derecha: Navegador de Miniaturas */
.pp-thumbnail-navigator {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border-radius: 0 12px 12px 0;
padding: 20px;
display: flex;
flex-direction: column;
}
.pp-small-post-list {
display: flex;
flex-direction: column;
gap: 15px;
height: 100%;
justify-content: space-between;
}
.pp-small-post-item {
background-color: #fff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
transition: all 0.3s ease;
border: 1px solid #e9ecef;
}
.pp-small-post-item.active {
background-color: #e7f5ff;
border-color: #4dabf7;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(77, 171, 247, 0.2);
}
.pp-small-post-item:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}
.pp-small-post-link {
display: flex;
align-items: center;
padding: 15px;
text-decoration: none;
color: #2c3e50;
height: 100%;
transition: all 0.3s ease;
}
.pp-small-post-image-wrap {
flex-shrink: 0;
width: 70px;
height: 70px;
border-radius: 10px;
overflow: hidden;
margin-right: 15px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.pp-small-post-image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.3s ease;
}
.pp-small-post-link:hover .pp-small-post-image {
transform: scale(1.05);
}
.placeholder-small-bg {
background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
width: 100%; height: 100%;
}
.pp-small-post-content {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.pp-small-post-title {
font-size: 0.75rem;
font-weight: 600;
margin: 0 0 8px;
line-height: 1.4;
color: #2c3e50;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.pp-small-post-link:hover .pp-small-post-title {
color: #4dabf7;
}
.pp-small-post-meta {
font-size: 0.75rem;
color: #6c757d;
display: flex;
align-items: center;
gap: 8px;
}
.pp-main-feature-post .pp-meta-date svg,
.pp-small-post-meta svg {
width: 14px;
height: 14px;
fill: #adb5bd;
}
.pp-small-meta-author { display: none; }
/* Media Queries para Responsividad */
@media (max-width:860px){
.pp-slider-container { max-width: 100%; padding: 0 10px; }
.pp-slider-content-wrap {
grid-template-columns: 1fr;
border-radius: 12px;
min-height: auto;
}
.pp-main-feature-post {
border-radius: 12px 12px 0 0;
min-height: 300px; /* Mantengo tu ajuste */
}
.pp-main-feature-post .pp-slide-author-avatar-overlay { bottom: 130px; width:60px; height:60px; border-width: 4px; } /* Mantengo tu ajuste */
.pp-main-feature-post .pp-slide-text-overlay { padding:20px; min-height: unset; }
.pp-main-feature-post .pp-slide-title { font-size:1.4rem; }
.pp-main-feature-post .pp-slide-snippet { font-size:.9rem; }
.pp-thumbnail-navigator {
padding: 15px;
border-radius: 0 0 12px 12px;
}
.pp-small-post-list {
flex-direction: column;
gap: 10px;
padding: 0;
justify-content: space-between; /* Volvemos a space-between para distribuir los items */
}
.pp-small-post-item {
flex-basis: auto;
max-width: unset;
padding: 0;
}
.pp-small-post-link { flex-direction: row; text-align: left; padding: 10px; }
.pp-small-post-image-wrap { margin-right: 15px; margin-bottom: 0; width: 50px; height: 50px; }
.pp-small-post-title { font-size: 0.9rem; -webkit-line-clamp: 2; margin-bottom: 3px;}
.pp-small-post-meta { font-size: 0.75rem; justify-content: flex-start; }
}
@media (max-width:600px){
.pp-slider-container{padding: 0 5px;}
.pp-slider-content-wrap { border-radius: 10px; }
.pp-main-feature-post { min-height: 300px; } /* Mantengo tu ajuste */
.pp-main-feature-post .pp-slide-author-avatar-overlay { bottom: 100px; width:50px; height:50px; border-width: 3px;} /* Mantengo tu ajuste */
.pp-main-feature-post .pp-slide-text-overlay { padding:15px;}
.pp-main-feature-post .pp-slide-title{font-size:1.2rem;}
.pp-main-feature-post .pp-slide-snippet{font-size:.85rem; -webkit-line-clamp: 2; margin-bottom: 10px;}
.pp-thumbnail-navigator { padding: 10px; }
.pp-small-post-list { gap: 10px; }
.pp-small-post-link { padding: 8px 10px; }
.pp-small-post-image-wrap { width: 45px; height: 45px; margin-right: 10px; }
.pp-small-post-title { font-size: 0.85rem; }
.pp-small-post-meta { font-size: 0.7rem; }
}
@media (max-width:480px){
.pp-slider-container{padding: 0;}
.pp-slider-content-wrap { border-radius: 8px; }
.pp-main-feature-post { min-height: 300px; } /* Mantengo tu ajuste */
.pp-main-feature-post .pp-slide-author-avatar-overlay { bottom: 65px; width:45px; height:45px; border-width: 2px;} /* Mantengo tu ajuste */
.pp-main-feature-post .pp-slide-text-overlay { padding:10px;}
.pp-main-feature-post .pp-slide-title{font-size:1.1rem; margin-bottom: 5px;}
.pp-main-feature-post .pp-slide-snippet{display: none;}
.pp-main-feature-post .pp-slide-meta{justify-content: center; gap: 3px 10px; margin-top: 3px; padding-top: 3px;}
.pp-thumbnail-navigator { padding: 8px; }
.pp-small-post-link { padding: 6px 8px; }
.pp-small-post-image-wrap { width: 40px; height: 40px; margin-right: 8px; }
.pp-small-post-title { font-size: 0.75rem; }
.pp-small-post-meta { font-size: 0.6rem; }
}
</style>
<script>
//<![CDATA[
(function(){
class DynamicPopularPostsSlider {
constructor(containerId) {
this.container = document.getElementById(containerId);
if (!this.container) return;
this.posts = this.getPostsFromMarkup(); // Nueva función para extraer datos
if (this.posts.length === 0) {
this.container.innerHTML = '<p style="text-align:center; padding:20px;">No hay publicaciones populares para mostrar.</p>';
return;
}
// Si solo hay 1 post, mostramos solo ese post y no iniciamos el slider/autoplay
if (this.posts.length === 1) {
this.mainPostContainer = this.container.querySelector('.pp-main-feature-post');
this.smallPostsList = this.container.querySelector('.pp-thumbnail-navigator .pp-small-post-list');
this.renderMainPost(this.posts[0]);
if (this.smallPostsList) this.smallPostsList.innerHTML = ''; // Asegurarse de que las miniaturas estén vacías
return;
}
this.mainPostContainer = this.container.querySelector('.pp-main-feature-post');
this.smallPostsList = this.container.querySelector('.pp-thumbnail-navigator .pp-small-post-list');
this.currentIndex = 0;
this.autoplayInterval = null;
this.autoplayDelay = 5000;
this.init();
}
// Extrae los datos de los posts del HTML generado por Blogger
getPostsFromMarkup() {
const rawPostsContainer = this.container.querySelector('.pp-raw-posts-data');
if (!rawPostsContainer) {
console.error('Error: No se encontró el contenedor pp-raw-posts-data. Asegúrate de que el XML esté correcto y se genere este div DENTRO del pp-slider-container.');
return [];
}
const postDataElements = rawPostsContainer.querySelectorAll('.pp-post-item-data');
const posts = [];
postDataElements.forEach(elem => {
let featuredImage = elem.dataset.featuredImage || '';
if (featuredImage && !featuredImage.startsWith('http') && !featuredImage.startsWith('https')) {
featuredImage = '';
}
let authorPhoto = elem.dataset.authorPhoto || '';
if (authorPhoto && !authorPhoto.startsWith('http') && !authorPhoto.startsWith('https')) {
authorPhoto = '';
}
posts.push({
url: elem.dataset.url || '',
title: elem.dataset.title || '',
snippets: { short: elem.dataset.snippet || '' },
date: { iso8601: elem.dataset.date || '' },
author: {
name: elem.dataset.authorName || '',
authorPhoto: { image: authorPhoto }
},
featuredImage: featuredImage,
numberOfComments: parseInt(elem.dataset.commentsCount || 0)
});
});
return posts;
}
formatDate(isoDate) {
if (!isoDate) return "";
try {
const date = new Date(isoDate);
return date.toLocaleDateString("es-ES", { year: "numeric", month: "long", day: "numeric" });
} catch (e) {
console.warn('Fecha inválida:', isoDate, e);
return isoDate;
}
}
getResizedImageUrl(imageUrl, size, ratio) {
if (!imageUrl || imageUrl.startsWith('data:image')) return imageUrl;
const bloggerImageUrlRegex = /https?:\/\/(\d?\.bp\.blogspot\.com|-blogger\.googleusercontent\.com)\/img\/b\/.*\/s\d+(-r\d+-\d+)?\//;
if (imageUrl.match(bloggerImageUrlRegex)) {
let newSize = `s${size}`;
if (ratio) {
newSize += `-r${ratio.replace(':', '-')}`;
}
return imageUrl.replace(/\/s\d+(-r\d+-\d+)?\//, `/${newSize}/`);
}
return imageUrl;
}
renderMainPost(post) {
if (!post || !this.mainPostContainer) return;
const mainImage = this.mainPostContainer.querySelector('.pp-slide-image');
const mainImageLink = this.mainPostContainer.querySelector('.pp-slide-image-link');
const mainAuthorAvatarOverlay = this.mainPostContainer.querySelector('.pp-slide-author-avatar-overlay img');
const mainTitleLink = this.mainPostContainer.querySelector('.pp-slide-title a');
const mainSnippet = this.mainPostContainer.querySelector('.pp-slide-snippet');
const mainMetaAuthorName = this.mainPostContainer.querySelector('.pp-meta-author .author-name');
const mainMetaAuthorAvatar = this.mainPostContainer.querySelector('.pp-meta-author .pp-meta-author-avatar');
const mainMetaDate = this.mainPostContainer.querySelector('.pp-meta-date .pp-formatted-date');
const mainMetaCommentsNum = this.mainPostContainer.querySelector('.pp-meta-comments .num-comments');
const commentsIconContainer = this.mainPostContainer.querySelector('.pp-meta-comments');
mainImageLink.href = post.url;
mainTitleLink.href = post.url;
mainTitleLink.textContent = post.title;
// === LÓGICA DE IMAGEN PRINCIPAL ===
const mainImageUrl = this.getResizedImageUrl(post.featuredImage, 850, '16:9');
mainImage.classList.remove('placeholder-bg'); // Primero, remover la clase por si acaso
mainImage.src = ''; // Limpiar src para evitar mostrar imagen rota temporalmente
mainImage.alt = post.title || 'No image available';
if (mainImageUrl && (mainImageUrl.startsWith('http') || mainImageUrl.startsWith('https'))) {
mainImage.src = mainImageUrl;
} else {
mainImage.classList.add('placeholder-bg');
}
// === LÓGICA DE AVATAR DEL AUTOR (Overlay Grande) ===
if (post.author && post.author.authorPhoto && post.author.authorPhoto.image) {
const authorAvatarUrl = this.getResizedImageUrl(post.author.authorPhoto.image, 60, '1:1');
if (authorAvatarUrl && (authorAvatarUrl.startsWith('http') || authorAvatarUrl.startsWith('https'))) {
mainAuthorAvatarOverlay.src = authorAvatarUrl;
mainAuthorAvatarOverlay.alt = post.author.name;
} else {
mainAuthorAvatarOverlay.src = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVGVf-caKSV2T2v3UDcJS972LBkP13PO7IV3f47YROYZCigGNuD9UXWYQuMtndphuv8DDoZW89o-Dg9QMco0XkGV9hb4AwHF6MTeGga2p8YCMQn-92W0zTJgcjSIXhnmxfUx002G3Zc7foL-Qrdn5azS3QqjwJ6Q-qt3tL9CUwaBJ40W1UDnGr86hK8Z6a/s200/avatar-ai.png';
mainAuthorAvatarOverlay.alt = 'Author';
}
} else {
mainAuthorAvatarOverlay.src = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVGVf-caKSV2T2v3UDcJS972LBkP13PO7IV3f47YROYZCigGNuD9UXWYQuMtndphuv8DDoZW89o-Dg9QMco0XkGV9hb4AwHF6MTeGga2p8YCMQn-92W0zTJgcjSIXhnmxfUx002G3Zc7foL-Qrdn5azS3QqjwJ6Q-qt3tL9CUwaBJ40W1UDnGr86hK8Z6a/s200/avatar-ai.png';
mainAuthorAvatarOverlay.alt = 'Author';
}
if (post.snippets && post.snippets.short) {
mainSnippet.textContent = post.snippets.short;
mainSnippet.style.display = 'block';
} else {
mainSnippet.style.display = 'none';
}
// === LÓGICA DE METADATOS DEL AUTOR (Texto pequeño) ===
if (post.author) {
mainMetaAuthorName.textContent = post.author.name;
if (post.author.authorPhoto && post.author.authorPhoto.image) {
const metaAuthorAvatarUrl = this.getResizedImageUrl(post.author.authorPhoto.image, 24, '1:1');
if (metaAuthorAvatarUrl && (metaAuthorAvatarUrl.startsWith('http') || metaAuthorAvatarUrl.startsWith('https'))) {
mainMetaAuthorAvatar.src = metaAuthorAvatarUrl;
} else {
mainMetaAuthorAvatar.src = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVGVf-caKSV2T2v3UDcJS972LBkP13PO7IV3f47YROYZCigGNuD9UXWYQuMtndphuv8DDoZW89o-Dg9QMco0XkGV9hb4AwHF6MTeGga2p8YCMQn-92W0zTJgcjSIXhnmxfUx002G3Zc7foL-Qrdn5azS3QqjwJ6Q-qt3tL9CUwaBJ40W1UDnGr86hK8Z6a/s200/avatar-ai.png';
}
} else {
mainMetaAuthorAvatar.src = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVGVf-caKSV2T2v3UDcJS972LBkP13PO7IV3f47YROYZCigGNuD9UXWYQuMtndphuv8DDoZW89o-Dg9QMco0XkGV9hb4AwHF6MTeGga2p8YCMQn-92W0zTJgcjSIXhnmxfUx002G3Zc7foL-Qrdn5azS3QqjwJ6Q-qt3tL9CUwaBJ40W1UDnGr86hK8Z6a/s200/avatar-ai.png';
}
}
if (post.date && post.date.iso8601) {
mainMetaDate.setAttribute('datetime', post.date.iso8601);
mainMetaDate.textContent = this.formatDate(post.date.iso8601);
}
if (post.numberOfComments !== undefined) {
mainMetaCommentsNum.textContent = post.numberOfComments;
// CORREGIDO: Siempre mostrar el contenedor de comentarios, incluso si es 0
commentsIconContainer.style.display = 'inline-flex';
}
}
renderSmallPosts() {
if (!this.smallPostsList) return;
this.smallPostsList.innerHTML = '';
if (this.posts.length < 5) {
return;
}
for (let i = 1; i <= 4; i++) {
const postIndex = (this.currentIndex + i) % this.posts.length;
const smallPost = this.posts[postIndex];
if (!smallPost) continue;
const itemElem = document.createElement('div');
itemElem.classList.add('pp-small-post-item');
itemElem.dataset.postIndex = postIndex;
const smallPostImageUrl = this.getResizedImageUrl(smallPost.featuredImage, 70, '1:1');
let smallPostImageHtml = `<div class='pp-small-post-image placeholder-small-bg'></div>`;
if (smallPostImageUrl && (smallPostImageUrl.startsWith('http') || smallPostImageUrl.startsWith('https'))) {
smallPostImageHtml = `<img class='pp-small-post-image' src='${smallPostImageUrl}' alt='${smallPost.title}' loading='lazy'/>`;
}
itemElem.innerHTML = `
<a class='pp-small-post-link' href='${smallPost.url}' title='${smallPost.title}'>
<div class='pp-small-post-image-wrap'>
${smallPostImageHtml}
</div>
<div class='pp-small-post-content'>
<h4 class='pp-small-post-title'>${smallPost.title}</h4>
<div class='pp-small-post-meta'>
<span class='pp-small-meta-date'>
<svg viewBox='0 0 24 24'><path d='M19,19H5V8H19M16,1V3H8V1H6V3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3H18V1M17,10H7V12H17V10Z'/></svg>
<time class='pp-formatted-date' datetime='${smallPost.date.iso8601}'>${this.formatDate(smallPost.date.iso8601)}</time>
</span>
<!-- Asegúrate de que el contenedor de comentarios se muestre siempre aquí también -->
<span class='pp-small-meta-comments'>
<svg viewBox='0 0 24 24'><path d='M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4V4c0-1.1-.9-2-2-2zm0 14H4V4h16v12z'/></svg>
<span>${smallPost.numberOfComments}</span>
</span>
</div>
</div>
</a>
`;
this.smallPostsList.appendChild(itemElem);
}
}
init() {
this.renderSliderContent();
this.startAutoplay();
if (this.smallPostsList && this.posts.length >= 5) {
this.smallPostsList.addEventListener('click', (event) => {
const item = event.target.closest('.pp-small-post-item');
if (item && item.dataset.postIndex) {
this.stopAutoplay();
this.currentIndex = parseInt(item.dataset.postIndex);
this.renderSliderContent();
this.startAutoplay();
}
});
}
}
renderSliderContent() {
this.renderMainPost(this.posts[this.currentIndex]);
if (this.posts.length >= 5) {
this.renderSmallPosts();
} else {
if (this.smallPostsList) {
this.smallPostsList.innerHTML = '';
}
}
}
startAutoplay() {
this.stopAutoplay();
if (this.posts.length > 1) {
this.autoplayInterval = setInterval(() => {
this.currentIndex = (this.currentIndex + 1) % this.posts.length;
this.renderSliderContent();
}, this.autoplayDelay);
}
}
stopAutoplay() {
if (this.autoplayInterval) {
clearInterval(this.autoplayInterval);
this.autoplayInterval = null;
}
}
}
const initAllSliders = () => {
document.querySelectorAll('.pp-slider-container[id^="pp-slider-"]').forEach(t => {
if (!t.dataset.initialized) {
new DynamicPopularPostsSlider(t.id);
t.dataset.initialized = 'true';
}
});
};
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initAllSliders);
} else {
initAllSliders();
}
})();
//]]>
</script>
</b:if>
</b:includable>
<b:includable id='blogThisShare'>
<b:with value='"window.open(this.href, \"_blank\", \"height=270,width=475\"); return false;"' var='onclick'>
<b:include name='platformShare'/>
</b:with>
</b:includable>
<b:includable id='bylineByName' var='byline'>
<b:switch var='data:byline.name'>
<b:case value='share'/>
<b:include cond='data:post.shareUrl' name='postShareButtons'/>
<b:case value='comments'/>
<b:include cond='data:post.allowComments' name='postCommentsLink'/>
<b:case value='location'/>
<b:include cond='data:post.location' name='postLocation'/>
<b:case value='timestamp'/>
<b:include cond='not data:view.isPage' name='postTimestamp'/>
<b:case value='author'/>
<b:include name='postAuthor'/>
<b:case value='labels'/>
<b:include cond='data:post.labels' name='postLabels'/>
<b:case value='icons'/>
<b:include cond='data:post.emailPostUrl' name='emailPostIcon'/>
</b:switch>
</b:includable>
<b:includable id='bylineRegion' var='regionItems'>
<b:loop values='data:regionItems' var='byline'>
<b:include data='byline' name='bylineByName'/>
</b:loop>
</b:includable>
<b:includable id='commentsLink'>
<a class='comment-link' expr:href='data:post.commentsUrl' expr:onclick='data:post.commentsUrlOnclick'>
<b:if cond='data:post.numberOfComments > 0'>
<b:message name='messages.numberOfComments'>
<b:param expr:value='data:post.numberOfComments' name='numComments'/>
</b:message>
<b:else/>
<data:messages.postAComment/>
</b:if>
</a>
</b:includable>
<b:includable id='commentsLinkIframe'>
<!-- G+ comments, no longer available. The includable is retained for backwards-compatibility. -->
</b:includable>
<b:includable id='emailPostIcon'>
<span class='byline post-icons'>
<!-- email post links -->
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:messages.emailPost'>
<b:include data='{ iconClass: "touch-icon sharing-icon" }' name='emailIcon'/>
</a>
</span>
</span>
</b:includable>
<b:includable id='facebookShare'>
<b:with value='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' var='onclick'>
<b:include name='platformShare'/>
</b:with>
</b:includable>
<b:includable id='footerBylines'>
<b:if cond='data:widgets.Blog.first.footerBylines'>
<b:loop index='i' values='data:widgets.Blog.first.footerBylines' var='region'>
<b:if cond='not data:region.items.empty'>
<div expr:class='"post-footer-line post-footer-line-" + (data:i + 1)'>
<b:with value='"footer-" + (data:i + 1)' var='regionName'>
<b:include data='region.items' name='bylineRegion'/>
</b:with>
</div>
</b:if>
</b:loop>
</b:if>
</b:includable>
<b:includable id='googlePlusShare'>
</b:includable>
<b:includable id='headerByline'>
<b:if cond='data:widgets.Blog.first.headerByline'>
<div class='post-header'>
<div class='post-header-line-1'>
<b:with value='"header-1"' var='regionName'>
<b:include data='data:widgets.Blog.first.headerByline.items' name='bylineRegion'/>
</b:with>
</div>
</div>
</b:if>
</b:includable>
<b:includable id='linkShare'>
<b:with value='"window.prompt(\"Copy to clipboard: Ctrl+C, Enter\", \"" + data:originalUrl + "\"); return false;"' var='onclick'>
<b:include name='platformShare'/>
</b:with>
</b:includable>
<b:includable id='otherSharingButton'>
<span class='sharing-platform-button sharing-element-other' expr:aria-label='data:messages.shareToOtherApps.escaped' expr:data-url='data:originalUrl' expr:title='data:messages.shareToOtherApps.escaped' role='menuitem' tabindex='-1'>
<b:with value='{key: "sharingOther"}' var='platform'>
<b:include name='sharingPlatformIcon'/>
</b:with>
<span class='platform-sharing-text'><data:messages.shareOtherApps.escaped/></span>
</span>
</b:includable>
<b:includable id='platformShare'>
<a expr:class='"goog-inline-block sharing-" + data:platform.key' expr:data-url='data:originalUrl' expr:href='data:shareUrl + "&target=" + data:platform.target' expr:onclick='data:onclick ? data:onclick : ""' expr:title='data:platform.shareMessage' target='_blank'>
<span class='share-button-link-text'>
<data:platform.shareMessage/>
</span>
</a>
</b:includable>
<b:includable id='postAuthor'>
<span class='byline post-author vcard'>
<span class='post-author-label'>
<data:byline.label/>
</span>
<span class='fn'>
<b:if cond='data:post.author.profileUrl'>
<meta expr:content='data:post.author.profileUrl'/>
<a class='g-profile' expr:href='data:post.author.profileUrl' rel='author' title='author profile'>
<span><data:post.author.name/></span>
</a>
<b:else/>
<span><data:post.author.name/></span>
</b:if>
</span>
</span>
</b:includable>
<b:includable id='postCommentsLink'>
<span class='byline post-comment-link container'>
<b:include cond='data:post.commentSource != 1' name='commentsLink'/>
</span>
</b:includable>
<b:includable id='postJumpLink' var='post'>
<div class='jump-link flat-button'>
<a expr:href='data:post.url fragment "more"' expr:title='data:post.title'>
<b:eval expr='data:blog.jumpLinkMessage'/>
</a>
</div>
</b:includable>
<b:includable id='postLabels'>
<span class='byline post-labels'>
<span class='byline-label'><data:byline.label/></span>
<b:loop index='i' values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'>
<data:label.name/>
</a>
</b:loop>
</span>
</b:includable>
<b:includable id='postLocation'>
<span class='byline post-location'>
<data:byline.label/>
<a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
</span>
</b:includable>
<b:includable id='postReactions'>
<!-- Reaction feature no longer available. The includable is retained for backwards-compatibility. -->
</b:includable>
<b:includable id='postShareButtons'>
<div class='byline post-share-buttons goog-inline-block'>
<b:with value='data:sharingId ?: ((data:widget.instanceId ?: "sharing") + "-" + (data:regionName ?: "byline") + "-" + data:post.id)' var='sharingId'>
<!-- Note: 'sharingButtons' includable is from the default Sharing widget markup. -->
<b:include data='{ sharingId: data:sharingId, originalUrl: data:post.url, platforms: data:this.sharing.platforms, shareUrl: data:post.shareUrl, shareTitle: data:post.title, }' name='sharingButtons'/>
</b:with>
</div>
</b:includable>
<b:includable id='postTimestamp'>
<span class='byline post-timestamp'>
<data:byline.label/>
<b:if cond='data:post.url'>
<meta expr:content='data:post.url.canonical'/>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'>
<time class='published' expr:datetime='data:post.date.iso8601' expr:title='data:post.date.iso8601'>
<data:post.date/>
</time>
</a>
</b:if>
</span>
</b:includable>
<b:includable id='sharingButton'>
<span expr:aria-label='data:platform.shareMessage' expr:class='"sharing-platform-button sharing-element-" + data:platform.key' expr:data-href='data:shareUrl + "&target=" + data:platform.target' expr:data-url='data:originalUrl' expr:title='data:platform.shareMessage' role='menuitem' tabindex='-1'>
<b:include name='sharingPlatformIcon'/>
<span class='platform-sharing-text'><data:platform.name/></span>
</span>
</b:includable>
<b:includable id='sharingButtonContent'>
<div class='flat-icon-button ripple'>
<b:include name='shareIcon'/>
</div>
</b:includable>
<b:includable id='sharingButtons'>
<div class='sharing' expr:aria-owns='"sharing-popup-" + data:sharingId' expr:data-title='data:shareTitle'>
<button class='sharing-button touch-icon-button' expr:aria-controls='"sharing-popup-" + data:sharingId' expr:aria-label='data:messages.share.escaped' expr:id='"sharing-button-" + data:sharingId' role='button'>
<b:include name='sharingButtonContent'/>
</button>
<b:include name='sharingButtonsMenu'/>
</div>
</b:includable>
<b:includable id='sharingButtonsMenu'>
<div class='share-buttons-container'>
<ul aria-hidden='true' class='share-buttons hidden' expr:aria-label='data:messages.share.escaped' expr:id='"sharing-popup-" + data:sharingId' role='menu'>
<b:loop values='(data:platforms ?: data:blog.sharing.platforms) filter (p => p.key not in {"blogThis"})' var='platform'>
<li>
<b:include name='sharingButton'/>
</li>
</b:loop>
<li aria-hidden='true' class='hidden'>
<b:include name='otherSharingButton'/>
</li>
</ul>
</div>
</b:includable>
<b:includable id='sharingPlatformIcon'>
<b:include data='{ iconClass: ("touch-icon sharing-" + data:platform.key) }' expr:name='data:platform.key + "Icon"'/>
</b:includable>
<b:includable id='snippetedPostByline'>
<b:with value='(data:widgets first (w => w.type == "Blog")).allBylineItems' var='blogBylines'>
<div class='item-byline'>
<b:with value='data:blogBylines first (i => i.name == "author")' var='byline'>
<b:include cond='data:byline and data:this.postDisplay.showAuthor' data='post' name='postAuthor'/>
</b:with>
<b:with value='data:blogBylines first (i => i.name == "timestamp")' var='byline'>
<b:include cond='data:byline and data:this.postDisplay.showDate' data='post' name='postTimestamp'/>
</b:with>
</div>
</b:with>
</b:includable>
<b:includable id='snippetedPostContent'>
<div class='post-content'>
<b:include cond='data:this.postDisplay.showTitle' name='snippetedPostTitle'/>
<b:include cond='data:this.postDisplay.showDate or data:this.postDisplay.showAuthor' name='snippetedPostByline'/>
<b:include cond='data:this.postDisplay.showSnippet' data='post' name='postSnippet'/>
<b:include cond='data:this.postDisplay.showFeaturedImage and data:post.featuredImage' name='snippetedPostThumbnail'/>
</div>
</b:includable>
<b:includable id='snippetedPostThumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.url'>
<b:include data='{ image: data:post.featuredImage, imageSizes: [72, 144], imageRatio: "1:1", sourceSizes: "72px" }' name='responsiveImage'/>
</a>
</div>
</b:includable>
<b:includable id='snippetedPostTitle'>
<b:if cond='data:post.title != ""'>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
</b:if>
</b:includable>
<b:includable id='snippetedPosts'>
<div role='feed'>
<!-- Don't render the post that we're currently already looking at. -->
<b:loop values='data:posts filter (p => p.id != data:view.postId)' var='post'>
<article class='post' role='article'>
<b:include name='snippetedPostContent'/>
</article>
</b:loop>
</div>
</b:includable>
</b:widget>
</b:section>Guarda los cambios
Haz clic en el botón "Guardar" para aplicar los cambios a tu plantilla.
¡Revisa tu blog!
Visita tu blog para ver el nuevo slider de entradas populares en acción con su navegación por miniaturas.
Características del slider
Diseño responsive
Se adapta perfectamente a todos los dispositivos, desde móviles hasta escritorios.
Navegación por miniaturas
Incluye una barra de miniaturas para navegar fácilmente entre las publicaciones.
Fácil personalización
Puedes ajustar colores y estilos para que coincida con la apariencia de tu blog.
¿Necesitas ayuda? Si tienes alguna pregunta o encuentras dificultades durante la implementación, no dudes en dejar un comentario. Estaremos encantados de ayudarte.
¿Te resultó útil este tutorial? ¡Compártelo con otros bloggers!
Recuerda suscribirte:
Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
43 comentarios: