안녕하세요! 여러분의 블로그를 심폐소생하는 에디터입니다. 혹시 정성 들여 쓴 글 하나만 읽고 독자들이 휙 떠나버리는 뒷모습을 보며 눈물 흘린 적 없으신가요? (저도 초보 시절엔 매일 그랬답니다...) 독자가 내 블로그에 더 오래 머물게 하려면? 정답은 바로 '관련 글(Related Posts)' 위젯이죠! 오늘은 구글 블로그스팟(Blogger) 유저라면 무조건 알아야 할, 아주 가볍고 똑똑한 위젯 설치법을 2024년 최신 버전으로 가져왔어요. 진짜 쉬우니까 저만 믿고 따라오세요!
- 바닐라 JS 기반이라 로딩 속도가 미치게 빠르고 가벼워요.
- 레이아웃 가젯 추가만으로 설치 끝! 어려운 HTML 수정 NO!
- 자동 썸네일 지원으로 독자의 클릭을 유도하는 비주얼 완성.
왜 이 설치 방법을 추천할까요?
시중에 많은 스크립트가 있지만, 이 녀석은 좀 특별해요. 일단 외부 프레임워크가 필요 없는 '순수 자바스크립트'라 블로그 로딩 속도에 거의 영향을 안 줍니다. 구글 형님(SEO)은 속도 느린 블로그를 아주 싫어하시잖아요? 이 위젯의 강력한 장점을 표로 정리해 드릴게요.
1분 컷! 위젯 설치 가이드
자, 이제 본격적인 설치 들어갑니다. 심호흡 한 번 하시고! (전혀 어렵지 않으니 겁먹지 마세요!)
1. 스크립트 소스 추가
- Blogger 대시보드에서 [테마] 메뉴로 들어갑니다.
- 맞춤설정 > 화살표 > HTML 편집
- "</head>" 를 검색하시고 아래 코드를 복사해서 </head>바로 위에 붙여넣습니다.
- 우측 상단 "저장" 필수!
2. 디자인 맞춤설정 (CSS)
코딩을 몰라도 괜찮아요! 위 포스팅을 보시고 그대로 따가 가신 다음, 아래 스타일을 그대로 복사해 넣으시면 바로 적용이 됩니다.
padding: 0;
list-style-type: none;
text-align: center;
}
#blogger-related-posts li {
float: left;
margin: 0 1%;
width: 18%;
}
#blogger-related-posts a {
display: block;
}
#blogger-related-posts span {
display: block;
margin: 0 auto .5em;
width: 72px;
height: 72px;
}
#blogger-related-posts ul:after {
content: "";
display: block;
clear: both;
}
3. 결과 예시
초간다! 알면 너무 쉽지 않나요?
설정 전:
궁금한 건 못 참지! FAQ
마무리하며
지금까지 구글 블로그스팟 이탈률을 '순삭'해줄 관련 글 위젯 설치 방법을 알아봤습니다. 작은 차이가 명품 블로그를 만드는 법이죠! 딱 5분만 투자해서 여러분의 소중한 독자들을 블로그에 더 오래 잡아두세요. 궁금한 점은 언제든 댓글로 남겨주시면 정성껏 답변드릴게요! 안녕~!
[면책 조항: 본 가이드는 오픈 소스 스크립트를 기반으로 하며, 블로그 템플릿의 종류에 따라 적용 결과가 다를 수 있습니다. 작업 전 '테마 백업'은 필수라는 점 잊지 마세요!]