본문 바로가기

■ 블로그꾸미기

깔끔한 페이징 버튼 만들기




스킨을 바꾸다보면, 왠지 하단 페이징 버튼이 맘에 들지 않았는데..........
그래서 위 모양 처럼 바꾸었습니다^^ @_@
Grace*님 블로그에서 배워왔습니다 @_@

요즘은 저런 버튼 모양을 또 많이 사용하시더군요 ~_~


Skin.html 에 들어갈 소스 입니다.

검색에서 s_paging를 검색하세요
그리고 <s_paging> 로 시작하는 부분부터 </s_paging>까지 지워주시고 아래 소스를 넣어주세요.

<s_paging>
<div id="paging">
<br/>
<a [# #_prev_page_# #] class="prev" title="이전페이지">◀ PREV </a>
<s_paging_rep><a [# #_paging_rep_link_# #] class="num">[# #_paging_rep_link_num_# #]</a></s_paging_rep>
<a [# #_next_page_# #] class="prev" title="다음페이지">NEXT ▶</a>
<br/>&nbsp;
</div>
</s_paging>
# # 이건 중간에 한칸 띠어져 있습니다.
소스 적용시에는 붙혀 주세요.


style.css 에 아래 내용을 입력합니다.
#paging {width:580px; text-align:center; float:left; line-height:15px}
#paging a.prev{font:8pt verdana; color:#555555}
#paging .selected {font-weight:bold; color:#555555}
#paging a.num{border:#AAAAAA 1px solid; background-color:#FFFFFF; color:#555555; padding:3px 6px; margin:3px; font:8pt verdana}
#paging a:hover.num{border:#555555 1px solid}

항상, 소스를 고치기 전에는 기존 소스를 미리 백업시켜 놓는 다는거 ! 잊지 마세요 ^^

혹시 소스가 잘 적용 안되시는 분들을 위해 파일 올려드릴께요