블로그를 운영하면서 독자들의 체류 시간을 늘리는 건
정말 중요한
목표 중 하나입니다.
한 번 방문한 독자가 다른 글도 자연스럽게 읽도록 유도해야
블로그가
성장할 수 있죠.
이런 고민을 해결해 주는 것이 바로 본문 중간에 들어가는
'함께 보면
좋은 글' 섹션입니다.
티스토리에서는 플러그인으로 간단하게 구현할 수 있지만,
구글
블로그스팟은 조금 더 복잡합니다.
하지만 직접 코드를 적용해 보면 생각보다 어렵지 않습니다.
오늘 알려드릴 코드는 최신 블로그스팟 환경에 맞춰 제작되었으며,
제목과 썸네일을 자동으로 불러와서 독자의 클릭을
자연스럽게 유도하는 데 큰 도움이 될 수 있는 코드를 제공해
드리겠습니다.
함께 보면 좋은 글 링크란?
티스토리를 운영하면서 아래와 같은 내부 글 링크를 볼 수 있습니다.
단순히 URL을 티스토리 본문에 넣고 엔터를 치면, 썸네일과 함께
간단한 내용이 나오는 내부링크 글인데요, 이 기능을 티스토리에서
플러그인만 설치하면 누구나 사용할 수 있습니다.
하지만, 구글 블로그스팟에서는 예외죠.
구글 블로그스팟은 간단 기능만 제공하고 나머지 기능은
관리자가 직접
코드로 구현해야 됩니다. 이것은 마치 워드프레스와 같습니다.
따라서 티스토리와 같은 기능을 구현한 것이 바로
"함께 보면 좋은 글"
내부 링크라고 할 수 있습니다.
구글 블로그스팟 본문 코드 적용하기
우선, 이번 블로그스팟 본문 중간 함께 보면 좋은 글 코드는
유투버
"블로소득"님이 제작한 코드를 커스텀하여
제공해 드린다는 점을 먼저
말씀드립니다.
이제 본격적으로 코드를 적용하는 방법을 알려드릴게요.
작업은 크게 두 단계로 나뉩니다.
먼저 CSS 코드를 추가하여 디자인을 설정하고, 그다음 JavaScript 코드를 통해
기능을 구현하는 것입니다. 차근차근 따라오시면 누구나 쉽게 적용할
수 있습니다.
아래는 블로그스팟에 '함께 보면 좋은 글'을 삽입하기 위한 코드입니다.
이 코드를 복사하여 블로그스팟의 테마 HTML 편집기에 붙여 넣으세요.
1. CSS 코드 추가하기
먼저 디자인을 담당하는 CSS 코드를 추가하는 방법을 알려드리겠습니다.
- 본인 블로그스팟 테마 클릭
- 맞춤설정 > HTML 편집
- 테마 코드에서 "</b:skin>" 검색하고, 그 위에 CSS코드를 붙여 넣기 합니다.
2. JavaScript 코드 추가하기
JavaScript 코드와 HTML 코드를 추가하는 방법은 다음과 같습니다.
- 테마 > 맞춤설정 > HTML 편집
- Ctrl + F로 "</body>" 검색하고, 그 위에 JavaScript 코드를 붙여 넣습니다.
※ JavaScript 코드 중 "feedUrl: '본인 URL 주소/feeds/posts/default?alt=json&max-results=5000'," 이 부분에 본인 블로그스팟 주소를 입력해 주시면 됩니다.
예시) feddUrl: 'https://aaa.blogspot.com/fees/posts/default?.....'
3. 게시글에 코드 삽입하기
위의 CSS와 JavaScript 코드를 테마에 적용했다면,
이제 글쓰기
모드에서 HTML 보기로 전환한 후 원하는 위치에
아래 코드를
추가하기만 하면 됩니다.
"<div class="related-posts-container" data-links="게시물 URL(/날짜부터 붙여 넣기)"></div>"
[버튼2|코드 전체 다운로드|https://drive.google.com/file/d/10q-9ZQKKTxCNVFRI3hpeGXcr6_eZcbUw/view?usp=sharing]
본문에 위 실행 코드를 원하는 위치에 삽입하고
"게시물 URL"
부분에 본인 게시글 URL을 넣고 발행하시면 됩니다.
예시) "<div class="related-posts-container" data-links="/2025/09/aaaa-aaaaa.html"></div>"
해당 코드를 구글 블로그스팟 본문에 적용하면 다음과 같습니다.
핵심 내용 요약
오늘 우리는 구글 블로그스팟에서 티스토리처럼 '함께 보면 좋은 글'
섹션을 만드는 방법을 알아봤습니다. 핵심 내용을 다시 한번 정리해
볼게요.
- 필요한 코드 : '함께 보면 좋은 글'을 위한 CSS, JavaScript, HTML 코드를 준비해야 합니다.
- 적용 위치 : CSS는 <head> 태그 안에, JavaScript는 </body> 태그 바로 위에 삽입해야 합니다.
- 본문 삽입 : 글쓰기 모드에서 HTML 보기로 전환한 후, <div class="related-posts-container" data-urls="링크"></div> 코드를 원하는 위치에 붙여 넣으면 됩니다.
- 활용 효과 : 블로그 체류 시간 증가, 독자에게 유용한 정보 제공, 그리고 SEO 최적화에 긍정적인 영향을 줍니다.
자주 묻는 질문 FAQ
코드를 적용했는데 디자인이 깨져 보여요.
기존에 사용 중인 블로그 테마의 CSS와 충돌할 가능성이 있습니다. 다른 CSS 코드의 영향을 받지 않도록 관련 코드를 직접 수정하거나, 다른 스타일 속성을 추가해 보세요.
썸네일 이미지가 보이지 않아요.
썸네일이 정상적으로 표시되지 않는 경우, 해당 게시글에 대표 썸네일 이미지가 없거나, 본문 내 첫 이미지를 불러오는 방식이 작동하지 않는 것일 수 있습니다. 게시글에 썸네일용 이미지를 지정하거나, JavaScript 코드의 이미지 경로를 수정해야 할 수도 있습니다.
외부 블로그 링크를 넣어도 되나요?
아니요, 내부 URL을 이용하기 때문에 외부 URL을 이용했을 때 썸네일을 불러올 수 없습니다.
모바일 환경에서도 잘 작동하나요?
네, 제공된 코드는 반응형으로 디자인되어 있어 대부분의 모바일 환경에서도 정상적으로 작동합니다. 하지만 일부 커스텀 테마에서는 레이아웃이 미세하게 틀어질 수 있으니, 적용 후 모바일 환경에서 꼭 확인해 보는 것이 좋습니다.
게시글을 새로 작성할 때마다 코드를 다시 넣어야 하나요?
네, 게시글을 새로 작성할 때마다 '함께 보면 좋은 글' 섹션을 넣고 싶다면 HTML 보기에서 해당 코드를 원하는 위치에 복사해서 붙여 넣어야 합니다.
코드를 넣었는데도 아무것도 표시되지 않아요.
가장 흔한 원인은 JavaScript 코드에서 feedUrl에 본인의 블로그 주소를 올바르게 입력하지 않았을 때 발생합니다. 주소에 오타가 있는지 다시 한번 확인해 보세요.
게시글 URL을 매번 수동으로 입력해야 하는 번거로움은 없나요?
안타깝게도 현재 제공된 코드는 수동으로 URL을 입력하는 방식입니다. 블로그스팟은 티스토리처럼 API가 잘 구축되어 있지 않아 자동화가 어렵습니다. 이 부분이 블로그스팟 사용 시 감수해야 할 부분 중 하나입니다.
