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 actual año 2025, 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
Y si queremos cambiarlo de tamaño?¿ Cambiarlo de posisicion para que este centrado¿? Como lo hacemos¿?
ResponderEliminarHola Jose, es facil, ingresa a tu codigo HTML de blogger y cambia en la parte que dice width:600px height:300px por el tamaño que tu quieras, recuerda que el ancho es donde dice width y la altura es height, cambio los valores que estan por los valores que tu quieras.
ResponderEliminarEspero haber sido lo mas explicativo posible.
Saludos.
ya hice eso de cambiarle donde dice 600 y 300 todo pero queda mal!! seias tan amable de mandar el codigo pues para que no quede tan grande?
ResponderEliminarHola Laura, busca este codigo width:892px; height:300px; y cambia el tamaño de tu donde dice 892 es el ancho y donde dice 300 es la altura, cambialo por las fimensiones que tu quieras.
ResponderEliminarSaludos..
Disculpen..las imagenes pasan muy rapido..se puede bajarle la velocidad para que vayan mas despacio?
ResponderEliminarHola Aaron, claro que si se puede, debes buscar este codigo interval:2000, y debes disminuirlo si quieres que vaya mas despacio, andalo probando hasta que obtengas la secuencia que tu quieras.
ResponderEliminarSaludos.
Hola Luis, en primer lugar es muy bueno tu post, yo quería saber, para quitar el texto que aparece en las imágenes?
ResponderEliminarHola, todo biene configurado directamente en el script de insercion del codigo. Por el momento dejalo asi.
ResponderEliminarSaludos.
Como hago para que solo se vea en el inicio? O sea cuando clickeo para ver una noticia o entrar en una sección que no me siga apareciendo?
ResponderEliminarHermano como yo hago que las publicaciones que yo elija salga como principales
ResponderEliminarNecesitas que las nuevas publicaciones que tu hagas salga como principales en tu slideshow?, dime si esa es tu pregunta.
ResponderEliminarEjemplo : Publico 10 cosas y quiero que 5 de esas ( Expesificamente las que quiero)me salgan en el SlideShow
ResponderEliminarHola, es facil, realiza lo siguiente, cuando creas tus 10 publicaciones, pones dos etiquetas, una que diga Noticias, y otra que diga, Nuevos.
ResponderEliminarLuego a todas las 10 publicaciones organizalos con el tema de Notcias, y a las 5 publicaciones que tu quieras ponlas tambien con la etiqueta Nuevos. Y en tu slideshow pon la etiqueta de Nuevos, para que aparesca como publicaciones nuevas, y has lo mismo cuando publicas un nuevo tema, ponlo con la etiqueta Nuevos y asi aparecera los temas nuevos que vayas publicando en tu blog.
Saludos.
Saludos! El slider es superbonito aunque esta parte de la configuración se me está resistiendo.
EliminarEstoy intentando seguir este mismo consejo para hacer que el slider deje de mostrar las entradas populares y muestre las destacadas que yo quiera. La parte de poner labels la entiendo, pero no entiendo cómo hacerle entender al widget que quiero que muestre las entradas con ese determinado label. Cualquier pista sería muy bien recibida.
Otro asunto, ¿hay alguna forma de hacer que salgan 4 entradas más pequeñitas en el panel de la derecha en lugar de 3 más grandes?
Hola Luis no me sale sigo todos todos los paso y nada
ResponderEliminarHola, enviame la direccion de tu blog para ver que es lo que pasa y ver si lo estas haciendo bien. Tal vez hayas cometido algun error.
EliminarSaludos
te lo dejo
ResponderEliminarhttp://iphontec.blogspot.com
hola, he visto tu blog y esta bien, pero creo que tienes algun script que no te esta dejando que funcione el codigo, intentalo de nuevo tal y cual lo explico en mi tutorial, si aun no te funciona, enviame un mensaje directo al chat de gmail, a esta cuenta: ayudadeblogger@gmail.com
EliminarY gustosamente te ayudare desde el chat para guiarte paso a paso.
Saludos.
ok mi estimado Luis te envio un pantallaso del problema.
ResponderEliminarOk enviamelo..
Eliminarhola muy buen tutorial
ResponderEliminarqueria hacerte una consulta como cambio el color del efecto del slideshow que aparece en verde
a color rojo..?
Hola, cambia de color en este punto:
Eliminar.lof-navigator li.active img{
border:##6C8E5C solid 1px;
En el numero 6C8E5C
Cambialo por el codigo de color que tu quieras,
Saludos.
Cordial saludo,
EliminarEs un Slider muy bonito pero al instalarlo en mi blog no corre, muestra en la parte derecha tres entradas pero no corre, no se mueve y tampoco aparecen las flechitas que señalan hacia la izquierda la entrada con imagen mas grande. En mi Blog de pruebas lo instale tambien pero alli solamante muestra una entrada y tampoco corre. CUAL FUE MI ERROR?
De otro lado el SLIDER queda ligeramente torcido ala izquierda, existe alguna manera de centrarlo?
Direccion Blog pruebas: http://ecologiayactualidadinteranimal.blogspot.com/
Aca puedes ver el SLIDER instalado
Direccion Blog :http://ecologiayactualidadinternacional.blogspot.com/
Retire el slider de este Blog pues como comprenderas no lo podia dejar asi.
Muchas gracias por tu ayuda y quedo muy atento a tu respuesta.
En lo que te pueda servir me tienes a la orden.
Hola el problema es que no estas copiando bien el codigo tal como lo tengo puesto en este post. El codigo funciona perfectamente. Copia tal y cual esta el codigo eso es todo y veras que funciona no hagas ningun cambio.
EliminarSaludos.
hola, excelente excepto por un detalle, no solo me desliza las entradas sino todos los gadgets que tengo en mi columna lateral izquierda... y eso no me agrada.... ayuda plisss!!!
ResponderEliminarHola enviame la direccion de tu blog para poder ver que es lo que sucede y asi poder ayudarte.
EliminarSaludos.
Lo estoy intentando instalar, el problema es que cuando ya copio el código HTML y guardo las modificaciones al entrar a la página solo se me ve una pequeña franja del menú slideshow. El resto no aparece. ¿Cual es el error? ¿Como puedo subsanarlo?
ResponderEliminarHola enviame la direccion de tu blog para poder verlo y decirte cual es el problema
EliminarSaludos.
http://pasionpormontoro.blogspot.com.es/ Ahora mismo no tengo publicado el menú de slideshow
ResponderEliminarTengo un problema y es que no tengo ninguna opción activada para que este en movimiento mis entradas y en cambio si lo hacen. No tengo nada puesto para que haga ese efecto y no encuentro la manera de volverlo normal. Le dejo mi blog para que lo mire un saludo.
ResponderEliminarhttp://mundodeporteysalud.blogspot.com.es/
Hola amigo! tengo una duda... quiero hacer un slideshow para mi blog pero no lo quiero con mis entradas populares y vi que en otra publicacion tuya habias dado uno pero el las letras quedan en la parte de arriba!... y yo las quiero abajo.. dame el link de tu publicacion que funcione y que las letras queden abajo...
ResponderEliminarSALUDOS de Software and Games .... SALUDOS DESDE URUGUAY!
Mira el siguiente post:
Eliminarhttp://www.ayudadeblogger.com/2013/06/instalar-un-slideshow-para-blogger-con-un-solo-widget.html
Excelente información! Recomendado.
ResponderEliminarAmigo me gustaria saber como puedo colocarlo centrado, ya que el mio sale alineado a la izquierda y yo lo quiero centrado
ResponderEliminarhola, enviame la direccion de tu blog para verlo, solo asi podre guiarte saludos..
EliminarNo me funciona solo me muestar una entrada
ResponderEliminarHola enviame la direccion de tu blog para verlo y decirte donde esta el error.
EliminarSaludos.
como hago para centrarlo? me eh matado buscando donde es para cambiar la posición y dejarlo centrado pero no sucede nada
ResponderEliminarHola, el centrado es automatico, y se ajusto al tamño del blog, enviame la direccion de tu blog para poder verlo.
EliminarSaludos
yo lo puse pero no sale en la pagina miaaa de www.planeatuviaje.net
ResponderEliminarNo me sale lo hice como dice en el post pero no me funciono :s
ResponderEliminarHola Mundo PTC, lamentablemente, el código que esta insertado en un script, dejo de funcionar, espero que en estos días lo vuelva a ingresar y así pueda funcionar este truco
EliminarSaludos.
Hola amigos de Ayudadeblogger.com, he modificado el código de este tutorial, ahora funciona correctamente, pueden ver su demostración tal como lo indico en este tutorial creado para usuarios de Blogger.
ResponderEliminarSaludos.