아래 함께보면 좋은글 출력 코드){kind=link}
글 본문 또는 하단에 '함께보면 좋은글'이 나오면 그걸로 방문자의 체류시간을 늘릴수
있습니다. 그래서 이런 기능이 포함된 테마를 저도 활용하는 편인데요(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)아래 함께보면 좋은글 출력하는 코드에 대해 알아봤습니다. 그동안 본문 중간중간에 나타나는게 불만이었던 분들에게는 이 코드가 조금이나마 도움되셨으면 좋겠습니다. 더 좋고 도움되는 코드로 다시 돌아오겠습니다. 감사합니다.
.png "블로소득")