블로그스팟 더보기 버튼 안 눌릴 때 해결 방법 (JS 오류 원인 & 실제 해결 과정)

블로그스팟(Blogger)을 운영하다 보면

어느 날 갑자기 메인 페이지 하단의 ‘게시물 더보기’ 버튼이 클릭되지 않는 문제를 겪을 수 있습니다.

저 역시 아무 설정도 바꾸지 않았는데
👉 더보기 버튼이 아예 반응하지 않는 치명적인 오류가 발생했고,
결국 자바스크립트(JS) 충돌 문제라는 것을 찾아 해결했습니다.

이 글에서는
✔ 실제로 발생한 오류 메시지
✔ 원인이 무엇이었는지
✔ 어떤 코드를 어떻게 수정했는지
를 초보자도 이해할 수 있게 정리합니다.

---

🔎 증상 요약

• 블로그 메인 페이지에서 ‘게시물 더보기’ 버튼 클릭 불가

• 새 글이 로딩되지 않음

• 디자인·테마는 정상

• 모바일/PC 동일 증상

---

🧨 크롬 개발자도구(Console)에서 확인한 오류

문제의 핵심은 콘솔에 반복해서 뜨던 이 에러였습니다.

Cannot read properties of null (reading 'style')
목차 생성 실패: .post-body 요소를 찾을 수 없습니다.

이 오류는 페이지에 존재하지 않는 요소를 자바스크립트가 조작하려다 실패했을 때 발생합니다.

---

❗ 진짜 원인: document.body를 건드린 자바스크립트

문제는 제가 사용 중이던 배너(shortcode) 치환용 스크립트였습니다.

❌ 문제가 되었던 코드

var contentArea = document.querySelector('.post-body') || document.body;

이 코드는

• 글 상세 페이지에서는 .post-body를 찾지만

• 메인 페이지에서는 .post-body가 없어서
  👉 document.body 전체를 대상으로 innerHTML을 변경

그 결과
✔ 더보기 버튼
✔ 무한 스크롤
✔ Blogger 기본 이벤트
가 전부 깨져버린 것이었습니다.

---

✅ 해결 방법 (핵심) 

🔽🔽순서대로 따라만 하세요🔽🔽 

👉 document.body를 절대 대체 대상으로 쓰지 않는 것

🔧 수정한 코드 (정답)

var contentArea = document.querySelector('.post-body');
if (!contentArea) return; // 본문이 없는 페이지에서는 실행 안 함

이렇게 수정하자

• 메인/목록 페이지에서는 스크립트가 실행되지 않고

• 글 상세 페이지에서만 정상 작동

• ‘게시물 더보기’ 버튼 완전 정상 복구

---

🔒 더 안전하게 쓰는 추천 코드

  🌈🌈 (위 방법대로 안되면 아래 코드 추가삽입)🌈🌈

테마마다 본문 클래스가 다를 수 있기 때문에
아래처럼 여러 후보를 두는 것이 가장 안정적입니다.

var contentArea =
  document.querySelector('.post-body') ||
  document.querySelector('.post-body-container') ||
  document.querySelector('.post-content') ||
  document.querySelector('.entry-content');

if (!contentArea) return;

✔ 핵심 포인트
❌ document.body 사용 금지
⭕ 요소가 없으면 바로 return 처리

---

📌 이 문제가 특히 자주 발생하는 경우

• 쿠팡 파트너스 배너 삽입

• shortcode 자동 치환 스크립트 사용

• 목차(TOC) 기능 추가

• 외부 JS 복붙 후 테스트 없이 저장한 경우

---

✅ 체크리스트 (같은 문제 예방)

• innerHTML을 쓸 때 대상 요소가 항상 존재하는지 확인

• 반드시 아래 코드 습관화

if (!element) return;

• “더보기 안 눌림” 발생 시
  👉 최근 추가한 JS부터 의심

---

🎯 마무리

이번 문제는 단순한 설정 오류가 아니라
자바스크립트 충돌로 Blogger 핵심 기능이 연쇄적으로 깨진 사례였습니다.

하지만 원인을 정확히 알고 나면
✔ 해결은 단 한 줄 수정으로 끝납니다.

혹시 여러분도

• 블로그스팟 더보기 버튼이 안 눌리거나

• 무한 스크롤이 갑자기 멈췄다면

👉 document.body를 조작하는 스크립트가 있는지 꼭 확인해 보세요.

놓치면 후회하는 콘텐츠 BEST 5

의사도 추천하는 하루 5분 건강 루틴

치과의사가 자녀에게만 알려주는 양치 방법

로또 1등 당첨, 과학적 전략 3가지

"한국인 노후" 비참해지는 3가지 실수 

생생정보통 오늘방송 서울 굴국밥 맛집 (+위치 메뉴 가격)