2025 블로그스팟 이전글·다음글 커스터마이징 가이드｜썸네일·포스트제목·광고 삽입까지 완벽 설정법

블로그스팟(Blogger)에서 이전글과 다음글 링크를 만드는 방법은 블로그의 사용자 경험을 개선하고 방문자가 더 많은 콘텐츠를 탐색하도록 유도하는 효과적인 방법입니다. 

블로그스팟은 기본적으로 이전글/다음글 링크를 제공하지만, 이를 커스터마이징하거나 더 눈에 띄게 만들고 싶을 경우 HTML, CSS, JavaScript를 활용해 사용자 정의 작업을 할 수 있습니다. 

아래는 블로그스팟에서 이전글과 다음글 기능을 구현하고 최적화하는 상세한 방법을 단계별로 설명한 내용입니다. 

1. 기본 제공 이전글/다음글 링크 확인

블로그스팟은 기본적으로 블로그 포스트 하단에 "이전글(Older Posts)"와 "다음글(Newer Posts)" 링크를 제공합니다. 이를 확인하고 활성화하는 방법은 다음과 같습니다:

단계:

1. 블로그스팟 관리자 패널 접속:
   • 블로그스팟에 로그인 후, 블로그 대시보드에서 원하는 블로그를 선택합니다.

2. 레이아웃 설정 확인:
   • 왼쪽 메뉴에서 "레이아웃(Layout)" 선택.
   
   
   • "블로그 포스트(Blog Posts)" 위젯을 찾아 "편집(Edit)" 클릭.

3. 이전글/다음글 활성화:
   • 블로그 포스트 설정 창에서 "포스트 페이지 옵션(Post Page Options)"을 확인.
   
   
   • "이전 포스트 링크 표시(Show Older Posts Link)"와 "최신 포스트 링크 표시(Show Newer Posts Link)" 체크박스가 활성화되어 있는지 확인.
   
   
   • 저장 후 블로그를 미리보기(Preview)로 확인.

4. 기본 스타일 확인:
   • 기본 링크는 템플릿에 따라 텍스트("Older Posts", "Newer Posts") 또는 화살표로 표시됩니다.
   
   
   • 블로그 포스트 하단에 나타나며, 모바일과 데스크톱에서 모두 작동.
   
   

한계:

• 기본 링크는 디자인이 단순하고 커스터마이징이 제한적.

• 포스트 제목이나 썸네일을 표시하지 않아 사용자 클릭 유도가 약함.

• 수익형 블로그에서는 더 매력적인 UI/UX로 페이지뷰를 늘리는 것이 중요.

2. 커스텀 이전글/다음글 링크 구현

블로그스팟의 기본 링크를 개선하기 위해 HTML, CSS, JavaScript를 사용해 포스트 제목과 썸네일을 포함한 커스텀 이전글/다음글 링크를 만드는 방법을 설명합니다.

준비사항:

• 블로그스팟 템플릿 편집 권한.

• 기본적인 HTML/CSS 지식(선택 사항: JavaScript).

• 백업: 템플릿 수정 전 "테마 > 사용자 정의 > HTML 편집 > 다운로드"로 기존 템플릿 백업.

단계 1: 블로그스팟 테마 HTML 편집

1. HTML 편집기 접속:
   • 블로그스팟 대시보드 > "테마(Theme)" > "사용자 정의(Customize)" > "HTML 편집(Edit HTML)".

2. 이전글/다음글 코드 삽입 위치 찾기:
   • HTML에서 <div class='blog-posts hfeed'> 또는 <b:section class='main' id='main'> 근처를 찾음.
   
   
   • 보통 <data:post.body/> 뒤에 이전글/다음글 링크를 추가.

3. 기본 링크 코드 확인:
   • 블로그스팟은 <b:includable id='nextprev'> 섹션에서 기본 이전글/다음글을 정의.
   • 예시 기본 코드:

   <div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerLinks'>
<a class='blog-pager-newer-link' expr:href='data:newerLinks.url'>Newer Posts</a>
</b:if>
<b:if cond='data:olderLinks'>
<a class='blog-pager-older-link' expr:href='data:olderLinks.url'>Older Posts</a>
</b:if>
</div>

    

단계 2: 커스텀 이전글/다음글 코드 추가

기본 링크를 대체하거나 개선하기 위해 포스트 제목과 썸네일을 표시하는 커스텀 코드를 추가합니다. 아래는 예시 코드입니다.

1. HTML 코드 삽입:
   • <b:includable id='nextprev'> 섹션을 찾거나, 없으면 <data:post.body/> 뒤에 아래 코드를 추가합니다.
   • <b:includable id='main'> 내에 삽입:

<div class='custom-nav-links'>
  <b:if cond='data:blog.post.next'>
    <div class='nav-prev'>
      <a expr:href='data:blog.post.next.url'>
        <b:if cond='data:blog.post.next.thumbnail'>
          <img expr:src='data:blog.post.next.thumbnail' alt='Previous Post Thumbnail'/>
        </b:if>
        <span class='nav-label'>Previous Post</span>
        <span class='nav-title'><data:blog.post.next.title/></span>
      </a>
    </div>
  </b:if>
  <b:if cond='data:blog.post.previous'>
    <div class='nav-next'>
      <a expr:href='data:blog.post.previous.url'>
        <b:if cond='data:blog.post.previous.thumbnail'>
          <img expr:src='data:blog.post.previous.thumbnail' alt='Next Post Thumbnail'/>
        </b:if>
        <span class='nav-label'>Next Post</span>
        <span class='nav-title'><data:blog.post.previous.title/></span>
      </a>
    </div>
  </b:if>
</div>

2. CSS 스타일 추가:
   • 테마 HTML 상단의 <b:skin><![CDATA[ 섹션에 아래 CSS를 추가해 디자인을 커스터마이징합니다.

.custom-nav-links {
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
  font-family: Arial, sans-serif;
}
.nav-prev, .nav-next {
  width: 45%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  text-align: center;
}
.nav-prev img, .nav-next img {
  max-width: 100px;
  height: auto;
  margin-bottom: 10px;
}
.nav-label {
  font-size: 14px;
  color: #666;
  display: block;
}
.nav-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}
.nav-prev a, .nav-next a {
  text-decoration: none;
  color: inherit;
}
.nav-prev a:hover, .nav-next a:hover {
  background-color: #f5f5f5;
}

3. 썸네일 활성화 확인:
   • 블로그 설정에서 썸네일이 제대로 설정되었는지 확인.
   
   
   • 블로그스팟 대시보드 > "설정(Settings)" > "포스트, 댓글 및 공유(Posts, Comments, and Sharing)" > 썸네일 이미지 활성화.
   
   
   • 각 포스트에 대표 이미지를 업로드해야 썸네일이 표시됨.

4. 저장 및 테스트:
   • HTML과 CSS 코드를 저장 후 블로그를 미리보기(Preview)로 확인.
   
   
   • 포스트 페이지에서 이전글/다음글 링크와 썸네일이 정상적으로 표시되는지 테스트.
   
   
   • 모바일 반응형 디자인도 확인(예: CSS에 @media 쿼리 추가로 모바일 최적화).
   
   

3. 고급 커스터마이징 (JavaScript 활용)

포스트 제목과 썸네일 외에 추가 정보(예: 발행일, 카테고리)를 표시하거나 동적 효과를 추가하려면 JavaScript를 사용할 수 있습니다.

단계:

1. JavaScript 추가:
   • HTML 편집기에서 </body> 태그 바로 위에 아래 코드를 추가.
   
   
   • 이 코드는 이전글/다음글 링크에 마우스 오버 시 애니메이션 효과를 추가합니다.

<script>
// 이전글/다음글 링크에 애니메이션 추가
document.addEventListener('DOMContentLoaded', function() {
  const navLinks = document.querySelectorAll('.custom-nav-links a');
  navLinks.forEach(link => {
    link.addEventListener('mouseover', function() {
      this.style.transform = 'scale(1.05)';
      this.style.transition = 'transform 0.3s ease';
    });
    link.addEventListener('mouseout', function() {
      this.style.transform = 'scale(1)';
    });
  });
});
</script>

2. 추가 데이터 표시:
   • 포스트 발행일이나 라벨(카테고리)을 표시하려면 <data:blog.post.next> 내에 <data:blog.post.next.date> 또는 <data:blog.post.next.labels>를 추가.
   
   
   • 예: <span class='nav-date'><data:blog.post.next.date/></span>.
   
   

4. 수익형 블로그를 위한 최적화 팁

수익형 블로그에서 이전글/다음글 링크는 페이지뷰 증가와 체류 시간 연장에 기여하며, SEO와 애드센스 수익에 긍정적 영향을 줍니다.

키워드 전략:

• 롱테일 키워드 활용: 이전글/다음글 링크에 키워드 반영. 예: "다음글: 2025 전기차 충전소 찾기 팁"으로 제목 최적화.

• 내부 링크 강화: 관련 포스트로 연결해 SEO 점수 향상. 예: 전기차 포스트에서 "전기차 보조금 신청 방법" 포스트 링크.

• 애드센스 배치: 이전글/다음글 링크 위/아래에 광고 배너 삽입(HTML 편집기에서 <div>로 광고 코드 추가).

콘텐츠 아이디어:

• 자동차 관련 키워드 연계: 전기차/튜닝 관련 포스트에서 이전글/다음글을 활용해 연속성 제공. 예: "테슬라 모델 Y 리뷰" 다음에 "전기차 충전 팁" 링크.

• 썸네일 최적화: 클릭 유도율(CTR)을 높이기 위해 고화질 썸네일 사용, alt 태그에 키워드 삽입(예: "테슬라 모델 Y 썸네일").

• 카테고리별 내비게이션: 같은 카테고리 내 이전글/다음글로 제한하려면 <b:if cond='data:blog.post.labels contains "전기차"'> 같은 조건문 추가.

SEO 최적화:

• 구글 검색 노출: 포스트 제목에 키워드 포함, 메타 설명에 "다음글: [키워드]" 추가.

• 페이지 로딩 속도: 썸네일 이미지 크기 최적화(100KB 이하 권장).

• 모바일 친화성: CSS에서 반응형 디자인 적용(예: @media screen and (max-width: 600px)).

제휴 마케팅:

• 이전글/다음글 링크 근처에 제휴 링크 삽입. 예: "전기차 충전기 구매" 포스트에 충전기 스마트스토어 링크.

• 남차카페 스마트스토어, 보배드림 중고차 링크 등 자동차 관련 제휴 활용.

5. 문제 해결 및 주의사항

• 링크가 표시되지 않음:

• 블로그 설정에서 이전글/다음글 활성화 확인.

• 포스트 수가 2개 이상인지 확인(단일 포스트는 링크 미표시).

• 썸네일 오류:

• 각 포스트에 대표 이미지가 업로드되었는지 확인.

• <data:blog.post.next.thumbnail> 태그가 올바르게 작동하는지 테스트.

• 템플릿 오류:

• 수정 전 항상 템플릿 백업.

• HTML/CSS/JS 코드 삽입 후 오류 발생 시, 하나씩 추가하며 테스트.

• 모바일 호환성:

• 모바일 테마에서도 링크가 정상 표시되는지 확인.

• CSS에서 flex-wrap: wrap 추가로 모바일 레이아웃 최적화.

6. 추가 고급 팁

• 동적 로딩: AJAX를 사용해 이전글/다음글을 비동기적으로 로드하면 페이지 전환 없이 콘텐츠 미리보기 가능. 이는 고급 개발자용(별도 요청 시 코드 제공).

• 분석 트래킹: 구글 애널리틱스에 이전글/다음글 클릭 이벤트를 추가해 사용자 행동 분석(예: ga('send', 'event', 'Navigation', 'click', 'Next Post')).

• A/B 테스트: 두 가지 디자인(텍스트만 vs 썸네일 포함)을 테스트해 클릭률 비교.

이 방법으로 블로그스팟에서 이전글/다음글 링크를 커스터마이징하면 사용자 경험과 페이지뷰가 크게 개선됩니다. 

특히 자동차 관련 수익형 블로그라면, 전기차/튜닝 키워드를 활용해 관련 포스트로 연결하면 효과적입니다. 

추가로 특정 기능(예: 동적 로딩, 특정 디자인)이나 자동차 키워드 연계 방법이 필요하면 말씀해주세요!

* 추가적인 방법 : 내비게이션 기능 추가하기

<div class='blog-pager' id='blog-pager'>
  <b:if cond='data:olderPostUrl'>
    <a class='blog-pager-older-link' expr:href='data:olderPostUrl' expr:title='data:olderPostTitle'>이전 글</a>
  </b:if>

  <b:if cond='data:newerPostUrl'>
    <a class='blog-pager-newer-link' expr:href='data:newerPostUrl' expr:title='data:newerPostTitle'>다음 글</a>
  </b:if>

  <div class='clear'></div>
</div>

.blog-pager {
  text-align: center; /* 링크를 중앙에 정렬 */
  margin: 20px 0; /* 위아래 여백 추가 */
}

.blog-pager-older-link,
.blog-pager-newer-link {
  display: inline-block;
  padding: 8px 15px;
  background-color: #f0f0f0; /* 배경색 */
  color: #333; /* 글자색 */
  text-decoration: none; /* 밑줄 제거 */
  border-radius: 5px; /* 모서리 둥글게 */
  margin: 0 10px; /* 링크 사이 여백 */
  transition: background-color 0.3s ease; /* 호버 효과 */
}

.blog-pager-older-link:hover,
.blog-pager-newer-link:hover {
  background-color: #e0e0e0; /* 호버 시 배경색 변경 */
}