블로그 위아래 이동 단추 넣기

제 블로그 오른쪽에 보면 이전 글, 다음 글, 위로, 아래로, 댓글 달기 이동 단추가 있죠? 이 단추를 만드는 법부터 블로그에 넣는 방법까지 소개해 드리겠습니다.

앞에 설명했던 CSS Image Sprites를 이용할 것이기 때문에 블로그 로딩 속도를 빠르게 - CSS Image Sprites, 블로그 추천, 구독 버튼 넣기 - CSS Image Sprite을 먼저 읽어보시는 게 이해하기 쉬울 겁니다.

 

블로그 이동 단추 만들기 - CSS Image Sprites

블로그 이동 단추를 만들 그림은 ICONFINDER에서 구했습니다. 아이콘 종류도 많고 라이센스, 크기별로 검색할 수 있어서 알아두면 매우 유용한 사이트입니다.

위 화살표, 아래 화살표, 왼쪽 화살표, 오른쪽 화살표, 댓글에 사용할 그림 파일을 내려받습니다. 다른 그림 파일을 받으셔도 상관없습니다.

이제 내려받은 다섯 개의 그림 파일을 CSS Sprites Generator로 합칠 겁니다. 합치는 방법은 블로그 로딩 속도를 빠르게 - CSS Image Sprites를 보시면 됩니다.

사용하기 어려우신 분들은 첨부한 파일을 그대로 사용하시면 됩니다.
화살표 : LGPL라이센스 - Everaldo Coelho
댓글아이콘: CCL 라이센스 저작자 표시 - 동일이용조건 변경 허락 - pc.de Team

navigation.zip

 

블로그 이동 단추 삽입하기

만들어진 CSS 코드를 아래처럼 수정합니다. 1, 2번째 줄을 넣어주고 클래스 이름만 같게 해주시면 됩니다.
첫 번째 줄의 bottom, right 값을 바꾸면 위치를 조정할 수 있습니다. bottom은 창 아래쪽으로부터의 거리, right는 오른쪽으로부터의 거리, top은 위로부터의 거리입니다.

이렇게 만든 CSS를 스킨 편집의 skin.css에 넣어줍니다.

.navigation{clear:both;position:fixed;bottom:30px;right:20px;border:0;margin:0;padding:0;} 
.navigation a{background: url(images/navigation.png) no-repeat top left;display:block;width: 32px;height: 32px;margin:5px 0;} 
.navigation .navigation_comment{background-position: 0 0;} 
.navigation .navigation_down{background-position: 0 -82px;} 
.navigation .navigation_previous{background-position: 0 -164px;} 
.navigation .navigation_next{background-position: 0 -246px;} 
.navigation .navigation_up{background-position: 0 -328px;}

 

      <!-- paging -->
       <s_paging>
        <div class="navigation">
         <a  class="navigation_previous" title="이전 글/Previous"></a>
         <a  class="navigation_next" title="다음 글/Next"></a>
         <a href="#" class="navigation_up" title="위로/Top"></a>
         <a href="#bottom" class="navigation_down" title="아래로/Down"></a>
         <a href="#comment" class="navigation_comment" title="댓글/Comment"></a>
        </div>
        <div class="paging">

이제 실제 버튼을 보이게 할 위 소스를 skin.html에 넣어야 하는데, 넣는 위치가 중요합니다. 이전 글/다음 글 링크를 사용하려면 치환자를 입력해야 하는데 이 치환자는 코드를 삽입하는 위치에 따라 작동하기도 하고 작동하지 않기도 하거든요.
skin.html에서 아래 그림 부분을 찾은 다음 <s_paging> 바로 아래에 3 ~ 9번째 줄을 넣어줍니다.

현재 상태로는 위로, 이전글, 다음 글 링크만 사용할 수 있습니다. 이제 "아래로"와 "댓글" 링크가 참조할 수 있는 주소를 넣어줘야 합니다.

"아래로"는 <a id="bottom"></a>를 스킨 - skin.html의 제일 아래쪽에 아래 그림처럼 넣어줍니다. 스킨에 따라서 footer나 container 다음에 넣어줘야 하는 경우가 있는 것 같습니다. 그림에 </div>가 몇 개 있는데 이 </div> 바로 위에 넣어보면서 제대로 동작하는 곳에 <a id="bottom"></a>를 넣어주세요.

댓글은 스킨 - skin.html에서 아래 그림에 나오는 내용을 찾습니다.
그리고 <s_rp_어쩌고..>아래 <div class="commentwrite">바로 위에 <a id="comment"></a>를 넣어줍니다. 스킨에 따라 <div class="commentwrite">가 다를 수 있으니 그림을 참고해서 잘 찾으시기 바랍니다.

이제 모든 작업이 끝났습니다. 스킨을 저장하고 블로그로 이동해서 Ctrl + F5를 누르세요.
그리고 이동 단추가 잘 되는지 확인하시면 끝입니다.

 

관련글

블로그 로딩 속도를 빠르게 - CSS Image Sprites
블로그 추천, 구독 버튼 넣기 - CSS Image Sprite