Page Navigation Custom

블로거(Blogger) 페이지 네비게이션 사라짐 현상, 이렇게 해결했어요! (pagenavi 오류 복구)

블로거 템플릿을 사용하다 보면 예기치 않게 페이지 네비게이션(페이지네이션)이 사라지는 경우가 있습니다. 저도 최근 템플릿 설정을 변경하던 중, 어느 순간부터인가 블로그 하단의 페이지 이동 버튼들이 감쪽같이 사라져 버렸습니다. 😭 원인을 정확히 파악하기 어려워 답답했죠.

사라지기 전, 템플릿에서 정상적으로 작동하던 페이지 네비게이션의 모습입니다.

문제 상황: 갑자기 사라진 블로그 페이지네이션

보시다시피, 글 목록 하단에 있어야 할 페이지 이동 링크가 보이지 않는 상태입니다. 이로 인해 이전 글들을 찾아보기가 매우 불편해졌습니다. 특히 콘텐츠가 많은 블로그일수록 페이지 네비게이션은 필수적인 기능이죠.

페이지 네비게이션이 보이지 않는 문제 발생 화면

해결 과정: 사라진 페이지 네비게이션 복구하기

단순 설정 오류인지, 템플릿 코드 문제인지 파악하기 위해 몇 가지 단계를 거쳤습니다.

1. 원인 분석 (크롬 개발자 도구 활용): 우선, 크롬 개발자 도구(F12)를 이용해 문제의 원인을 분석했습니다. HTML 코드를 살펴보니, 기존 네비게이션이 pagenavi라는 CSS 클래스와 연관되어 있음을 추측할 수 있었습니다.
2. 구글링으로 해결책 검색: 이를 바탕으로 구글에 "Blogger pagenavi", "블로거 페이지네이션 복구", "Blogger navigation fix" 등의 키워드로 검색했고, 다행히 몇 가지 유용한 해결 방법을 찾을 수 있었습니다.
3. 스크립트 및 CSS 적용: 검색한 자료 중 제 블로그에 적용 가능한 자바스크립트(JavaScript)와 CSS 코드를 찾아 블로그 HTML 편집 모드에 추가했습니다.

새로운 코드를 적용하여 복구된 페이지 네비게이션

찾은 자료를 바탕으로 블로그 HTML 편집 모드에서 새로운 JavaScript 코드와 CSS 스타일을 추가하고, 제 블로그 환경에 맞게 약간의 수정을 거쳐 적용했습니다. 그 결과... 짠! 이렇게 새로운 페이지 네비게이션이 생겼습니다. 기존 템플릿의 '정품' 네비게이션보다는 다소 심플해 보이지만, 일단 급한 불은 껐습니다. 😄 추후 CSS를 좀 더 다듬어서 블로그 디자인과 잘 어울리도록 개선할 예정입니다. 😋

💡 중요 팁: 페이지당 게시물 수 일치시키기

새로운 페이지 네비게이션 스크립트를 적용할 때 매우 중요한 점이 있습니다. 스크립트 내의 perPage (또는 유사한 이름의 변수, 예를 들어 numPostsPerPage 등) 값과 블로거 '레이아웃' 설정에서 '블로그 게시물' 위젯의 '기본 페이지에 표시할 게시물 수'가 반드시 동일해야 합니다. 이 숫자가 일치하지 않으면 페이지별로 게시물이 제대로 표시되지 않거나, 마지막 페이지 계산 오류 등 예기치 않은 문제가 발생할 수 있습니다.

예를 들어, 스크립트에서 perPage = 7로 설정했다면, 블로거 레이아웃 설정에서도 한 페이지에 표시할 게시물 수를 7개로 맞춰주어야 정확하게 페이지가 나뉘고 모든 글을 문제없이 볼 수 있습니다.

참고 자료

제가 페이지 네비게이션 문제를 해결하는 데 큰 도움을 받은 자료는 다음과 같습니다. 비슷한 문제를 겪고 계신 분들께 유용할 것입니다.

• How to Add Numbered Page Navigation Widget for Blogger (HelpBlogger)

혹시 저와 같이 블로거 페이지 네비게이션 문제로 어려움을 겪고 계신 분들께 이 글이 조금이나마 도움이 되었으면 좋겠습니다. 궁금한 점이 있다면 댓글로 남겨주세요!