무료테마 본문하단 Copyright 제거 방법

글 본문 또는 하단에 '함께보면 좋은글'이 나오면 그걸로 방문자의 체류시간을 늘릴수 있습니다. 그래서 이런 기능이 포함된 테마를 저도 활용하는 편인데요(Derelogy, Fiksioner 테마)

문제는 코드를 제공하는 부분에도 눈치없이(?) 들어가는 점이었습니다.

위 사진을 보면 제가 코드를 입력한 부분에 제멋대로 함께보면 좋은글이 들어가있는 것을 알 수 있습니다. 이렇게되면 초보자분들의 경우 저 코드를 있는그대로 복사해서 붙여넣기 때문에 에러가 발생합니다(하지만 이걸 모르시고 왜 안되냐고만 물으십니다 😱)

그래서 이번에 함께보면 좋은글의 위치를 아예 고정으로 바꿔버리는게 낫겠다싶었습니다.

소제목(H2)아래 함께보면 좋은글 출력 장점

우선 소제목(H2) 아래에 함께보면 좋은글을 출력하면 방문자의 눈에 확 들어옵니다. 워드프레스를 운영하는 분들의 경우 H2 아래에 플러그인을 이용해서 애드센스 광고를 넣습니다.

왜냐하면 소제목 글자크기가 크기도 하고, 주요 키워드가 들어가있기 때문에 눈에 잘 띕니다.

사진에서 보는바와 같이 '블로그스팟 본문 시작지점 목차 추가하기' 이 부분이 소제목(H2)입니다. 바로 아래에 함께보면 좋은글이 들어가있는 것을 볼 수 있죠! 썸네일과 함께..

모바일에서는 어떻게 보일까요? 제가 스마트폰으로 스크린샷 찍은걸 보여드리겠습니다.

이런식으로 깔끔하게 잘 나오는것을 알 수 있습니다. 개인적으로는 모바일이 더 나은것 같은데 ㅎㅎ 아무튼 어떻게해야 이런 모습으로 나오게 할지 알려드리도록 하겠습니다.

소제목(H2)아래 함께보면 좋은글 코드

이 코드를 적용하려면 본문에 적용된 함께보면 좋은글 기능을 비활성화(OFF)하는것이 좋습니다. 소제목에도 나오고, 본문에도 나오면 방문자 입장에서는 상당한 피로감을 느끼기 때문인데요!

레이아웃 > Theme Setting으로 들어가셔서 콘텐츠를 밑으로 내리면 relatedMiddle: { 부분이 나오는데 num(글 갯수)를 0으로 만들어주고 시작하도록 하겠습니다.

소제목 아래에 함께보면 좋은글을 나타나게 하려면 2개의 코드가 필요합니다.

• 소제목 아래에 함께보면 좋은글이 나오도록 만드는 스크립트
• 함께보면 좋은글 부분이 예쁘게 나타나도록 하는 스타일

위 2가지 코드를 블로그스팟 테마의 적절한 위치에 넣어주기만 하면 됩니다.

그리고 함께보면 좋은글로 나오도록 글을 지정해주면 됩니다. 모든 글에서 랜덤으로 나타나는것보다 블로거가 지정한 글 내에서 랜덤으로 나타나도록 만들었습니다.

테마 > HTML 편집에서 코드 수정해야 됩니다!

1. 스크립트 코드

스크립트 사용코드는 </body> 앞에 붙여넣으면 됩니다. 빨간색으로 표시해둔 본인 ID는 자신의 블로그스팟 아이디에 맞게 수정하시면 됩니다.

만약 2차 도메인을 사용하신다면 본인ID.blogspot.com을 지우고 blogsodk.com과 같은 2차 도메인으로 수정하시면 됩니다.

<script type='text/javascript'>
//<![CDATA[
document.addEventListener('DOMContentLoaded', function () {
  const relatedMiddle = {
    image: true,
    tag: 'h2',
    text: '함께 보면 좋은 글:',
    feedUrl: 'https://본인ID.blogspot.com/feeds/posts/default?alt=json&max-results=150',
  };

  // ✅ 보여주고 싶은 관련글: 수동으로 직접 입력 (URL만 넣으면 됨)
  const relatedLinks = [
    '/2025/01/blogsodk.html',
    '/2025/02/1234.html',
    '/블로그스팟 글 주소',
  ];

  fetch(relatedMiddle.feedUrl)
    .then(res => res.json())
    .then(data => {
      const entries = data.feed.entry || [];
      const postMap = {};

      entries.forEach(entry => {
        const url = entry.link.find(l => l.rel === "alternate").href;
        const title = entry.title.$t;
        const thumbnail = entry.media$thumbnail?.url || null;
        postMap[url] = { title, url, thumbnail };
      });

      const selectedPool = relatedLinks.map(link => {
        const fullUrl = location.origin + link;
        return postMap[fullUrl] || { title: link, url: fullUrl, thumbnail: null };
      }).filter(p => p);

      const allHeadings = Array.from(document.querySelectorAll(`.post-body ${relatedMiddle.tag}`));
      const headings = allHeadings.slice(1);

      if (!headings.length || selectedPool.length === 0) return;

      // shuffle pool (Fisher–Yates)
      function shuffle(arr) {
        for (let i = arr.length - 1; i > 0; i--) {
          const j = Math.floor(Math.random() * (i + 1));
          [arr[i], arr[j]] = [arr[j], arr[i]];
        }
        return arr;
      }

      const shuffled = shuffle([...selectedPool]);
      let used = 0;

      function createBox(post) {
  const box = document.createElement('div');
  box.className = 'related-middle-box';
  box.innerHTML = `
    <ul>
      <li>
        <img src="${post.thumbnail}" alt="thumbnail">
        <div class="related-text">
          <h4>${relatedMiddle.text}</h4>
          <a href="${post.url}" target="_blank">${post.title}</a>
        </div>
      </li>
    </ul>
  `;
  return box;
}

      headings.forEach((heading) => {
        const post = shuffled[used % shuffled.length]; 
        used++;
        const box = createBox(post);
        heading.insertAdjacentElement('afterend', box);
      });
    });
});
//]]>
</script>

2. 스타일 코드

아래 스타일 코드는 </b:skin> 뒤에 붙여넣으면 됩니다.

<style>
.related-middle-box {
  border-top: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  padding: 16px 24px;
  margin: 24px auto;
  max-width: 800px;
  box-sizing: border-box;
}

.related-middle-box ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.related-middle-box li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.related-middle-box img {
  width: 72px;
  height: 72px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
}

.related-middle-box h4 {
  margin: 0;
  font-size: 14px;
  color: #333;
  font-weight: 600;
}

.related-middle-box li .related-text {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 4px;
}

.related-middle-box li a {
  font-size: 15px;
  color: #f57c00;
  text-decoration: none;
  line-height: 1.5;
  word-break: keep-all;
}

.related-middle-box li a:hover {
  text-decoration: underline;
}

/* 태블릿 이하 */
@media (max-width: 768px) {
  .related-middle-box {
    padding: 16px 16px;
    max-width: 100%;
  }

  .related-middle-box img {
    width: 64px;
    height: 64px;
  }

  .related-middle-box h4 {
    font-size: 13px;
  }

  .related-middle-box li a {
    font-size: 14px;
  }
}

/* 모바일 */
@media (max-width: 480px) {
  .related-middle-box {
    padding: 14px 12px;
  }

  .related-middle-box img {
    width: 56px;
    height: 56px;
  }

  .related-middle-box li {
    gap: 10px;
  }

  .related-middle-box h4 {
    font-size: 12px;
  }

  .related-middle-box li a {
    font-size: 13.5px;
  }
}
</style>

이상으로 소제목(H2)아래 함께보면 좋은글 출력하는 코드에 대해 알아봤습니다. 그동안 본문 중간중간에 나타나는게 불만이었던 분들에게는 이 코드가 조금이나마 도움되셨으면 좋겠습니다. 더 좋고 도움되는 코드로 다시 돌아오겠습니다. 감사합니다.