★my blogging calendar ★ [blog code]

blog makeover diaries

helloo local divas!

i’m sharing another blog code today. this one is a little different from the previous code i shared because you won’t need to add it through Add CSS. this time, it’s an HTML code that you can simply install through an HTML/JavaScript gadget on Blogger.

this is MY BLOGGING CALENDAR, and aside from being a little decoration for your blog, it also keeps track of the dates when you published a post.

the dates with published posts will be marked automatically on the calendar with a yellow star⭐. if you hover your cursor over one of those stars, a tooltip will appear showing the title of the post published on that day. you can then click the title to go directly to the post.

so, it’s basically a little calendar that also works as a mini archive of your blogging days. i thought it would be a fun little addition, especially if you like keeping track of your blogging activity or simply want another little thing sitting in your sidebar.

here’s the code:

blogging calendar code

HTML · CSS

THE CODE

<div id="auto-blog-calendar">
  <div class="abc-title">MY BLOGGING CALENDAR</div>

  <div class="abc-header">
    <button aria-label="Previous month" id="abc-prev" type="button">‹</button>
    <span id="abc-month">Loading...</span>
    <button aria-label="Next month" id="abc-next" type="button">›</button>
  </div>

  <div class="abc-weekdays">
    <span>Su</span><span>Mo</span><span>Tu</span>
    <span>We</span><span>Th</span><span>Fr</span><span>Sa</span>
  </div>

  <div class="abc-days" id="abc-days"></div>

  <div class="abc-legend">
    <span class="abc-star">★</span> blogging days
  </div>

  <div class="abc-status" id="abc-status"></div>
</div>

<style>
#auto-blog-calendar {
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
  padding: 12px;
  box-sizing: border-box;
  background: transparent;
  color: inherit;
  font-family: "Courier New", Courier, monospace;
  text-align: center;
}

#auto-blog-calendar * {
  box-sizing: border-box;
  font-family: "Courier New", Courier, monospace;
}

/* TITLE WRITTEN ON TAPE */
#auto-blog-calendar .abc-title {
  position: relative;
  display: table;
  width: auto;
  max-width: 100%;
  margin: 0 auto 24px;
  padding: 8px 13px;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.2px;
  line-height: 1.5;
  color: #51413f;
  background: rgba(255, 190, 190, 0.72);
  border: none;
  box-shadow: 0 1px 2px rgba(70, 50, 40, 0.08);
  transform: rotate(-2deg);
  z-index: 1;
}

#auto-blog-calendar .abc-title::before,
#auto-blog-calendar .abc-title::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 5px;
  border-left: 1px dashed rgba(255, 255, 255, 0.65);
  border-right: 1px dashed rgba(255, 255, 255, 0.35);
  pointer-events: none;
}

#auto-blog-calendar .abc-title::before {
  left: 2px;
}

#auto-blog-calendar .abc-title::after {
  right: 2px;
}

/* MONTH NAVIGATION */
#auto-blog-calendar .abc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

#auto-blog-calendar #abc-month {
  font-size: 12px;
  font-weight: bold;
}

#auto-blog-calendar .abc-header button {
  border: none;
  background: transparent;
  color: inherit;
  font-size: 24px;
  line-height: 1;
  padding: 2px 8px;
  cursor: pointer;
}

/* WEEKDAYS + DATES */
#auto-blog-calendar .abc-weekdays,
#auto-blog-calendar .abc-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px 2px;
}

#auto-blog-calendar .abc-weekdays {
  margin-bottom: 8px;
  font-size: 10px;
  font-weight: bold;
  opacity: 0.75;
}

#auto-blog-calendar .abc-day {
  min-width: 0;
  height: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border: none;
  border-radius: 5px;
  padding: 2px 0;
  background: transparent;
  color: inherit;
  font-size: 12px;
}

#auto-blog-calendar button.abc-day {
  cursor: pointer;
}

#auto-blog-calendar button.abc-day:hover {
  background: rgba(230, 160, 181, 0.2);
}

#auto-blog-calendar .abc-posted {
  background: rgba(255, 220, 105, 0.18);
}

#auto-blog-calendar .abc-today {
  outline: 1px solid #e8a0b5;
  outline-offset: -2px;
}

/* BLOGGING STAR */
#auto-blog-calendar .abc-star {
  display: block !important;
  color: #ffcc33 !important;
  font-family: Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: bold !important;
  line-height: 12px !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#auto-blog-calendar .abc-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 12px;
  font-size: 10px;
  opacity: 0.75;
}

#auto-blog-calendar .abc-status {
  margin-top: 6px;
  font-size: 10px;
  opacity: 0.7;
}

#auto-blog-calendar .abc-status:empty {
  display: none;
}

/* CLICKABLE POST TITLE TOOLTIP */
#abc-post-tooltip {
  position: fixed;
  z-index: 999999;
  display: none;
  width: max-content;
  max-width: 220px;
  padding: 8px 11px;
  background: #fff4b8;
  color: #333333;
  border: 1px solid #e8cd62;
  border-radius: 6px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
  font-family: "Courier New", Courier, monospace;
  font-size: 11px;
  line-height: 1.6;
  text-align: left;
  overflow-wrap: anywhere;
  pointer-events: auto;
}

#abc-post-tooltip .abc-tooltip-title {
  display: block;
  color: #333333;
  text-decoration: none;
  cursor: pointer;
}

#abc-post-tooltip .abc-tooltip-title:hover {
  text-decoration: underline;
}

#abc-post-tooltip .abc-tooltip-title + .abc-tooltip-title {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid #e8cd62;
}
</style>

<script>
(function () {
  var root = document.getElementById("auto-blog-calendar");
  if (!root || root.dataset.ready) return;
  root.dataset.ready = "true";

  var monthNames = [
    "January", "February", "March", "April",
    "May", "June", "July", "August",
    "September", "October", "November", "December"
  ];

  var today = new Date();
  var year = today.getFullYear();
  var month = today.getMonth();
  var postsByDate = {};
  var status = root.querySelector("#abc-status");
  var daysBox = root.querySelector("#abc-days");
  var monthLabel = root.querySelector("#abc-month");

  var tooltip = document.getElementById("abc-post-tooltip");

  if (!tooltip) {
    tooltip = document.createElement("div");
    tooltip.id = "abc-post-tooltip";
    tooltip.setAttribute("role", "tooltip");
    document.body.appendChild(tooltip);
  }

  var tooltipTimer = null;

  function cancelTooltipHide() {
    if (tooltipTimer) {
      clearTimeout(tooltipTimer);
      tooltipTimer = null;
    }
  }

  function scheduleTooltipHide() {
    cancelTooltipHide();

    tooltipTimer = setTimeout(function () {
      hideTooltip();
    }, 250);
  }

  function hideTooltip() {
    cancelTooltipHide();
    tooltip.style.display = "none";
  }

  function showTooltip(cell, posts) {
    cancelTooltipHide();
    tooltip.innerHTML = "";

    posts.forEach(function (post) {
      var title = document.createElement("a");
      title.className = "abc-tooltip-title";
      title.textContent = post.title;
      title.href = post.url;
      title.target = "_blank";
      title.rel = "noopener noreferrer";
      tooltip.appendChild(title);
    });

    tooltip.style.display = "block";

    var rect = cell.getBoundingClientRect();
    var tipRect = tooltip.getBoundingClientRect();
    var gap = 8;

    var left = rect.left + rect.width / 2 - tipRect.width / 2;
    var top = rect.top - tipRect.height - gap;

    left = Math.max(
      8,
      Math.min(left, window.innerWidth - tipRect.width - 8)
    );

    if (top < 8) {
      top = rect.bottom + gap;
    }

    if (top + tipRect.height > window.innerHeight - 8) {
      top = window.innerHeight - tipRect.height - 8;
    }

    tooltip.style.left = left + "px";
    tooltip.style.top = Math.max(8, top) + "px";
  }

  tooltip.addEventListener("mouseenter", cancelTooltipHide);
  tooltip.addEventListener("mouseleave", scheduleTooltipHide);

  function dateKey(y, m, d) {
    return y + "-" +
      String(m + 1).padStart(2, "0") + "-" +
      String(d).padStart(2, "0");
  }

  function render() {
    monthLabel.textContent = monthNames[month] + " " + year;
    daysBox.innerHTML = "";
    hideTooltip();

    var offset = new Date(year, month, 1).getDay();
    var total = new Date(year, month + 1, 0).getDate();

    for (var i = 0; i < offset; i++) {
      var blank = document.createElement("div");
      blank.className = "abc-day";
      daysBox.appendChild(blank);
    }

    for (var d = 1; d <= total; d++) {
      (function (day) {
        var key = dateKey(year, month, day);
        var dayPosts = postsByDate[key] || [];

        var cell = document.createElement(
          dayPosts.length ? "button" : "div"
        );

        cell.className = "abc-day";

        if (dayPosts.length) {
          cell.type = "button";
          cell.classList.add("abc-posted");

          cell.addEventListener("mouseenter", function () {
            showTooltip(cell, dayPosts);
          });

          cell.addEventListener("mouseleave", scheduleTooltipHide);

          cell.addEventListener("focus", function () {
            showTooltip(cell, dayPosts);
          });

          cell.addEventListener("blur", scheduleTooltipHide);

          cell.addEventListener("click", function () {
            if (dayPosts.length === 1) {
              window.open(dayPosts[0].url, "_blank", "noopener,noreferrer");
            } else {
              showTooltip(cell, dayPosts);
            }
          });

          cell.addEventListener("touchstart", function () {
            showTooltip(cell, dayPosts);
          }, { passive: true });
        }

        var number = document.createElement("span");
        number.textContent = day;
        cell.appendChild(number);

        if (dayPosts.length) {
          var star = document.createElement("span");
          star.className = "abc-star";
          star.innerHTML = "&#9733;";
          cell.appendChild(star);
        }

        if (
          year === today.getFullYear() &&
          month === today.getMonth() &&
          day === today.getDate()
        ) {
          cell.classList.add("abc-today");
        }

        daysBox.appendChild(cell);
      })(d);
    }
  }

  root.querySelector("#abc-prev").addEventListener("click", function () {
    month--;

    if (month < 0) {
      month = 11;
      year--;
    }

    render();
  });

  root.querySelector("#abc-next").addEventListener("click", function () {
    month++;

    if (month > 11) {
      month = 0;
      year++;
    }

    render();
  });

  function loadFeed(startIndex) {
    var callback = "abcCalendarFeed" + startIndex;
    var script = document.createElement("script");
    var finished = false;

    window[callback] = function (data) {
      if (finished) return;
      finished = true;

      var feed = data.feed || {};
      var entries = feed.entry || [];

      entries.forEach(function (entry) {
        if (!entry.published || !entry.link) return;

        var key = entry.published.$t.substring(0, 10);

        var link = entry.link.find(function (item) {
          return item.rel === "alternate";
        });

        if (!link) return;

        if (!postsByDate[key]) {
          postsByDate[key] = [];
        }

        postsByDate[key].push({
          url: link.href,
          title: entry.title ? entry.title.$t : "Blog post"
        });
      });

      render();

      var total = Number(
        feed.openSearch$totalResults &&
        feed.openSearch$totalResults.$t || 0
      );

      var next = startIndex + entries.length;

      if (entries.length && next < total && next < 500) {
        loadFeed(next);
      } else {
        status.textContent = "";
        render();
      }
    };

    script.src = "/feeds/posts/default?alt=json-in-script" +
      "&max-results=150" +
      "&start-index=" + (startIndex + 1) +
      "&callback=" + callback;

    script.onerror = function () {
      if (!finished) {
        finished = true;
        status.textContent =
          "Could not load posts. Check Blogger feed settings.";
      }
    };

    document.body.appendChild(script);
  }

  render();
  status.textContent = "Loading post dates...";
  loadFeed(0);
})();
</script>

Hope it works!

how to install, it’s pretty simple:

1. go to Blogger → Layout
2. choose where you want the calendar to appear
3. click Add a Gadget
4. select HTML/JavaScript
5. paste the code into the Content box
6. save the gadget and your layout

and that's it! now you have a little decoration and a mini archive all in one. hope you like it! 

that's all for now! see you in the next blog code (if inspiration strikes again). see you around the internet, happy blogging <3

xoxo,

your local girl