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
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: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:
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 .
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" ."+" para agregarlo.
5. Edita el Código HTML del Widget
- Ve a "Tema" en el menú lateral."Editar HTML" ."Ir al widget" ."BlogArchive1" .
6. Reemplaza el Código Existente
- Elimina todo el código del widget.
- Pega el siguiente código en su lugar:
Copiar código
<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 != ""'>
<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'><</button>
<select id='archive-calendar-month-year'/>
<button id='archive-calendar-next'>></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 == "FLAT"' 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, "Segoe UI", Roboto, "Helvetica Neue", 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('DOMContentLoaded', function() {
const archiveList = document.querySelector('#ArchiveList ul.flat');
if (!archiveList) {
console.warn('Blogger Archive list not found. Calendar cannot be initialized.');
const container = document.getElementById('archive-calendar-container');
if(container) container.style.display = 'none';
return;
}
const monthSelect = document.getElementById('archive-calendar-month-year');
const prevButton = document.getElementById('archive-calendar-prev');
const nextButton = document.getElementById('archive-calendar-next');
const calendarBody = document.querySelector('#archive-calendar tbody');
const loader = document.getElementById('archive-calendar-loader');
let archiveData = [];
const monthNames = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];
// 1. Parse existing archive links to build data structure
function parseArchiveLinks() {
const links = archiveList.querySelectorAll('li.archivedate a');
links.forEach(link => {
const url = new URL(link.href);
const pathParts = url.pathname.split('/').filter(p => p);
if(pathParts.length >= 2) {
const year = parseInt(pathParts[0], 10);
const month = parseInt(pathParts[1], 10) - 1; // JS months are 0-indexed
if(!isNaN(year) && !isNaN(month)){
archiveData.push({
year: year,
month: month,
url: link.href,
name: link.textContent
});
}
}
});
// Populate the select dropdown
archiveData.forEach((item, index) => {
const option = document.createElement('option');
option.value = index;
option.textContent = `${monthNames[item.month]} ${item.year}`;
monthSelect.appendChild(option);
});
// Load the most recent month by default
if (archiveData.length > 0) {
loadMonth(0);
}
}
// 2. Function to load data and build the calendar for a given month index
async function loadMonth(index) {
if (index < 0 || index >= archiveData.length) return;
monthSelect.value = index;
calendarBody.innerHTML = '';
loader.style.display = 'block';
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, 'text/html');
const postDates = new Set();
// Look for a common post date element. This might need adjustment based on the theme.
const dateElements = doc.querySelectorAll('.post-date, .published, .date-header span, time[datetime]');
dateElements.forEach(el => {
const dateString = el.getAttribute('datetime') || el.textContent;
const postDate = new Date(dateString);
if (postDate.getFullYear() === year && postDate.getMonth() === month) {
postDates.add(postDate.getDate());
}
});
buildCalendar(year, month, postDates, selectedMonthData.url);
} catch (error) {
console.error('Error fetching or parsing archive page:', error);
calendarBody.innerHTML = '<tr><td colspan="7">Error al cargar las publicaciones.</td></tr>';
} finally {
loader.style.display = 'none';
}
}
// 3. Function to build the calendar HTML
function buildCalendar(year, month, postDates, archiveUrl) {
calendarBody.innerHTML = ''; // 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 < 6; i++) { // Max 6 rows
const row = document.createElement('tr');
for (let j = 0; j < 7; j++) {
const cell = document.createElement('td');
if (i === 0 && j < firstDay) {
cell.classList.add('not-in-month');
} else if (date > daysInMonth) {
break;
} else {
cell.textContent = date;
cell.classList.add('calendar-day');
if (postDates.has(date)) {
cell.classList.add('has-posts');
const dayLink = document.createElement('a');
// Construct the search URL for that specific day
const dayString = date < 10 ? '0' + date : date;
const monthString = (month + 1) < 10 ? '0' + (month + 1) : (month + 1);
const nextDay = new Date(year, month, date + 1);
const nextDayString = nextDay.getDate() < 10 ? '0' + nextDay.getDate() : nextDay.getDate();
const nextMonthString = (nextDay.getMonth() + 1) < 10 ? '0' + (nextDay.getMonth() + 1) : (nextDay.getMonth() + 1);
const nextYearString = nextDay.getFullYear();
// THE FIX IS HERE: is replaced with &
dayLink.href = `/search?updated-min=${year}-${monthString}-${dayString}T00:00:00-00:00&updated-max=${nextYearString}-${nextMonthString}-${nextDayString}T00:00:00-00:00`;
dayLink.title = `Ver publicaciones del ${date}/${month + 1}/${year}`;
dayLink.textContent = date;
cell.textContent = '';
cell.appendChild(dayLink);
}
date++;
}
row.appendChild(cell);
}
calendarBody.appendChild(row);
if (date > daysInMonth) {
break;
}
}
}
// 4. Event Listeners
monthSelect.addEventListener('change', (e) => {
loadMonth(parseInt(e.target.value, 10));
});
prevButton.addEventListener('click', () => {
const currentIndex = parseInt(monthSelect.value, 10);
if (currentIndex + 1 < archiveData.length) {
loadMonth(currentIndex + 1);
}
});
nextButton.addEventListener('click', () => {
const currentIndex = parseInt(monthSelect.value, 10);
if (currentIndex - 1 >= 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='"archivedate " + 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 + "_ArchiveMenu"'>
<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='"zippy" + (data:interval.expclass == "expanded" ? " toggle-open" : "")'>
<b:if cond='data:interval.expclass == "expanded"'>
▼ 
<b:elseif cond='data:blog.languageDirection == "rtl"'/>
◄ 
<b:else/>
► 
</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.
❓ ¿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.
Recuerda suscribirte:
Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente
SUSCRIBIRSE
¿Te ha resultado útil este artículo, recomiendanos?
43 comentarios: