blog, 블로그 팁 세번째 - 위/아래 이동 버튼넣기

블로그에 위로가기/아래로가기 버튼 넣기

블로그 오른쪽 하단에 보이는 화살표를 눌러 포스트의 맨 위/맨 아래 이동하는 버튼을 달아봅시다.

1. 이미지 버튼으로 이동

버튼으로 쓰기 적당한 이미지를 준비합니다.

     

Developer_Icons_PNG.zip

포토샵에 재주가 없거나 이미지를 구하기 번거로우신 분들을 위해 적당한 아이콘 파일을 첨부했습니다. 이미지를 구하셨다면 설정-꾸미기-HTML/CSS편집-파일업로드에서 이미지를 추가해 주세요.

저는 파일명을 [ iconUp.png / iconDown.png ] 로 했습니다. 적당한 이름으로 파일을 업로드합니다. 그리고 업로드한 아이콘의 주소를 미리 확인합니다. 기본 경로는 [ ./images/파일명 ] 입니다.

메모장 같은 곳에 위/아래 아이콘 주소를 적당히 복사 해 놓으시고 HTML/CSS편집 으로 이동하셔서 소스를 추가 해 줍니다.

gotoUPDN_image.txt

skin.html

<!-- UP 시작 -->

<a style="display:scroll; position:fixed; bottom:33px; right:0px;" href="#top" title= 위로가기 >

<img src=위로가기 아이콘 링크 주소 (또는 ./images/파일명) ></a>

<!-- UP 끝 -->

<!-- DOWN 시작 -->

<a style="display:scroll; position:fixed; bottom:5px; right:0px;" href="#footer" title= 아래로가기 >

<img src=아래로가기 아이콘 링크 주소 (또는 ./images/파일명) ></a>

<!-- DOWN 끝 -->

</body>

</head>

[body] [/body] 태그 사이에 소스를 넣어주면 됩니다. 빨간색으로 표시된 부분은 아이콘 크기에 맞게 위치를 조절하시면 됩니다. [ bottom ] 은 아래에서 부터 얼마나 위에 위치하는가, [ right ] 는 오른쪽 프레임 간에 거리를 말합니다. 위로가기-아래로가기 버튼을 상하로 나란히 배치하려면 위로가기 버튼이 더 위에 위치해야 하므로 bottom을 아이콘 높이 만큼 위로 지정해야 합니다.

파란색으로 표시된 부분은 마우스를 버튼 위에 올렸을 때 나타나는 인덱스 입니다. 맘대로 수정하셔도 됩니다.

2. 텍스트 링크로 이동

위에 방법이 번거로우신 분들은 이미지 버튼 대신 텍스트 링크를 이용해 이동하는 방법도 있습니다. 이미지 업로드 없이 그냥 HTML/CSS편집 부분에 아래의 소스만 추가해 주시면 됩니다.

gotoUPDN_text.txt

skin.html

<!-- UP 시작 -->

<a style="display:scroll; position:fixed; bottom:18px; right:0px;" href="#top" title= 위로가기 > ▲ 위로가기 </a>

<!-- UP 끝 -->

<!-- DOWN 시작 -->

<a style="display:scroll; position:fixed; bottom:5px; right:0px;" href="#footer" title= 아래로가기 > ▼ 아래로가기 </a>

<!-- DOWN 끝 -->

</body>

</head>

이미지버튼 때와 마찬가지로 빨간색 부분은 글씨가 위치 할 좌표이고, 파란색 부분은 마우스를 롤오버 했을 때의 인덱스, 까만 글씨가 실제 화면에 표시되는 텍스트 링크입니다. 블로그에 맞게 수정해서 쓰시면 됩니다.

3. 부드럽게 위로 이동

자바스크립트를 추가하면 화면 이동을 좀 더 부드럽게 할 수 있습니다. 

[ smooth_scroll-top.js ] 토글 파일을 HTML/CSS편집 메뉴에서 파일업로드로 첨부해 주세요. 그리고 HTML/CSS 편집 메뉴로 돌아와 skin.html에 아래에 소스를 추가해 주시면 됩니다.

smooth_scroll-top.js

smooth_scroll-top.txt

skin.html

<!-- 부드러운 스크롤 Top 시작 -->

<script type="text/javascript" src= 자바 스크립트 링크 주소 (또는 ./images/smooth_scroll-top.js) >

</script>

<div style="display:scroll; position:fixed; bottom:33px; right:0px;">

<a onclick="go_top();" title= 위로가기 >

<img src= 위로가기 아이콘 링크 주소 (또는 ./images/파일명) ></a>

</div>

<!-- 부드러운 스크롤 Top 끝 -->

</body>

</head>

소스 수정은 위에 두가지 방식과 동일합니다.