티스토리 맨위로 가는 Top 버튼[북 클럽스킨]

티스토리 블로그에서 스크롤시 맨 위로 올라가는 Top 버튼 만드는 법에 대해 알아보겠습니다. 천천히 따라오시면 쉽게 구현하실수 있습니다.

기본스킨 / 구매한 스킨 적용방법

딱 2가지만 (css , javascript)변경하시면 적용하실 수 있습니다.

1. CSS 변경 방법

추가할 사이트에서 TOP 버튼의 class 나 선언된 id 명을 알아야 합니다.

추가할 사이트로 접속 후 개발자도구([ctrl] + [shift] + [i])를 입력하시면 개발자도구가 활성화됩니다.

[ctrl] + [shift] + [c] 또는 위에 사진에 있는 화살표를 누르시면 해당 페이지에 객체를 선택하실 수 있습니다.

Top 버튼을 선택하시면 개발자도구 화면에 실제 소스코드가 보입니다.

요즘 많이 쓰는 기본스킨(Book Club)에선 class 명이 page -top으로 선언해 놓았네요.

이제 클래스 명을 알았으니 css에 수정하러 티스토리 관리 페이지에서 [꾸미기]-[스킨 편집]-[html 편집]으로 들어갑니다.

스킨 편집에서 html 편집 버튼을 클릭합니다.

css 편집화면 page-top 을 찾아서 변경할 소스로 변경합니다.

#변경할 소스

#footer .page-top {
  display: none;     #처음 접속시 화면에 표시하지않음
  position: fixed;   #하단에 고정시킴
  right: 25px;       #오른쪽에서 25px
  bottom: 25px;      #하단에서 25px
  z-index: 9;        #z-index 는 9 나 높은숫자로 변경하실수 있습니다.
  width: 30px;       #크기가 가로 30px
  height: 30px;      #크기가 세로 30px
  border: 1px solid #999; #테두리 선 1px로 solid #999는 색입니다. 맘껏 변경하세요.
  border-radius: 50%;   # 테두리 굴곡을 설정
  background: #fff url(./images/ico_package.png) no-repeat -100px -200px;
  text-indent: -999em;
}

#footer .page-top:focus,
#footer .page-top:hover {
  background-color: #757575;
  background-position-x: -150px;
}

css 편집화면에서 page-top 을 찾아서 변경할 소스로 변경 후 적용을 합니다. (494 줄:사용자들 마다 줄위치는 다를수 있습니다.)

2. java script 추가 방법

# 추가할 스크립트
<script>
$(function() {
	$(window).scroll(function() { 
		if ($(this).scrollTop() > 200) { 
			$('.page-top').fadeIn(); } 
		else { $('.page-top').fadeOut(); }
	}); 
	$(".page-top").click(function() { 
   	$('html, body').animate({ scrollTop : 0  }, 300); 
    return false; });
});
</script>

• html 탭을 클릭합니다.
• html 코드가 있는 창에서 [Ctrl]+[F]를 눌러 </body>의 위치를 확인해 주세요.
• </body> 위에 추가할 스크립트를 붙여 넣고 적용 합니다.

지금까지 티스토리에 따라다니는 top 버튼을 만들어 보았습니다. 개발자도구를 처음 보시는 분도 계시겠지만 블러그를 계속 운영 예정이라면 지금 위 내용처럼 직접 편집 하시는 습관을 들이시면 티스토리나 워드프레스도 예쁘게 꾸미실 수 있습니다.