블로거 다이나믹 뷰 테마 날짜 툴팁 수정 | Modifying date tooltip in Blogger Dynamic Views Theme

정말 정말 오래 사용해왔던 블로거 다이나믹 뷰(Dynamic Views) 테마를 이제 접어야 할 때가 된 것 같다. 무엇보다 모바일 기기에서 접속했을 때 페이지 뜨는 게, 실제로는 문장은 빨리 뜨지만 이미지 뜨는 게 너무 느리다. 그리고 데스크톱 화면에서의 디자인도 너무 밋밋한 것 같다.

이 글은 그동안 다이나믹 뷰 테마를 쓸 때 글 하단의 포스팅한 날짜를 표시하는 부분에 마우스 오버를 하면 뜨는 툴팁에 대한 개선 코드를 기록해 두려고 쓰는 것이다.

블로거는 글 하단 포스팅한 날짜 부분의 툴팁이 "2026-09-22T02:04:00Z" 형식으로 뜬다. 또 이건 지역별 시간 수정(GMT + 9시간)도 없이 그리니치 시간(GMT)으로 표시되는 것이다.

각설하고, 이를 수정하는 방법 및 코드는 아래와 같다.

* 블로거 - Theme - Customize의 오른 화살표 - Edit HTML로 가서
* 윗 부분 <head> 바로 아래 열에 아래 코드 삽입

<!-- 게시글 (마우스 오버) 날짜,시각 사용자 수정 시작 -->
<script type='text/javascript'>
//<![CDATA[
(function() {
  const formatter = new Intl.DateTimeFormat('en-US', {
    month: 'short',
    day: 'numeric',
    year: 'numeric',
    hour: 'numeric',
    minute: '2-digit',
    hour12: true
  });

  const targetSelector = '.publish-date, .post-timestamp, time, .date, .time, .item-date, .ss, [title]';

  function processElement(el) {
    if (!el || el.nodeType !== 1) return;

    // title 속성, datetime 속성, 또는 textContent에서 ISO 문자열 추출
    const rawTitle = el.getAttribute('title');
    const rawDate = rawTitle || el.getAttribute('datetime') || el.textContent;

    if (rawDate && typeof rawDate === 'string' && rawDate.includes('T') && rawDate.includes('Z')) {
      const dateObj = new Date(rawDate);

      if (!isNaN(dateObj.getTime())) {
        const finalFormat = formatter.format(dateObj);

        if (rawTitle !== finalFormat) {
          el.setAttribute('title', finalFormat);
        }
      }
    }
  }

  function scanAndProcess(target) {
    if (!target) return;
    if (target.matches && target.matches(targetSelector)) {
      processElement(target);
    }
    if (target.querySelectorAll) {
      const children = target.querySelectorAll(targetSelector);
      for (let i = 0; i < children.length; i++) {
        processElement(children[i]);
      }
    }
  }

  function initObserver() {
    if (!document.body) {
      setTimeout(initObserver, 30);
      return;
    }

    // 1. 초기 노드 전체 스캔
    scanAndProcess(document.body);

    // 2. MutationObserver 설정 (노드 추가 + title 속성 변경 감지)
    const observer = new MutationObserver(function(mutations) {
      for (let i = 0; i < mutations.length; i++) {
        const mutation = mutations[i];

        if (mutation.type === 'childList') {
          for (let j = 0; j < mutation.addedNodes.length; j++) {
            scanAndProcess(mutation.addedNodes[j]);
          }
        } else if (mutation.type === 'attributes' && mutation.attributeName === 'title') {
          processElement(mutation.target);
        }
      }
    });

    observer.observe(document.body, {
      childList: true,
      subtree: true,
      attributes: true,
      attributeFilter: ['title']
    });

    // 3. 마우스 오버 시점 보완 (동적 덮어쓰기 대응)
    document.body.addEventListener('mouseover', function(e) {
      const target = e.target.closest(targetSelector);
      if (target) {
        processElement(target);
      }
    }, true);
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initObserver);
  } else {
    initObserver();
  }
})();
//]]>
</script>
<!-- 게시글 (마우스 오버) 날짜,시각 사용자 수정 끝 -->

아래는 수정된 상태.

만약 Settings - Custom redirects을 걸어 두었다면 위 코드는 안먹힌다. 즉 Classic View를 쓰다가 리다이렉팅으로 Magazine View를 걸어두면 안됨. 이 때는 새로 시작해서 테마를 Dynamic Views - Magazine View를 적용한 후 다시 위 코드를 삽입해야 한다.