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 funcional

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

Realizar una copia de seguridad de mi blog de Blogger

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 &gt; 0'>
    <div class='pp-slider-container' expr:id='&quot;pp-slider-&quot; + 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, &quot;Segoe UI&quot;, 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='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' 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 &gt; 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: &quot;touch-icon sharing-icon&quot; }' name='emailIcon'/>
      </a>
    </span>
  </span>
</b:includable>
      <b:includable id='facebookShare'>
  <b:with value='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' 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='&quot;post-footer-line post-footer-line-&quot; + (data:i + 1)'>
          <b:with value='&quot;footer-&quot; + (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='&quot;header-1&quot;' 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='&quot;window.prompt(\&quot;Copy to clipboard: Ctrl+C, Enter\&quot;, \&quot;&quot; + data:originalUrl + &quot;\&quot;); return false;&quot;' 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: &quot;sharingOther&quot;}' 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='&quot;goog-inline-block sharing-&quot; + data:platform.key' expr:data-url='data:originalUrl' expr:href='data:shareUrl + &quot;&amp;target=&quot; + data:platform.target' expr:onclick='data:onclick ? data:onclick : &quot;&quot;' 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 &quot;more&quot;' 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 ?: &quot;sharing&quot;) + &quot;-&quot; + (data:regionName ?: &quot;byline&quot;) + &quot;-&quot; + 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='&quot;sharing-platform-button sharing-element-&quot; + data:platform.key' expr:data-href='data:shareUrl + &quot;&amp;target=&quot; + 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='&quot;sharing-popup-&quot; + data:sharingId' expr:data-title='data:shareTitle'>
    <button class='sharing-button touch-icon-button' expr:aria-controls='&quot;sharing-popup-&quot; + data:sharingId' expr:aria-label='data:messages.share.escaped' expr:id='&quot;sharing-button-&quot; + 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='&quot;sharing-popup-&quot; + data:sharingId' role='menu'>
      <b:loop values='(data:platforms ?: data:blog.sharing.platforms) filter (p =&gt; p.key not in {&quot;blogThis&quot;})' 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: (&quot;touch-icon sharing-&quot; + data:platform.key) }' expr:name='data:platform.key + &quot;Icon&quot;'/>
</b:includable>
      <b:includable id='snippetedPostByline'>
  <b:with value='(data:widgets first (w =&gt; w.type == &quot;Blog&quot;)).allBylineItems' var='blogBylines'>
    <div class='item-byline'>
      <b:with value='data:blogBylines first (i =&gt; i.name == &quot;author&quot;)' 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 =&gt; i.name == &quot;timestamp&quot;)' 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: &quot;1:1&quot;,                         sourceSizes: &quot;72px&quot;                        }' name='responsiveImage'/>
    </a>
  </div>
</b:includable>
      <b:includable id='snippetedPostTitle'>
  <b:if cond='data:post.title != &quot;&quot;'>
    <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 =&gt; 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
¿Te ha resultado útil este artículo, recomiendanos?
Si



Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.

Related post

Comentarios

43 comentarios:

  1. Y si queremos cambiarlo de tamaño?¿ Cambiarlo de posisicion para que este centrado¿? Como lo hacemos¿?

    ResponderEliminar
  2. Hola 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.
    Espero haber sido lo mas explicativo posible.
    Saludos.

    ResponderEliminar
  3. 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?

    ResponderEliminar
  4. Hola 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.
    Saludos..

    ResponderEliminar
  5. Disculpen..las imagenes pasan muy rapido..se puede bajarle la velocidad para que vayan mas despacio?

    ResponderEliminar
  6. Hola 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.
    Saludos.

    ResponderEliminar
  7. Hola Luis, en primer lugar es muy bueno tu post, yo quería saber, para quitar el texto que aparece en las imágenes?

    ResponderEliminar
  8. Hola, todo biene configurado directamente en el script de insercion del codigo. Por el momento dejalo asi.
    Saludos.

    ResponderEliminar
  9. 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?

    ResponderEliminar
  10. Hermano como yo hago que las publicaciones que yo elija salga como principales

    ResponderEliminar
  11. Necesitas que las nuevas publicaciones que tu hagas salga como principales en tu slideshow?, dime si esa es tu pregunta.

    ResponderEliminar
  12. Ejemplo : Publico 10 cosas y quiero que 5 de esas ( Expesificamente las que quiero)me salgan en el SlideShow

    ResponderEliminar
  13. Hola, es facil, realiza lo siguiente, cuando creas tus 10 publicaciones, pones dos etiquetas, una que diga Noticias, y otra que diga, Nuevos.
    Luego 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.

    ResponderEliminar
    Respuestas
    1. Saludos! El slider es superbonito aunque esta parte de la configuración se me está resistiendo.

      Estoy 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?

      Eliminar
  14. Hola Luis no me sale sigo todos todos los paso y nada

    ResponderEliminar
    Respuestas
    1. Hola, 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.
      Saludos

      Eliminar
  15. te lo dejo
    http://iphontec.blogspot.com

    ResponderEliminar
    Respuestas
    1. 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
      Y gustosamente te ayudare desde el chat para guiarte paso a paso.
      Saludos.

      Eliminar
  16. ok mi estimado Luis te envio un pantallaso del problema.

    ResponderEliminar
  17. hola muy buen tutorial
    queria hacerte una consulta como cambio el color del efecto del slideshow que aparece en verde
    a color rojo..?

    ResponderEliminar
    Respuestas
    1. Hola, cambia de color en este punto:

      .lof-navigator li.active img{
      border:##6C8E5C solid 1px;

      En el numero 6C8E5C
      Cambialo por el codigo de color que tu quieras,

      Saludos.

      Eliminar
    2. Cordial saludo,
      Es 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.

      Eliminar
    3. 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.
      Saludos.

      Eliminar
  18. 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!!!

    ResponderEliminar
    Respuestas
    1. Hola enviame la direccion de tu blog para poder ver que es lo que sucede y asi poder ayudarte.
      Saludos.

      Eliminar
  19. 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?

    ResponderEliminar
    Respuestas
    1. Hola enviame la direccion de tu blog para poder verlo y decirte cual es el problema
      Saludos.

      Eliminar
  20. http://pasionpormontoro.blogspot.com.es/ Ahora mismo no tengo publicado el menú de slideshow

    ResponderEliminar
  21. Tengo 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.
    http://mundodeporteysalud.blogspot.com.es/

    ResponderEliminar
  22. 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...
    SALUDOS de Software and Games .... SALUDOS DESDE URUGUAY!

    ResponderEliminar
    Respuestas
    1. Mira el siguiente post:
      http://www.ayudadeblogger.com/2013/06/instalar-un-slideshow-para-blogger-con-un-solo-widget.html

      Eliminar
  23. Excelente información! Recomendado.

    ResponderEliminar
  24. Amigo me gustaria saber como puedo colocarlo centrado, ya que el mio sale alineado a la izquierda y yo lo quiero centrado

    ResponderEliminar
    Respuestas
    1. hola, enviame la direccion de tu blog para verlo, solo asi podre guiarte saludos..

      Eliminar
  25. No me funciona solo me muestar una entrada

    ResponderEliminar
    Respuestas
    1. Hola enviame la direccion de tu blog para verlo y decirte donde esta el error.
      Saludos.

      Eliminar
  26. como hago para centrarlo? me eh matado buscando donde es para cambiar la posición y dejarlo centrado pero no sucede nada

    ResponderEliminar
    Respuestas
    1. Hola, el centrado es automatico, y se ajusto al tamño del blog, enviame la direccion de tu blog para poder verlo.
      Saludos

      Eliminar
  27. yo lo puse pero no sale en la pagina miaaa de www.planeatuviaje.net

    ResponderEliminar
  28. No me sale lo hice como dice en el post pero no me funciono :s

    ResponderEliminar
    Respuestas
    1. Hola 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

      Saludos.

      Eliminar
  29. 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.

    Saludos.

    ResponderEliminar