[Blogger Tip] 페이지 번호 삽입하기 - 이전 게시물, 다음 게시물 대체

Blogger로 글을 쓰다보면 다른 국내 블로그 서비스와 또 하나 다른점은 페이지 네비게이터입니다. 그러니까 총 10개의 포스팅이 내 블로그에 있다면 1 2 3 ... 10 이런식으로 페이지 하단에 표시되는데, 블로거에서는 '이전 게시물' 과 '다음 게시물'이라는 링크밖에 나오질 않습니다. 그리고 이를 대체할 위젯도 없습니다.

물론 번호로 바꿀 수 있습니다. 그런데 조금 복잡합니다. 내부 데이터 구조를 알아야 되고 이 데이터들을 이용한 스크립트가 필요합니다.

그래서 공개된 스크립트를 시키는 대로만 하면 됩니다. 저도 그렇게 했고요 ㅎㅎㅎ

1. 블로거에 로그인 합니다.

2. 블로거를 선택한 후 메뉴에서 템플릿을 선택합니다. 템플릿 선택화면에서 HTML 편집을 누르고 나오는 경고창에서 계속을 누릅니다. 전에 말했듯이 계속 전에 반드시 백업을 해주시길.

3. 나온 코드창에서 다음 코드를 찾습니다. Ctrl+F로 찾으면 됩니다.

]]></b:skin>

4. 찾은 코드 바로 윗줄에 아래 코드를 붙여넣습니다. 아래는 css 스크립트로 어떻게 페이지 번호를 보여줄 것인가에 관한 것이니 CSS에 조금이나마 익숙하신 분들은 나중에 수정하시면 됩니다.

.showpageArea a {
text-decoration:underline;
}

.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}

.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}

.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}

.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}

.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}

.showpage a:hover {
text-decoration:none;
}

.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}

5. 코드에서 다음 코드를 찾습니다. 역시 Ctrl+F.

</body>

6. 찾은 코드 바로 위에 아래 자바스크립트 코드를 넣습니다. 아래 자바스크립트 코드는 아래에서 보는 것처럼 누군가 만들어놓은 것을 그냥 쓰는 것입니다. 저건 막 공개되어 있으니, 저 링크 그대로 쓰시거나 아니면 저걸 다운받아서 호스팅 서비스를 이용하고 있으면 거기다 옮겨 놓고 링크 옮겨 놓으면 됩니다.

<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
  <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <script type='text/javascript'>
  var pageCount=6;
  var displayPageNum=6;
  var upPageWord =&#39;Previous&#39;;
  var downPageWord =&#39;Next&#39;;
  </script>

  <script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
  </b:if>
</b:if>
<!--Page Navigation Ends -->

템플릿 저장하세요. 끝.

« prev next »