친효애드온 : 티스토리 TOP버튼 with 글쓰기 관리자 카테고리 버튼 (마크2)
기존 TOP 버튼이 딱 위로 올라가기 버튼 한 개만 존재하는 것이었다면 이번 마크2 버전은 좀 더 다양한 버튼을 넣어놓은 버전이라고 할 수 있습니다. 모바일용 이라기 보다는 주로 사용되는 해상도는 아마 데스크탑에서 많이 사용되지 않을까 싶습니다. 친효스킨을 기준으로 작업하였지만 다른 스킨에서도 정상 동작하도록 하였습니다.
jQuery 세팅
먼저 제이쿼리 스크립트부터 세팅하도록 합니다. 자신의 티스토리 스킨 편집 모드로 들어가서 HTML의 <head> 안에 아래의 첨부파일 내용을 모두 복사해서 빈 공간 확보 후 붙여넣기를 진행합니다.
친효애드온 - TOP버튼 마크2 jQuery.txt메모장을 열어보시면 다음과 같은 내용이 들어 있습니다.
<script>
$(document).ready(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
$('#topBtn').fadeIn();
} else {
$('#topBtn').fadeOut();
}
});
$(".rgyTop").click(function() {
$('html, body').animate({
scrollTop: 0
}, 500);
return false;
});
});
</script>
파란색 숫자는 버튼이 나타나는 최소 높이를 나타냅니다. 숫자가 커질수록 버튼이 나타나도록 아래로 스크롤하는 가로 길이가 길어집니다. 빨간색 숫자는 맨위로 가는 버튼을 눌렀을 때 이동되는 속도 입니다. 숫자가 커질수록 천천히 스크롤되며 올라갑니다. 참고하시기 바랍니다.
보시는 것 처럼 이렇게 head 안쪽에 배치하면 됩니다. 잘 모르시겠다면 </head> 전에 붙여넣기 하시면 됩니다.
HTML 세팅 - 폰트어썸 CDN 링크 추가
티스토리 스킨 편집으로 들어갑니다. HTML의 <head> 안쪽에 아래의 링크를 그대로 붙여넣기 합니다. (title 아래에 붙여넣기 진행을 추천함) 방법은 위에 설명한것과 동일합니다. 첨부파일로도 올려놓겠습니다.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
HTML 세팅 - 카테고리 링크 추가
다음은 카테고리 버튼을 눌렀을 때 카테고리로 바로 이동되도록 만드는 기능을 추가할 것 입니다. 먼저 여러분들의 스킨에 있는 카테고리 모듈을 찾아야 합니다. 티스토리의 사이드바 모듈은 보통 <s_sidebar_element> 로 감싸져 있습니다. 그 중에서도 카테고리를 찾아야 합니다. 영어로 되어 있기도 하고 한글로 되어 있기도 합니다. 친효스킨의 경우는 한글로 주석 처리를 해두었습니다. 먼저 아래의 첨부파일을 다운로드 받습니다.
메모장을 열어서 모두 복사하시고 아래의 위치에 그대로 붙여넣기 해주시면 됩니다.
파란색이 기존에 있는 카테고리 모듈이며 바로 위의 빨간색 태그들이 첨부파일 내용 입니다. 반드시 카테고리 모듈 바로 위에 붙여넣기를 해주셔야 합니다. 이 위치로 바로 이동되게 하기 위함 입니다.
카테고리 바로가기 모듈이 정상적으로 등록되면 이렇게 사이드바에 있는 모듈 목록에 표시가 됩니다. 이것을 카테고리 바로 위로 이동시켜 주시면 됩니다.
HTML 세팅 - 버튼 추가
이제 뼈대가 되는 HTML을 넣어보도록 하겠습니다. 마찬가지로 아래의 첨부파일을 먼저 받아주시기 바랍니다.
첨부파일 안의 태그들을 모두 복사한다음 스킨의 HTML 카테고리에 있는 </s_t3> 바로 위에 붙여넣기를 해주시면 됩니다.
이렇게 해주시면 됩니다. 그리고 저장 합니다.
CSS 세팅
이제 마지막으로 스타일을 구성하는 CSS 세팅만 남았습니다. 마찬가지로 먼저 첨부파일을 다운로드 받아주시기 바랍니다.
첨부파일의 모든 내용을 복사하시고 스킨의 CSS로 이동하신다음 빈 공간을 확보하시고 그대로 붙여넣기를 하시고 저장을 눌러주시면 됩니다.
이렇게 빈 공간을 확보하시고 그대로 붙여넣기를 해주시면 됩니다. 이제 모든 세팅이 끝났습니다. 메인 화면으로 가셔서 한번 스크롤을 내려 보시기 바랍니다. 버튼이 정상적으로 나타나는지 확인해 주세요.
정상적으로 세팅이 완료 되었다면 아마 이런 버튼이 나타나게 될 것입니다. 만약 나타나지 않으면 다시 처음부터 차근차근 진행해 보시기 바랍니다. 모바일 해상도에서는 버튼의 크기가 70%로 작아집니다. 끝.
"친절한효자손 취미생활" 을 검색!
