Cambiar de estilos al Archivo del blog Widget para Blogger

Cómo Instalar un Widget de Archivo Calendario Moderno en Blogger

Estaba buscando más tutoriales para uso exclusivo en Blogger?, pues hoy voy a compartir un interesante tutorial para que puedan utilizarlo en su blog de Blogger. Lo que vamos hacer es cambiar nuestro widget de Archivo del Blog por un avanzado y moderno widget de Archivo Calendario. El script de hoja de estilos nos permitirá crear un gadget totalmente personalizado. La instalación de este widget es muy fácil así que no tendrá complicación alguna, solo siga mis instrucciones y podrá tener su Archivo Calendario en su blog de Blogger.

¿Quieres reemplazar el clásico widget de "Archivo del Blog" por un calendario interactivo y moderno en tu blog de Blogger? ¡Sigue este sencillo tutorial paso a paso!

📌 Nota importante

1. 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:
2. Este tutorial es compatible con la mayoría de plantillas de Blogger.

Realizar una copia de seguridad de mi blog de Blogger

Ayudadeblogger.com no se responsabiliza, si no realizo correctamente la inserción del código, para más detalles específicos, puede visitar el siguiente enlace:

Políticas de uso

Puede ver su funcionamiento al final de la barra lateral de este blog

📝 Pasos para Instalar el Widget de Archivo Calendario

1. Accede al Panel de Blogger

- Inicia sesión en Blogger.
- Selecciona tu blog.

2. Ve a "Diseño"

- En el menú lateral, haz clic en "Diseño".

3. Agrega un Gadget

- Haz clic en "Agregar un gadget" en la sección donde quieras colocar el calendario (barra lateral, pie de página, etc.).

4. Busca y Selecciona "Archivo del Blog"

- En la lista de gadgets, busca "Archivo del Blog".
- Haz clic en el botón "+" para agregarlo.

5. Edita el Código HTML del Widget

- Ve a "Tema" en el menú lateral.
- Haz clic en "Editar HTML".
- En la parte superior derecha, haz clic en el icono "Ir al widget".
- Busca el widget llamado "BlogArchive1".

6. Reemplaza el Código Existente

- Elimina todo el código del widget.

- Pega el siguiente código en su lugar:

<b:widget id='BlogArchive1' locked='false' title='Archivo del Blog' type='BlogArchive' version='1'>
            <b:widget-settings>
              <b:widget-setting name='showStyle'>FLAT</b:widget-setting>
              <b:widget-setting name='yearPattern'>yyyy</b:widget-setting>
              <b:widget-setting name='showWeekEnd'>true</b:widget-setting>
              <b:widget-setting name='monthPattern'>MMMM</b:widget-setting>
              <b:widget-setting name='dayPattern'>MMM dd</b:widget-setting>
              <b:widget-setting name='weekPattern'>MM/dd</b:widget-setting>
              <b:widget-setting name='chronological'>false</b:widget-setting>
              <b:widget-setting name='showPosts'>false</b:widget-setting>
              <b:widget-setting name='frequency'>MONTHLY</b:widget-setting>
            </b:widget-settings>
            <b:includable id='main'>
    <b:if cond='data:title != &quot;&quot;'>
      <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
      <div id='archive-calendar-container'>
        <div id='archive-calendar-header'>
          <button id='archive-calendar-prev'>&lt;</button>
          <select id='archive-calendar-month-year'/>
          <button id='archive-calendar-next'>&gt;</button>
        </div>
        <table id='archive-calendar'>
          <thead>
            <tr>
              <th>Do</th>
              <th>Lu</th>
              <th>Ma</th>
              <th>Mi</th>
              <th>Ju</th>
              <th>Vi</th>
              <th>Sa</th>
            </tr>
          </thead>
          <tbody>
            <!-- Los días del calendario se generarán aquí -->
          </tbody>
        </table>
        <div id='archive-calendar-loader' style='display:none;'>Cargando...</div>
      </div>
      <div id='ArchiveList' style='display:none;'>
        <b:include cond='data:style == &quot;FLAT&quot;' data='data' name='flat'/>
      </div>
    </div>
  </b:includable>
            <b:includable id='flat' var='data'>
    <ul class='flat'>
      <b:loop values='data:data' var='i'>
        <li class='archivedate'>
          <a expr:data-post-count='data:i.post-count' expr:href='data:i.url'><data:i.name/></a>
        </li>
      </b:loop>
    </ul>
    <style>
/* Modern Blogger Archive Calendar by Ayudadeblogger.com */
:root {
  --calendar-primary-color: #007bff;
  --calendar-secondary-color: #ffffff;
  --calendar-header-bg: #f8f9fa;
  --calendar-border-color: #dee2e6;
  --calendar-day-hover-bg: #e9ecef;
  --calendar-active-day-bg: #007bff;
  --calendar-active-day-color: #ffffff;
  --calendar-text-color: #212529;
}

#archive-calendar-container {
  font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, sans-serif;
  border: 1px solid var(--calendar-border-color);
  border-radius: 8px;
  overflow: hidden;
}

#archive-calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: var(--calendar-header-bg);
  border-bottom: 1px solid var(--calendar-border-color);
}

#archive-calendar-header select,
#archive-calendar-header button {
  background-color: transparent;
  border: 1px solid var(--calendar-border-color);
  border-radius: 5px;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 14px;
  color: var(--calendar-text-color);
  transition: background-color 0.2s, color 0.2s;
}

#archive-calendar-header button:hover {
  background-color: var(--calendar-primary-color);
  color: var(--calendar-secondary-color);
}

#archive-calendar-month-year {
  flex-grow: 1;
  text-align: center;
  border: none;
  font-weight: bold;
  font-size: 16px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: none;
}

#archive-calendar {
  width: 100%;
  border-collapse: collapse;
}

#archive-calendar th {
  padding: 10px;
  text-align: center;
  font-size: 12px;
  font-weight: normal;
  color: #6c757d;
}

#archive-calendar td {
  text-align: center;
  padding: 2px;
  border: 1px solid var(--calendar-border-color);
  height: 35px;
  font-size: 14px;
}

#archive-calendar td.calendar-day {
  cursor: default;
}

#archive-calendar td.calendar-day:hover {
  background-color: var(--calendar-day-hover-bg);
}

#archive-calendar td.has-posts {
  background-color: var(--calendar-active-day-bg);
  cursor: pointer;
}

#archive-calendar td.has-posts a {
  color: var(--calendar-active-day-color);
  text-decoration: none;
  display: block;
  width: 100%;
  height: 100%;
  line-height: 35px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

#archive-calendar td.has-posts:hover a {
  background-color: rgba(255, 255, 255, 0.2);
}

#archive-calendar td.not-in-month {
  color: #adb5bd;
  background-color: #f8f9fa;
}

#archive-calendar-loader {
  text-align: center;
  padding: 20px;
  font-size: 14px;
  color: #6c757d;
}
</style>
    <script>
// Modern Blogger Archive Calendar Script by Ayudadeblogger.com 
document.addEventListener(&#39;DOMContentLoaded&#39;, function() {
    const archiveList = document.querySelector(&#39;#ArchiveList ul.flat&#39;);
    if (!archiveList) {
        console.warn(&#39;Blogger Archive list not found. Calendar cannot be initialized.&#39;);
        const container = document.getElementById(&#39;archive-calendar-container&#39;);
        if(container) container.style.display = &#39;none&#39;;
        return;
    }

    const monthSelect = document.getElementById(&#39;archive-calendar-month-year&#39;);
    const prevButton = document.getElementById(&#39;archive-calendar-prev&#39;);
    const nextButton = document.getElementById(&#39;archive-calendar-next&#39;);
    const calendarBody = document.querySelector(&#39;#archive-calendar tbody&#39;);
    const loader = document.getElementById(&#39;archive-calendar-loader&#39;);
    
    let archiveData = [];
    const monthNames = [&quot;Enero&quot;, &quot;Febrero&quot;, &quot;Marzo&quot;, &quot;Abril&quot;, &quot;Mayo&quot;, &quot;Junio&quot;, &quot;Julio&quot;, &quot;Agosto&quot;, &quot;Septiembre&quot;, &quot;Octubre&quot;, &quot;Noviembre&quot;, &quot;Diciembre&quot;];

    // 1. Parse existing archive links to build data structure
    function parseArchiveLinks() {
        const links = archiveList.querySelectorAll(&#39;li.archivedate a&#39;);
        links.forEach(link =&gt; {
            const url = new URL(link.href);
            const pathParts = url.pathname.split(&#39;/&#39;).filter(p =&gt; p);
            if(pathParts.length &gt;= 2) {
                const year = parseInt(pathParts[0], 10);
                const month = parseInt(pathParts[1], 10) - 1; // JS months are 0-indexed
                 if(!isNaN(year) &amp;&amp; !isNaN(month)){
                     archiveData.push({
                        year: year,
                        month: month,
                        url: link.href,
                        name: link.textContent
                    });
                 }
            }
        });

        // Populate the select dropdown
        archiveData.forEach((item, index) =&gt; {
            const option = document.createElement(&#39;option&#39;);
            option.value = index;
            option.textContent = `${monthNames[item.month]} ${item.year}`;
            monthSelect.appendChild(option);
        });
        
        // Load the most recent month by default
        if (archiveData.length &gt; 0) {
            loadMonth(0);
        }
    }

    // 2. Function to load data and build the calendar for a given month index
    async function loadMonth(index) {
        if (index &lt; 0 || index &gt;= archiveData.length) return;
        
        monthSelect.value = index;
        calendarBody.innerHTML = &#39;&#39;;
        loader.style.display = &#39;block&#39;;

        const selectedMonthData = archiveData[index];
        const { year, month } = selectedMonthData;

        try {
            // Fetch the posts for the selected month archive page
            const response = await fetch(selectedMonthData.url);
            const text = await response.text();
            const parser = new DOMParser();
            const doc = parser.parseFromString(text, &#39;text/html&#39;);

            const postDates = new Set();
            // Look for a common post date element. This might need adjustment based on the theme.
            const dateElements = doc.querySelectorAll(&#39;.post-date, .published, .date-header span, time[datetime]&#39;);
            dateElements.forEach(el =&gt; {
                 const dateString = el.getAttribute(&#39;datetime&#39;) || el.textContent;
                 const postDate = new Date(dateString);
                 if (postDate.getFullYear() === year &amp;&amp; postDate.getMonth() === month) {
                     postDates.add(postDate.getDate());
                 }
            });

            buildCalendar(year, month, postDates, selectedMonthData.url);

        } catch (error) {
            console.error(&#39;Error fetching or parsing archive page:&#39;, error);
            calendarBody.innerHTML = &#39;&lt;tr&gt;&lt;td colspan=&quot;7&quot;&gt;Error al cargar las publicaciones.&lt;/td&gt;&lt;/tr&gt;&#39;;
        } finally {
            loader.style.display = &#39;none&#39;;
        }
    }
    
    // 3. Function to build the calendar HTML
    function buildCalendar(year, month, postDates, archiveUrl) {
        calendarBody.innerHTML = &#39;&#39;; // Clear previous content
        const firstDay = new Date(year, month, 1).getDay();
        const daysInMonth = new Date(year, month + 1, 0).getDate();

        let date = 1;
        for (let i = 0; i &lt; 6; i++) { // Max 6 rows
            const row = document.createElement(&#39;tr&#39;);
            for (let j = 0; j &lt; 7; j++) {
                const cell = document.createElement(&#39;td&#39;);
                if (i === 0 &amp;&amp; j &lt; firstDay) {
                    cell.classList.add(&#39;not-in-month&#39;);
                } else if (date &gt; daysInMonth) {
                    break;
                } else {
                    cell.textContent = date;
                    cell.classList.add(&#39;calendar-day&#39;);
                    if (postDates.has(date)) {
                        cell.classList.add(&#39;has-posts&#39;);
                        const dayLink = document.createElement(&#39;a&#39;);
                        
                        // Construct the search URL for that specific day
                        const dayString = date &lt; 10 ? &#39;0&#39; + date : date;
                        const monthString = (month + 1) &lt; 10 ? &#39;0&#39; + (month + 1) : (month + 1);
                        const nextDay = new Date(year, month, date + 1);
                        const nextDayString = nextDay.getDate() &lt; 10 ? &#39;0&#39; + nextDay.getDate() : nextDay.getDate();
                        const nextMonthString = (nextDay.getMonth() + 1) &lt; 10 ? &#39;0&#39; + (nextDay.getMonth() + 1) : (nextDay.getMonth() + 1);
                        const nextYearString = nextDay.getFullYear();

                        // THE FIX IS HERE:  is replaced with &amp;
                        dayLink.href = `/search?updated-min=${year}-${monthString}-${dayString}T00:00:00-00:00&amp;updated-max=${nextYearString}-${nextMonthString}-${nextDayString}T00:00:00-00:00`;
                        dayLink.title = `Ver publicaciones del ${date}/${month + 1}/${year}`;
                        dayLink.textContent = date;
                        cell.textContent = &#39;&#39;;
                        cell.appendChild(dayLink);
                    }
                    date++;
                }
                row.appendChild(cell);
            }
            calendarBody.appendChild(row);
            if (date &gt; daysInMonth) {
                break;
            }
        }
    }

    // 4. Event Listeners
    monthSelect.addEventListener(&#39;change&#39;, (e) =&gt; {
        loadMonth(parseInt(e.target.value, 10));
    });

    prevButton.addEventListener(&#39;click&#39;, () =&gt; {
        const currentIndex = parseInt(monthSelect.value, 10);
        if (currentIndex + 1 &lt; archiveData.length) {
            loadMonth(currentIndex + 1);
        }
    });

    nextButton.addEventListener(&#39;click&#39;, () =&gt; {
        const currentIndex = parseInt(monthSelect.value, 10);
        if (currentIndex - 1 &gt;= 0) {
            loadMonth(currentIndex - 1);
        }
    });

    // Start the process
    parseArchiveLinks();
});
</script>
  </b:includable>
            <b:includable id='interval' var='intervalData'>
  <b:loop values='data:intervalData' var='interval'>
    <ul class='hierarchy'>
      <li expr:class='&quot;archivedate &quot; + data:interval.expclass'>
        <b:include cond='data:interval.toggleId' data='interval' name='toggle'/>
        <a class='post-count-link' expr:href='data:interval.url'>
          <data:interval.name/>
        </a>
        <span class='post-count' dir='ltr'>(<data:interval.post-count/>)</span>
        <b:include cond='data:interval.data' data='interval.data' name='interval'/>
        <b:include cond='data:interval.posts' data='interval.posts' name='posts'/>
      </li>
    </ul>
  </b:loop>
</b:includable>
            <b:includable id='menu' var='data'>
  <select expr:id='data:widget.instanceId + &quot;_ArchiveMenu&quot;'>
    <option value=''><data:title/></option>
    <b:loop values='data:data' var='i'>
      <option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
    </b:loop>
  </select>
</b:includable>
            <b:includable id='posts' var='posts'>
  <ul class='posts'>
    <b:loop values='data:posts' var='post'>
      <li><a expr:href='data:post.url'><data:post.title/></a></li>
    </b:loop>
  </ul>
</b:includable>
            <b:includable id='toggle' var='interval'>
  <a class='toggle' href='javascript:void(0)'>
    <span expr:class='&quot;zippy&quot; + (data:interval.expclass == &quot;expanded&quot; ? &quot; toggle-open&quot; : &quot;&quot;)'>
      <b:if cond='data:interval.expclass == &quot;expanded&quot;'>
        &#9660;&#160;
      <b:elseif cond='data:blog.languageDirection == &quot;rtl&quot;'/>
        &#9668;&#160;
      <b:else/>
        &#9658;&#160;
      </b:if>
    </span>
  </a>
</b:includable>
          </b:widget>

7. Guarda los Cambios

- Haz clic en "Guardar".

8. ¡Listo!

- Revisa tu blog para ver el nuevo Archivo Calendario Moderno en acción.

🔍 Personalización Opcional

Si deseas cambiar los colores o el estilo del calendario, modifica las variables CSS dentro del código:

:root {
  --calendar-primary-color: #007bff; /* Color principal (azul) */
  --calendar-secondary-color: #ffffff; /* Color de texto */
  --calendar-header-bg: #f8f9fa; /* Fondo del encabezado */
}

❓ Preguntas Frecuentes

❓ ¿Qué pasa si no veo el calendario?

- Verifica que hayas seguido todos los pasos correctamente.
- Asegúrate de que tu plantilla no tenga conflictos con el código.

❓ ¿Puedo cambiar el idioma del calendario?

- Sí, modifica los nombres de los meses en el código (monthNames).

💡 Conclusión

Ahora tienes un calendario de archivos moderno y funcional en tu blog de Blogger. Si necesitas ayuda, déjanos un comentario.

👉 ¿Te gustó el tutorial? ¡Compártelo con otros blogueros! 🚀

Nota: este tutorial fue actualizado completemante.

Créditos: AyudadeBlogger.com

Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE

¿Te ha resultado útil este artículo, recomiendanos?

Si

TAGS: Trucos BloggerWidgets para Blogger

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.