티스토리 블로그 페이지 분할 이쁘게 꾸미기

아래 설명대로 따라하기 전에 반드시 스킨(skin)을 백업해 놓으세요. 스킨 백업 방법은 아래 링크를 클릭.

티스토리 스킨 저장 방법 [초급]

혹시라도 발생할 지 모를 불상사에 대해서는 책임지지 않습니다. 백업해 놓지 않고 건드리다간 여러분의 블로그가 성형외과에 가야할 운명에 처할지도. @@

반드시 스킨 백업을 해 놓은 뒤 아래 내용대로 따라 합니다.

위 페이지 분할 모양이 작고 보기에 불편해서 아래와 같이 바꾸는 과정입니다. (티스토리에서 공개한 스킨 속에 포함된 것이라, 그냥 사용해도 무방하지 싶습니다.)

아래 소스 중 && 부분은 실제 복사해서 붙여 넣을 때 ## 으로 바꾸어 줍니다.

1. skin.html 편집

<s_paging>

       <div id="paging"> <span class="inner"> <a [&&_prev_page_&&] class="[&&_no_more_prev_&&] link_prev" id="prevPage">이전</a> <span class="numbox">

          <s_paging_rep> <a [&&_paging_rep_link_&&] class="num">[&&_paging_rep_link_num_&&]</a> </s_paging_rep>

          </span> <a [&&_next_page_&&] class="[&&_no_more_next_&&] link_next" id="nextPage">다음</a> </span> </div>

</s_paging>

2 . style.css 편집

아래 소스를 style.css 부분 속 원래 페이징(paging) 소스 대신 복사해 넣습니다. (스킨 종류에 따라 페이징 소스가 다르므로 주의해서 살펴 보세요. 대게 'paging', '페이징'이란 문자가 포함되어 있습니다.

<= 이전 페이징 소스를 삭제하거나 /* */ 처리해서 막아 놓고 아래 소스를 복사합니다. (잘 모르시면 반드시 인터넷 검색을 해서 방법을 숙지하세요! 잘못하면 블로그 모양이 이상해 질 수 있습니다.)

/* paging */

#paging { width:100%; padding-top:30px; text-align:center; clear: both; }

#paging .inner { display:table; display:inline-block; margin:0 auto; text-align:center; }

#paging .numbox { float:left; font-weight:bold; font-size:11px; line-height:13px; font-family:Tahoma; }

#paging .num { float:left; margin-right:3px; cursor:pointer; color:#6faab8; }

#paging .interword { float:left; margin-right:8px; padding:10px 0 0 5px; color:#6faab8; letter-spacing:0; } /* 1 ... 10 11 12 페이지중략 */

#paging .num span { display:block; padding:6px 8px 6px; border:1px solid #6faab8; text-decoration:none; }

#paging .link_prev, #paging .link_next { float:left; width:39px; height:27px; text-indent:-9999em; cursor:pointer; }

#paging .link_prev { margin-right:3px; background:url(images/ico_prevkk.gif) left 0 no-repeat; }

#paging .link_next { background:url(images/ico_nextkk.gif) right 0 no-repeat; }

/* 페이징 - 현재 페이지 */

#paging .selected { padding:6px 8px 6px; color:#fff; background-color:#6faab8; }

#paging .no-more-prev { float:left; width:39px; height:27px; margin-right:3px; cursor:default; }

#paging .no-more-next { float:left; width:39px; height:27px; cursor:default; }