친절한효자손 취미생활

친효스킨에는 현재 TOP 버튼이 적용되어 있습니다. 하지만 일부 스킨에서는 TOP 버튼이 없을 수 있습니다. 만약 여러분들께서 사용하시는 반응형 스킨에 위로 올라가는 TOP 버튼이 없다면 이 애드온을 통해서 만드실 수 있습니다.




적용하시면 최종적으로 이런 형태의 버튼을 확인하실 수 있습니다. 티스토리 스킨의 오른쪽 하단에 생성되며 가장 맨 위로 스크롤이 되어 있는 경우에는 버튼이 자동으로 사라집니다. 그리고 스크롤을 하단으로 조금만 내려보시면 다니 나타나는것을 확인하실 수 있습니다. 누르면 빠르게 다시 제일 위로 올라갑니다. 이제 세팅 방법을 살펴보겠습니다.


jQuery 세팅하기

먼저 자바스크립트의 한 종류인 제이쿼리를 세팅해야 합니다. 하나씩 따라해 주시기 바랍니다. 어렵지 않습니다. 먼저 아래의 스크립트 링크 코드를 <head> 안쪽에 그대로 붙여넣기를 해줍니다. 첨부파일로도 올려놓겠습니다.


<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>


친효애드온_TOP버튼_스크립트주소.txt


이제 이 스크립트 코드를 이렇게 붙여넣기 해주세요.




위에서 설명드렸듯, 자신의 티스토리 관리자 모드에서 왼쪽에 있는 꾸미기 > 스킨편집으로 가셔서 오른쪽 상단에 있는 HTML 편집으로 들어가시고 HTML 카테고리에서 <head> 안쪽에 빈 줄을 만들어서 붙여넣기 해주시면 됩니다. 통상적으로 <link rel= 어쩌구 저쩌구> 의 아래에 공간을 만들어 붙여넣기를 해주시면 됩니다. 해당 스크립트 주소는 중복이 되어도 상관은 없습니다.


다음은 아래의 첨부파일을 다운받아서 그대로 복사 후 마찬가지로 <head> 안쪽에 붙여넣기를 해주세요. 보통 <head> 안쪽에 <script> 가 들어가는데, 이 그룹을 찾으셔서 위 혹은 아래에 공간을 확보하시고 그대로 붙여넣기를 하시면 됩니다.


친효애드온_TOP버튼_jQuery.txt




이렇게 넣으시면 됩니다. 참고로 숫자 100은 스크롤 되는 높이에 대한 설정으로 세로 100px 을 기준으로 TOP 버튼이 나타나고 사라진다는 뜻 입니다. 500은 위로 올라가는 속도 입니다. 수치가 낮을수록 빨리 올라갑니다.


HTML 세팅하기

이제 버튼의 뼈대를 세팅합니다. 다음의 코드를 </s_t3> 바로 위에 붙여넣기를 해주시면 됩니다.


<div id="topBtn">TOP</div>


친효애드온_TOP버튼_HTML.txt




이렇게 붙여넣기 해주시면 됩니다.


CSS 세팅하기

이제 마지막 과정 입니다. 아래의 첨부파일을 다운 받으시고 모두 복사해 주세요.


친효애드온_TOP버튼_CSS.txt




그리고 CSS 탭으로 넘어오셔서 빈 공간을 만드시고 그대로 붙여넣기 해주시면 됩니다. 이제 모두 저장을 하시고 한번 블로그를 확인해 보시기 바랍니다. 스크롤을 조금 내리면 오른쪽 하단에 TOP 버튼이 생성된것을 확인하실 수 있으실 겁니다. 버튼의 색상을 변경하고 싶으시다면 위의 첨부파일 안에 주석으로 표시를 해 두었으니 원하시는 색으로 변경하시면 됩니다. 끝.





알리익스프레스 할인

이 블로그를 후원해주실 분들을 모집합니다!

이 글을 공유합시다

facebook twitter googleplus kakaostory naver

본문과 관련 있는 내용으로 댓글을 남겨주시면 감사하겠습니다.

  1. Favicon of https://eastsky3483.tistory.com 땅미남 2019.08.08 19:42 신고

    완전 꿀팁~잘쓰겠습니다~~!!