Blogger에서 새 글에 특별한 표시 주기

발행된 지 얼마 되지 않은 글에 특별한 표시를 주고 싶을 때가 있습니다. 자바스크립트를 이용해서 알아낼 수 있습니다. Blogger의 기본 테마인 Contempo 테마에서 적용할 수 있는 방법입니다. 다른 테마에서도 적용되는지는 시험하지 않았으므로 댓글로 문의를 남겨 주세요. 지금부터 시작합시다.

자바스크립트 코드 추가

우선 테마 코드에 아래 자바스크립트 코드를 붙여 넣어야 합니다. HTML 코드를 편집할 수 있는 곳으로 들어갑시다. PC 기준으로 설명드리겠습니다. blogger.com에 접속한 후, 좌측 메뉴에서 테마를 클릭합니다. 맞춤설정 옆 메뉴를 누릅니다. HTML 편집을 누르면 HTML 편집 모드로 들어갈 수 있습니다.

코드 화면을 한 번 마우스로 클릭한 후 Ctrl + F를 누르면 Search:와 함께 코드 내용을 검색할 수 있는 창이 뜹니다. 브라우저 내장 검색 기능이 실행되면 안 됩니다.(보통 오른쪽 위에서 뜨는 창) class='post-outer-container'를 검색합니다. 아무 수정도 하지 않은 Contempo 테마에서는 3571번째 줄에서 해당 내용이 검색됩니다.

<script>
  (function(){
  const idx = <data:i/>;
  //<![CDATA[
  const date = () => {
    const now = new Date().getTime();
    const postDate = new Date(document.querySelectorAll('time')[idx].dateTime).getTime();
    const diff = (now - postDate) / 1000;
    const dayDiff = Math.floor(diff / 86400);
    if (dayDiff < 3) {
      document.querySelectorAll('.post-outer-container')[idx].classList.add('new')
    }
    console.log(dayDiff);
  }
  date();
  })();
  //]]>
</script>

<div class='post-outer'> 아래에 위 코드를 붙여넣으면 됩니다. 예시는 아래와 같습니다. 코드 맨 위 줄을 3570번째 줄로 가정했습니다.

<b:includable id='postCommentsAndAd' var='post'>
  <article class='post-outer-container'>
    <!-- Post title and body -->
    <div class='post-outer'>
      <b:include data='post' name='post'/>
    </div>
    <script>
      (function(){
      const idx = <data:i/>;
      //<![CDATA[
      …
      //]]>
    </script>

오른쪽 위의 저장 버튼을 눌러서 저장하면 끝입니다. 물론 스타일링은 하나도 하지 않았습니다. 이제 간단한 스타일을 줘 볼 참입니다.

스타일 주기

HTML 편집 창을 나가고 맞춤설정으로 들어갑니다. 고급 - 드롭다운 메뉴를 클릭해 CSS 추가를 선택합니다. 맞춤 CSS 추가 창에 아래 코드를 붙여넣습니다.

.post-outer-container.new {
  border: 2px solid red;
}

오른쪽 아래 저장 버튼을 누른 후 미리보기 창에서 새 글에 빨간색 테두리가 추가된 걸 확인하실 수 있습니다. 만약 표시되지 않는다면 해당 글이 발행된 지 3일 이내인지, 자바스크립트 코드를 제대로 추가했는지 확인해 주세요.

내가 원하는 대로 커스텀하기

이 자바스크립트 코드는 최신 글을 개재된 지 3일 이내인 글로 봅니다. 3일이라는 시간을 바꾸고 싶으시면 코드의 아래 부분을 바꾸시면 됩니다.

if (dayDiff < 3) {

예로, 아래와 같이 바꾸시면 발행된 지 1주일이 지나지 않은 글이 최신 글로 인식됩니다.

if (dayDiff < 7) {