블로그스팟 관련 글 자동 생성 + 인기 배지 달기, 코딩 몰라도 100% 성공!

 

블로그스팟 자동 관련 글(Related Posts) 설치: '인기' 배지까지 한 번에!

블로그스팟 기본 테마에는 본문 하단에 관련 글을 보여주는 기능이 없습니다. 오늘은 아무것도 없는 상태에서 관련 글 목록을 만들고, 독자의 클릭을 유도하는 [인기] 배지까지 자동으로 붙이는 전체 과정을 알려드립니다.

1단계: 디자인 입히기 (CSS 추가)

먼저 관련 글 목록이 예쁘게 보이도록 스타일을 정해줍니다. [테마] -> [맞춤설정] -> [고급] -> [CSS 추가]에 넣으세요.

/* 관련 글 전체 박스 */
.related-posts { margin: 40px 0; padding-top: 20px; border-top: 2px solid #eee; }
.related-content { display: flex; flex-wrap: wrap; gap: 15px; }

/* 글 하나하나의 틀 */
.related-item { 
  position: relative; /* 배지의 기준점 */
  width: calc(33.33% - 10px); 
  cursor: pointer; 
}

/* 이미지 스타일 */
.related-thumb { width: 100%; height: 120px; object-fit: cover; border-radius: 8px; }

/* '인기' 배지 스타일 */
.pop-badge {
  position: absolute; top: 10px; left: 10px;
  background: #ff4757; color: #fff;
  padding: 3px 8px; font-size: 11px; font-weight: bold; border-radius: 4px;
}

2단계: 똑똑한 배달부 만들기 (자바스크립트 & for문)

이제 글을 찾아와서 하나씩 화면에 뿌려주는 코드를 넣을 차례입니다. [테마] -> [HTML 편집]에서 </body> 태그 바로 위에 넣으세요.

<script>
function showRelatedPosts(json) {
  var container = document.getElementById("related-posts-container");
  var html = "<div class='related-content'>";
  var entries = json.feed.entry;

  // [for문 시작] 찾은 글 개수만큼 반복해서 화면에 그림을 그립니다.
  for (var i = 0; i < entries.length; i++) {
    var entry = entries[i];
    var title = entry.title.$t;
    var link = entry.link.find(l => l.rel === 'alternate').href;
    var img = entry.media$thumbnail ? entry.media$thumbnail.url : 'https://via.placeholder.com/150';

    // 특정 조건(예: 첫 번째 글)이면 'HOT' 배지를 추가합니다.
    var badge = (i === 0) ? "<span class='pop-badge'>HOT</span>" : "";

    // 화면에 보여줄 HTML 구조를 하나씩 차곡차곡 쌓습니다.
    html += "<div class='related-item' onclick='location.href=\"" + link + "\"'>";
    html += badge + "<img class='related-thumb' src='" + img + "'/>";
    html += "<div class='related-title'>" + title + "</div></div>";
  }
  // [for문 끝]

  html += "</div>";
  container.innerHTML = html;
}
</script>

3단계: 글 하단에 목차 표시하기

마지막으로, 글을 작성할 때 [HTML 보기] 모드에서 원하는 위치(보통 글 끝부분)에 아래 코드를 딱 한 줄만 넣어주세요.

<div id="related-posts-container"></div>

💡 왜 이렇게 하나요?

블로그스팟은 글이 수백 개가 되어도 우리가 수동으로 "이 글 다음엔 저 글을 봐"라고 지정하기 어렵습니다. 그래서 for문(반복문)을 사용하여 시스템이 자동으로 "관련 있는 글을 싹 긁어와서 예쁘게 나열해!"라고 시키는 것입니다. 여기에 'HOT' 배지까지 더해지면 독자는 무의식적으로 그 글을 클릭하게 됩니다.

이제 아무것도 없는 기본 테마에서도 프로 블로그처럼 관련 글 목록을 운영할 수 있습니다!