티스토리 <위로가기> 버튼 만들기

2014.02.15 21:25 - 가을닢

 

【 물어물어 바꾸는 티스토리 Tip 】

 

포스트를 길게 쓰거나 올리는 이미지가 많으면 스크롤을 한참동안 내리게 됩니다.

그러다보면 다 읽고나서 포스트 상단으로 올라가는 스크롤의 압박이 심각해 질때도 있습니다.

이럴때 포스트 상단으로 올려 주는 <위로가기> 버튼이 있으면 한결 편리합니다.

또한 카테고리의 경우 주로 상단 좌우에 위치하기 때문에 다른 포스트를 찾거나 이동하는데에도 도움이 됩니다.

 

 

 

[빠르게 위로가는 버튼]

 

- [관리자모드] 에서 [HTML/CSS편집] 을 클릭 합니다.

- 카테고리 중에 [파일업로드] 를 누르면 여러가지 스킨 파일 목록이 뜨는데 맨 아래쪽에 있는 '추가' 버튼을 클릭 합니다.

- 미리 준비해둔 <위로가기> 버튼에 쓰일 이미지를 업로드 합니다.

 

- [HTML/CSS편집] → [skin.html] 에서 <head> ~ </head> 사이에 아래의 소스를 입력해 줍니다.

 

<!-- 빠르게 위로가는 버튼 -->

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="위로가기"><img src="이미지주소" /></a>

 

 ▼ 오른쪽 드래그 방지 블로그라 아래의 소스 파일을 다운 받아 복사+붙여넣기를 하면 간편합니다.

빠르게 위로가는 버튼소스.txt

 

- 위에 표시한 빨간색 부분에는 이미지 주소를 입력하면 됩니다.

- 본인은 </head> 바로 위에 적어 넣었습니다.

- 혹시 위로가기 버튼이 본문 페이지나 기타 다른 이미지에 묻힌다면 [skin.html] 하단, </body> 바로 위에 넣어주시는 것이 좋습니다.

 

 

 

[부드럽게 위로가는 버튼]

 

- [관리자모드] 에서 [HTML/CSS편집] 을 클릭 합니다.

- 카테고리 중에 [파일업로드] 를 누르면 여러가지 스킨 파일 목록이 뜨는데 맨 아래쪽에 있는 '추가' 버튼을 클릭 합니다.

- 미리 준비해둔 <위로가기> 버튼에 쓰일 이미지와 다운받은 자바 스트립트소스(scroll)를 업로드 합니다.

 (자바 스트립트소스는 아래 파일을 다운받으시면 됩니다)

 

▼ 자바 스트립트소스(scroll) 다운로드 파일

scroll.js

 

 

 

- [HTML/CSS편집] → [skin.html] 에서 <head> ~ </head> 사이에 아래의 소스를 입력해 줍니다.

- 혹시 위로가기 버튼이 본문 페이지나 기타 다른 이미지에 묻힌다면 [skin.html] 하단, </body> 바로 위에 넣어주시는 것이 좋습니다.

 

<!-- 부드럽게 위로가는 버튼 -->
<script type="text/javascript" src="자바 스크립트 링크 주소">
</script>

<div style="display:scroll;position:fixed;bottom:5px;right:5px;">
<a onclick="go_top();" title=위로가기><img src="이미지주소"></a>
</div>
<!-- 부드럽게 위로가는 버튼 끝 --> 

 

 ▼ 오른쪽 드래그 방지 블로그라 아래의 소스 파일을 다운 받아 복사+붙여넣기를 하면 간편합니다.

부드럽게 위로가는 버튼소스.txt

 

- 위에 표시한 파란색 부분에는 자바 스트립트소스(scroll) 의 링크 주소를 입력하고, 빨간색 부분에는 이미지 주소를 입력하면 됩니다.

 (자바스트립트소스 파일은 다른분이 만드셨는데 너무 오래전에 다운받아 둔거라 정확한 출처를 찾지 못했습니다ㅠㅠ)

 

 

 

 

    

 

 

투명한 위로가기 이미지 파일(png)입니다.

오른쪽 클릭이 안되는 블로그라 압축 파일로 올려 보았습니다.

(png 파일을 jpg로 변환하지 않아도 문제 없이 적용 가능합니다) 

 

▼  이미지 다운로드 압축 파일 

위로가기 버튼.zip

 

 

 

 

다른 카테고리의 글 목록

티스토리 꾸밈 카테고리의 포스트를 톺아봅니다

티스토리 툴바