local girl's journal : Blog Code

hi <div>as!

this is where i'm collecting the blog codes i've shared in my posts, so you don't have to go digging through the archive every time you want to try one.

i've divided them into two chapters: html gadget and add css. so let's get into it.

html gadget

this chapter is for codes that you can add as a blogger gadget.

how to add it

1. go to your blogger dashboard → layout.

2. click add a gadget wherever you'd like the gadget to appear.

3. choose html/javascript from the gadget list.

4. copy the code from the section below and paste it into the content box.

5. save your layout and check your blog. if everything went according to plan, your new gadget should be there.

the codes

here are the html gadget codes i've shared so far.

[BLOGGING CALENDAR]

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>

add css

this chapter is for codes that change the appearance of something that's already on your blog — colours, fonts, borders, spacing, little decorations, and all those tiny details that make a blog feel more like you.

how to add it

1. go to your blogger dashboard → theme.

2. click customize.

3. open advanced, then find add css.

4. copy the css code from the section below and paste it into the css box.

5. click apply to blog.

6. preview your blog and see if everything looks the way you want. if it does, you're done. ✦

the codes

and here are the css bits i've shared so far.

[SPIRAL NOTEBOOK DECORATIVE]

spiral notebook code

HTML · CSS

THE CODE

/* SPIRAL NOTEBOOK POST */

.post {
  position: relative;
  z-index: 1;
}

/* Spiral */

.post::before {
  content: "";

  position: absolute;

  top: -35px;
  left: 0;

  width: 100%;
  height: 42px;

  background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnXojFvle7tDopPODvalzH7mQrXP6TaOBbbS_R97CCvhP2GsvwZ1We25r-RpgxYztlj2p1WLyP40bIRRtpsSNHH15u9-qoorxeId4dy5tweViHFetkhat5vJZOSdsy74eTGNzZ_f5ycWZ2V6CseprcH5BjqPoBhBlCbPFk3t6CakHIgyR7-2AR2XXO7N4O/s815/6ed442d0-17d4-4bc5-a90d-155ee0dacc1a_nobg_preview_photiu.ai.png");

  background-repeat: repeat-x;
  background-position: center center;
  background-size: auto 39px;

  pointer-events: none;
  z-index: 20;
}

/* Date */

.post-timestamp,
.post-header-line-1,
.post-meta,
.post-meta a,
.date-header,
.post-footer-line-1 {
  position: relative !important;
  z-index: 50 !important;
  top: -10px !important;
}

/* Post Title */

.post-title,
.entry-title {
  position: relative;
  z-index: 30;

  transform: translateY(10px);
}

/* MOBILE */

@media screen and (max-width: 600px) {
  .post::before {
    top: -27px;
    height: 36px;
    background-size: auto 36px;
  }

  .post-timestamp,
  .post-header-line-1 {
    transform: translateY(-5px);
  }

  .post-title,
  .entry-title {
    transform: translateY(8px);
  }
}

.post-timestamp {
  position: relative !important;
  top: 8px !important;
}

and that's it for now.

i'll add more whenever there's something new to share, so feel free to stop by again.

xoxo,

your local girl

local girl's journal

Pages

Blog Code

html gadget

how to add it

the codes

[BLOGGING CALENDAR]

add css

how to add it

the codes

[SPIRAL NOTEBOOK DECORATIVE]

No comments:

Post a Comment

my socials

more cookie?

play puzzle