iNove 티스토리 스킨 Ver 2.2 페이징 교체하기
2014.02.02 00:00
iNove 티스토리 스킨 Ver 2.2 페이징 교체하기

iNove 티스토리 스킨 Ver 2.2을 제 블로그에 적용하고 많은 부분을 수정하면서 사용중입니다.

 

이번에 소개하는 페이징 교체까지 하면 아마 제 블로그에서는 크게 수정할게 없을듯 합니다. 게시글로 남기지 않는 자잘한 수정도 많이 해서 이젠 어느정도 원하던 스킨이 된듯 하네요.

 

iNove 티스토리 스킨 소스가 간결해서 수정이 용이하고 기능추가를 해도 소스꼬임이나 버벅임이 없어 좋네요.

- 제가 초보라 복잡한 소스 추가를 하면 꼬일때가 많아서...- 스킨을 수정하기전에 백업을 꼭! 꼭! 하고 진행 하세요.

 

티스토리 블로그 스킨 백업 관련글 : 티스토리 스킨 수정전 백업은 필수!!!!!

 

아래는 iNove 티스토리 스킨 Ver 2.2 수정 관련 글입니다.

 

 

그럼 페이징 교체를 시작해 보겠습니다.

 

페이징이라고 하니 뭔가 싶으시죠. 아래 이미지를 보세요.

 

글을 읽을때, 카테고리 목록을 볼때 하단에 나오는 페이지 번호입니다. iNove 티스토리 스킨은 위 이미지처럼 하단 왼쪽으로 작게 나오게 설정되 있습니다.

 

iNove 티스토리 스킨 레이아웃을 수정안하고 그냥 사용하신다면 이 페이지 번호가 작아보이지 않지만 저처럼 본문폭 + 사이드바를 늘려 사용하신다면 참 작아 보입니다.

 

그래서 아래처럼 수정해 보았더니 훨씬 보기 좋네요.

 

이 페이징 소스는 CATnTUNA's Blog에서 배포하는 스킨에서 사용했습니다.

 

티스토리 관리 -> HTML/CSS 편집에서 Ctrl + F를 눌러 '#pagenavi'을 검색하세요.

 

style.css에 검색이 되는데 위 이미지를 참고해서 아래 소스로 교체해 주세요.

 

/* 페이징 */
.paging{
 padding: 25px;
 text-align:center;
 }
.paging_border{
 display: inline-block;*zoom:1;*display: inline;
 border: 1px solid #ddd;
 width: 42px;
 height: 25px;
 margin: 2px;
 border-radius:4px;
 line-height: 25px;
}
.paging_border:hover {
 border: 2px solid #369;
 margin: 1px;
}
.paging .selected {
 display: inline-block;*zoom:1;*display: inline;
 border:1px solid #2B6C7C;
 width: 40px;
 height: 23px;
}

 

검색창에서 's_paging' 검색 하세요.

 

 

skin.html에 검색이 되는데 위 이미지를 참고해서 아래 소스로 교체해 주세요.

 

   <s_paging>
     <div class="paging"> <a [##_prev_page_##]>« </a>
    <s_paging_rep><a [##_paging_rep_link_##]> <span class="paging_border">[##_paging_rep_link_num_##]</span></a> </s_paging_rep>
    <a [##_next_page_##]> »</a> </div>
   </s_paging>

 

만약 첨부한 이미지가 흐리다면 이미지를 눌러서 보시면 잘 보입니다. 마우스 드래그 안되니 소스는 첨부파일을 참고 하세요.

 

페이징 소스 파일 : 페이징교체소스1.txt
저작자 표시 비영리 변경 금지
신고

, , , , , ,