구글 블로그 글 수정 날짜 표시하기

구글 블로그의 글(게시물)에는 기본적으로 그 글이 게시된 날짜만 표시되어 있는데 수정된 날짜도 표시되도록 하는 방법을 소개합니다.

가령 구글 블로그에서 새 글을 작성하고 게시하면 그 글은 아래와 같은 날짜 정보를 가지게 됩니다.

게시 날짜: 2020년 1월 1일
수정 날짜: 2020년 1월 1일

그리고 몇 달 후에 최신의 정보를 반영하기 위해 글을 수정했다고 치면

게시 날짜: 2020년 1월 1일
수정 날짜: 2020년 8월 8일

이렇게 글의 '수정 날짜'가 변경(업데이트)됩니다. 여기서, 변경된 수정 날짜를 글(게시물)에 표시하고 싶다고 생각하는 분들에게 도움이 될 듯합니다. 참고로 게시된 글 자체를 삭제하고 다시 새로 게시하는 부자연스러운 방법은 저는 안 좋다고 생각합니다.

목차

• 방법1. HTML/JavaScript 가젯 추가하기 (권장)
• 방법2. HTML 편집하기

방법1. HTML/JavaScript 가젯 추가하기 (권장)

저는 방법1·2 중에서 '방법1'을 좀더 추천합니다. 그 이유는 구글 블로그에서 제공하는 가젯이라는 도구를 이용해서 보다 쉽게 결과물을 만들어 낼 수 있고 나중에 그 결과물이 필요가 없어지면 해당 가젯을 삭제하는 것으로 깔끔하게 없앨 수 있기 때문입니다. 단점은 자율성이 떨어지므로 커스터마이징의 폭이 비교적 좁다는 것입니다.

우선, 'Blogger 대시보드 > 레이아웃'에서 HTML/JavaScript 가젯을 추가합니다.

HTML/JavaScript 가젯에 아래의 코드를 복사해서 붙여넣습니다. 날짜 표시 형식 등의 간단한 변경이 필요하신 분들은 댓글을 남기세요.

[설계 내용]

• 수정 날짜만 표시하고 수정 시간은 표시하지 않는다.
• 게시 날짜와 수정 날짜가 같다면 수정 날짜는 표시하지 않는다.
• 수정 날짜 표시 형식은 「수정 2020.08.06」입니다.
• '추천 게시물 가젯', '가장 많이 본 글 가젯'에는 표시되지 않는다.
• 테마 Contempo, Soho, Emporio, Essential에서만 유효하다.

이↓↓↓ 코드 전체를 복사합니다.

<script type="text/javascript">
  function showDateModified() {
    let var1 = document.querySelectorAll('#Blog1 script[type="application/ld+json"]');
    let var2 = document.querySelectorAll('#Blog1 .byline.post-timestamp');
    if (var1.length > 0 && var1.length === var2.length) {
      let datePublished = '';
      let dateModified = '';
      for (let i = 0; i < var1.length; i++) {
        datePublished = JSON.parse(var1[i].innerText).datePublished.substring(0, 10);
        dateModified = JSON.parse(var1[i].innerText).dateModified.substring(0, 10);
        if (datePublished !== dateModified) {
          var2[i].insertAdjacentHTML('afterend', '<span class="byline post-timestamp date-modified">수정 ' + dateModified.replace(/(\d{4})-(\d{2})-(\d{2})/, '$1.$2.$3') + '</span>');
        }
      }
    }
  }
  showDateModified();
</script>

이렇게↓↓↓ 붙여넣고 저장합니다.

그리고 HTML/JavaScript 가젯을 마우스로 끌어서 레이아웃의 '바닥글' 영역 맨 밑에 내려놓고 저장합니다.

(선택) 디자인은 필요하다고 생각하시면 date-modified 클래스로 코드를 짜서 적용하시면 됩니다. CSS를 조금 알아야 가능한 작업입니다.

테마 Contempo 예)

.date-modified {
  padding-left: 1em;
  border-left: 1px solid #dadce0;
}

방법1, 여기까지입니다.

방법2. HTML 편집하기

이 방법은 'Blogger 대시보드 > 테마 > HTML 편집'의 XHTML 코드를 직접 변경하는 방법입니다. 제가 작성한 코드는 없습니다. 코딩 경험이 있고 커스터마이징에 더 많은 의지가 있다면 아래의 정보들을 참고해서 코드를 작성하시면 됩니다.

대강 <b:widget id='Blog1' ...(생략) > 하위의

<b:includable id='headerByline'> 하위의

<b:include name='super.headerByline'/>를 적절히 변경하면 될 거예요.

게시 날짜 값은 이렇게↓↓↓

<data:post.date/>

<data:post.date.year/>

<data:post.date.month/>

<data:post.date.day/>

수정 날짜 값은 요렇게↓↓↓

<data:post.lastUpdated/>

<data:post.lastUpdated.year/>

<data:post.lastUpdated.month/>

<data:post.lastUpdated.day/>

얻을 수 있는데, 테마 Contempo, Soho, Emporio, Notable, Essential에서만 유효합니다.

⚠️방법2로 작업할 경우에는 'Blogger 대시보드 > 테마 > 백업' 기능을 이용해서 xml 파일을 사전에 다운로드해 두고, 변경 후에 다시 다운로드합니다. 그리고 변경 전과 후를 비교해서 실제로 자신이 의도한 부분만 변경되었는 지를 확인하세요.