사람사물상황
티스토리 오디세이 스킨 화살표 만들기 , top버튼, 맨위로 가는 버튼
안녕하세요 사람사물상황입니다.
이번엔 블로그 맨위로 언제든지 이동할수 있는 화살표를 만들겁니다.
오른쪽 밑에 있는 그것 다들 한번쯤 보셨죠. 오디세이 스킨에도 추가해보려합니다.
먼저 관련 지식은 다음 블로그를 참고 하여 얻게 되었습니다.
티스토리 블로그 맨 위로 이동버튼 (Top버튼) 넣는 3가지 방법
<맨 위로 이동버튼 (Top버튼, go to top button)을 넣는 3가지 방법> 오늘도 이웃 블로거의 요청으로 강좌를 작성합니다.!! (너무 늦었나?) 사실 포스팅을 써 놓은지는 오래되었는데, 이래저래 다른 포스
unzengan.com
여기서 나온것중에 올라가는 느낌도 주고 싶어서 해봤는데, j쿼리를 사용하는것은 거기서 안내한것처럼 뭔가 속도 조절이 안되고, 스크롤 위치도 설정이 안되며, 미리보기가 깨지는등, 이상한점들이 있어서,
저는 2번째 자바를 사용하여 설정하였습니다.
순서는
1. 화살표 이미지를 블로그에 업로드한다.
2. 자바 스크립트 파일도 블로그에 업로드한다.
3. html 두곳에 설정 태그를 넣는다 . 입니다.
1. 화살표 이미지를 블로그에 업로드한다.
다음의 파일을 넣으시거나 넣고 싶은 이미지를 찾아 올려주시면 됩니다.
넣는곳은 스킨편집-html편집에 파일업로드 공간이 있습니다.
2. 자바 스크립트 파일도 블로그에 업로드한다.
3. html 두곳에 설정 태그를 넣는다 .
html <head> ~ </head> 사이에
<script type="text/javascript" src=./images/scroll_top.js ></script>해당 관련 태그가 담긴 파일
html <body> ~ </body> 사이에
<!-- Top 버튼 -->
<div style="display:scroll;position:fixed;bottom:50px;right:10px;">
<a onclick="go_top();" title=Top><img src=./images/Arrow-Up-blue-48.png ></a>
</div>
<!-- Top 버튼 -->
해당 관련 태그가 담긴 파일
그럼 완성된 모습입니다.
나름 화살표의 위치를 조정하여 올려보았습니다. bottom:50px;right:10px; 으로 만졌구요.
스크롤 속도의 조절은 업로드한 자바 파일의 var speed=7; 부분을 수정하여 업로드하며, 작게 할수록 빠르다 합니다.
살짝 어렵게 방법을 찾았습니다. 검색으로는 잘 안나오고 top태그를 찾아보다 알게되었습니다. 해당 블로거분에게 감사드리고 유용했으면 좋겠습니다.
그럼 20000
'블로그 > 스킨수정' 카테고리의 다른 글
| 티스토리 북클럽 스킨 사이드바 좌로 옮기기 (0) | 2020.12.20 |
|---|---|
| 티스토리 북클럽 스킨 사이드바 카테고리 보이기 (0) | 2020.12.18 |
| 티스토리 북클럽 스킨 프로필 만들기 (7) | 2020.12.14 |
| 티스토리 오디세이 스킨 최근글과 인기글 분리하기 (2) | 2020.12.12 |
| 티스토리 오디세이 스킨 제목에 수정,삭제 넣기 (1) | 2020.12.08 |
| 티스토리 오디세이 스킨 본문 제목 크기 줄이기 (9) | 2020.12.06 |
| 티스토리 오디세이 스킨 사이드바 크기 변경하기 (본문 크기 조정으로) (11) | 2020.10.25 |
| 티스토리 오디세이 스킨 프로필 하단 줄 없애기 (2) | 2020.10.23 |
