7/21/26 - Blog history calendar script

This custom widget adds a clean, dynamic calendar to your Blogger site. It automatically scans your published posts and highlights the days you posted with clickable links so readers can easily browse your archive.

Installing this calendar requires no advanced coding—just copy and paste!

Image Preview

Click "read more" for the code and instructions.

English Version

<div id="meu-calendario-blogger"> <div class="cal-header"> <button onclick="mudarMes(-1)">❮</button> <span id="cal-mes-ano"></span> <button onclick="mudarMes(1)">❯</button> </div> <div class="cal-grid" id="cal-dias"> </div> </div> <style> /* ========================================================== CALENDAR COLOR & STYLE CONFIGURATION Change the hex codes (#...) below to customize your theme. ========================================================== */ #meu-calendario-blogger { max-width: 100%; /* Main Background & Outer Border */ background: #ffffff; /* [COLOR] Calendar background color */ border: 1px solid #e5e5e5; /* [COLOR] Outer border color */ border-radius: 18px; overflow: hidden; font-family: 'IBM Plex Serif', Georgia, serif; color: #222222; /* [COLOR] Default text color */ } .cal-header { display: flex; justify-content: space-between; align-items: center; /* Header Box Styles */ background: #f9f9f9; /* [COLOR] Header background color */ color: #222222; /* [COLOR] Header month/year text color */ padding: 6px 14px; font-weight: bold; font-size: 0.9em; letter-spacing: 1px; text-transform: uppercase; border-radius: 30px; border: 1px dashed #d1d1d1; /* [COLOR] Header dashed border color */ margin: 8px 8px 10px 8px; } .cal-header button { background: none; border: none; color: #777777; /* [COLOR] Navigation arrows color */ font-size: 11px; cursor: pointer; transition: transform 0.2s, color 0.2s; padding: 0 4px; font-family: sans-serif; } .cal-header button:hover { transform: scale(1.2); color: #000000; /* [COLOR] Navigation arrows color on hover */ } .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; padding: 0 8px 10px 8px; gap: 4px 2px; background-color: #ffffff; /* [COLOR] Grid area background color */ align-items: center; justify-items: center; } .cal-day-name { font-weight: bold; color: #888888; /* [COLOR] Weekday initials (S M T W T F S) color */ font-size: 0.75em; margin-bottom: 4px; font-family: 'IBM Plex Serif', Georgia, serif; } .cal-day { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; font-size: 0.85em; color: #555555; /* [COLOR] Regular days text color */ line-height: 1; font-family: 'IBM Plex Serif', Georgia, serif; box-sizing: border-box; } /* ========================================================== POST DAYS (Active state indicator) ========================================================== */ .cal-day.has-post { background: #333333; /* [COLOR] Badge background for days WITH a post */ color: #ffffff !important; /* [COLOR] Text color for days WITH a post */ font-weight: bold; text-decoration: none; border-radius: 50%; transition: all 0.3s ease; cursor: pointer; } .cal-day.has-post:hover { background: #000000; /* [COLOR] Badge background when hovering */ transform: scale(1.15); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25); /* [COLOR] Soft shadow effect on hover */ } </style> <script> (function() { const containerDays = document.getElementById('cal-dias'); const txtMonthYear = document.getElementById('cal-mes-ano'); let currentDate = new Date(); let currentMonth = currentDate.getMonth(); let currentYear = currentDate.getFullYear(); let postData = {}; // Fetches the last 500 blog posts to extract publication dates and titles fetch('/feeds/posts/summary?alt=json&max-results=500') .then(response => response.json()) .then(data => { const posts = data.feed.entry || []; posts.forEach(post => { const pubDate = new Date(post.published.$t); const dateString = `${pubDate.getFullYear()}-${String(pubDate.getMonth()+1).padStart(2, '0')}-${String(pubDate.getDate()).padStart(2, '0')}`; let postLink = ''; post.link.forEach(l => { if(l.rel === 'alternate') postLink = l.href; }); let postTitle = post.title.$t || "View post"; if(!postData[dateString]) { postData[dateString] = { link: postLink, title: postTitle }; } }); renderCalendar(currentMonth, currentYear); }) .catch(err => console.error("Error loading calendar:", err)); window.renderCalendar = function(month, year) { const monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; const daysInMonth = new Date(year, month + 1, 0).getDate(); const firstDayIndex = new Date(year, month, 1).getDay(); txtMonthYear.innerText = `${monthNames[month]} ${year}`; // English initials: Sunday (S), Monday (M), Tuesday (T), Wednesday (W), Thursday (T), Friday (F), Saturday (S) let html = ` <div class="cal-day-name">S</div><div class="cal-day-name">M</div> <div class="cal-day-name">T</div><div class="cal-day-name">W</div> <div class="cal-day-name">T</div><div class="cal-day-name">F</div> <div class="cal-day-name">S</div> `; for(let i = 0; i < firstDayIndex; i++) { html += `<div></div>`; } for(let day = 1; day <= daysInMonth; day++) { const dateCheck = `${year}-${String(month+1).padStart(2, '0')}-${String(day).padStart(2, '0')}`; if(postData[dateCheck]) { const safeTitle = postData[dateCheck].title.replace(/"/g, '"'); const safeLink = postData[dateCheck].link; html += `<a href="${safeLink}" class="cal-day has-post" title="${safeTitle}">${day}</a>`; } else { html += `<div class="cal-day">${day}</div>`; } } containerDays.innerHTML = html; } window.mudarMes = function(direction) { currentMonth += direction; if(currentMonth > 11) { currentMonth = 0; currentYear++; } if(currentMonth < 0) { currentMonth = 11; currentYear--; } renderCalendar(currentMonth, currentYear); }; })(); </script>

Portuguese Version 

<div id="meu-calendario-blogger"> <div class="cal-header"> <button onclick="mudarMes(-1)">❮</button> <span id="cal-mes-ano"></span> <button onclick="mudarMes(1)">❯</button> </div> <div class="cal-grid" id="cal-dias"> </div> </div> <style> /* ========================================================== CONFIGURAÇÃO DE CORES E ESTILOS DO CALENDÁRIO Altere os códigos hexadecimais (#...) abaixo para personalizar. ========================================================== */ #meu-calendario-blogger { max-width: 100%; /* Fundo Principal e Borda Externa */ background: #ffffff; /* [COR] Cor de fundo do calendário */ border: 1px solid #e5e5e5; /* [COR] Cor da borda externa */ border-radius: 18px; overflow: hidden; font-family: 'IBM Plex Serif', Georgia, serif; color: #222222; /* [COR] Cor padrão do texto */ } .cal-header { display: flex; justify-content: space-between; align-items: center; /* Estilos do Cabeçalho */ background: #f9f9f9; /* [COR] Cor de fundo do cabeçalho */ color: #222222; /* [COR] Cor do texto do mês/ano */ padding: 6px 14px; font-weight: bold; font-size: 0.9em; letter-spacing: 1px; text-transform: uppercase; border-radius: 30px; border: 1px dashed #d1d1d1; /* [COR] Borda tracejada do cabeçalho */ margin: 8px 8px 10px 8px; } .cal-header button { background: none; border: none; color: #777777; /* [COR] Cor das setas de navegação */ font-size: 11px; cursor: pointer; transition: transform 0.2s, color 0.2s; padding: 0 4px; font-family: sans-serif; } .cal-header button:hover { transform: scale(1.2); color: #000000; /* [COR] Cor das setas ao passar o mouse */ } .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; padding: 0 8px 10px 8px; gap: 4px 2px; background-color: #ffffff; /* [COR] Cor de fundo da grade de dias */ align-items: center; justify-items: center; } .cal-day-name { font-weight: bold; color: #888888; /* [COR] Cor das iniciais dos dias da semana (D S T Q Q S S) */ font-size: 0.75em; margin-bottom: 4px; font-family: 'IBM Plex Serif', Georgia, serif; } .cal-day { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; font-size: 0.85em; color: #555555; /* [COR] Cor dos números dos dias comuns */ line-height: 1; font-family: 'IBM Plex Serif', Georgia, serif; box-sizing: border-box; } /* ========================================================== DIAS COM POSTAGEM (Indicador de post publicado) ========================================================== */ .cal-day.has-post { background: #333333; /* [COR] Fundo do circulozinho nos dias COM post */ color: #ffffff !important; /* [COR] Cor do número do dia COM post */ font-weight: bold; text-decoration: none; border-radius: 50%; transition: all 0.3s ease; cursor: pointer; } .cal-day.has-post:hover { background: #000000; /* [COR] Cor do circulozinho ao passar o mouse */ transform: scale(1.15); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25); /* [COR] Sombra suave ao passar o mouse */ } </style> <script> (function() { const containerDias = document.getElementById('cal-dias'); const txtMesAno = document.getElementById('cal-mes-ano'); let dataAtual = new Date(); let mesAtual = dataAtual.getMonth(); let anoAtual = dataAtual.getFullYear(); let dadosDosPosts = {}; // Busca os últimos 500 posts do blog para extrair as datas e títulos fetch('/feeds/posts/summary?alt=json&max-results=500') .then(response => response.json()) .then(data => { const posts = data.feed.entry || []; posts.forEach(post => { const dataPub = new Date(post.published.$t); const dataString = `${dataPub.getFullYear()}-${String(dataPub.getMonth()+1).padStart(2, '0')}-${String(dataPub.getDate()).padStart(2, '0')}`; let linkPost = ''; post.link.forEach(l => { if(l.rel === 'alternate') linkPost = l.href; }); let tituloPost = post.title.$t || "Ver postagem"; if(!dadosDosPosts[dataString]) { dadosDosPosts[dataString] = { link: linkPost, titulo: tituloPost }; } }); renderizarCalendario(mesAtual, anoAtual); }) .catch(err => console.error("Erro ao carregar o calendário:", err)); window.renderizarCalendario = function(mes, ano) { const nomesMeses = ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"]; const diasNoMes = new Date(ano, mes + 1, 0).getDate(); const primeiroDiaIndex = new Date(ano, mes, 1).getDay(); txtMesAno.innerText = `${nomesMeses[mes]} ${ano}`; let html = ` <div class="cal-day-name">D</div><div class="cal-day-name">S</div> <div class="cal-day-name">T</div><div class="cal-day-name">Q</div> <div class="cal-day-name">Q</div><div class="cal-day-name">S</div> <div class="cal-day-name">S</div> `; for(let i = 0; i < primeiroDiaIndex; i++) { html += `<div></div>`; } for(let dia = 1; dia <= diasNoMes; dia++) { const verificadorData = `${ano}-${String(mes+1).padStart(2, '0')}-${String(dia).padStart(2, '0')}`; if(dadosDosPosts[verificadorData]) { const tituloSeguro = dadosDosPosts[verificadorData].titulo.replace(/"/g, '"'); const linkSeguro = dadosDosPosts[verificadorData].link; html += `<a href="${linkSeguro}" class="cal-day has-post" title="${tituloSeguro}">${dia}</a>`; } else { html += `<div class="cal-day">${dia}</div>`; } } containerDias.innerHTML = html; } window.mudarMes = function(direcao) { mesAtual += direcao; if(mesAtual > 11) { mesAtual = 0; anoAtual++; } if(mesAtual < 0) { mesAtual = 11; anoAtual--; } renderizarCalendario(mesAtual, anoAtual); }; })(); </script>

⚙️ How to Install on Blogger ⚙️

• Log in to your Blogger Dashboard.
• In the left-hand menu, click on Layout.
• Choose the sidebar or section where you want the calendar to appear, and click + Add a Gadget.
• In the popup window, scroll down and select HTML/JavaScript.
• (Optional) Give your gadget a Title (e.g., "Archive" or "Calendar").
• Paste the entire code (HTML, CSS, and JavaScript together) into the Content text box.
• Click Save, then click the Save icon (bottom right of the screen) to apply your layout changes.

🎨 How to Customize the Colors 🎨

All colors are controlled inside the <style> block of the code. Look for the comment tags labeled /* [COLOR] */ to easily swap hex codes.

Here is a quick cheat sheet of where each element gets styled:

Element	CSS Selector	Property to Edit
Calendar Background	#meu-calendario-blogger	background: #ffffff;
Outer Border	#meu-calendario-blogger	border: 1px solid #e5e5e5;
Header Background	.cal-header	background: #f9f9f9;
Header Dashed Border	.cal-header	border: 1px dashed #d1d1d1;
Arrow Buttons	.cal-header button	color: #777777;
Arrow Hover State	.cal-header button:hover	color: #000000;
Weekday Initials (S M T W T F S)	.cal-day-name	color: #888888;
Regular Day Numbers	.cal-day	color: #555555;
Days With Posts (Badge)	.cal-day.has-post	background: #333333;
Days With Posts (Hover)	.cal-day.has-post:hover	background: #000000;