티스토리 #1 스킨 - 맨 위로 버튼 추가하기

티스토리 블로그가 타 블로그보다 차별화가 있는 점은 바로 블로그 스킨을 내 마음대로 편집이 가능하다는 점입니다.

html, css, javascript, jquery 등의 프로그래밍 언어를 이용하여 스킨을 꾸밀 수 있다는 것이 엄청난 강점인 것 같습니다.

이번에는 티스토리 #1 스킨에서 글에서 맨 위로 올라가는 버튼을 구현해보겠습니다.

HTML / CSS  편집 페이지 열기

---

먼저 블로그 관리페이지에서 사이드바 메뉴 항목에 보면 HTML / CSS 편집 항목이 있습니다. 

다음 항목을 클릭하여 HTML/CSS 편집 페이지를 열어주세요.

HTML에 소스 코드 추가

---

HTML 항목에서 제일 하단으로 스크롤을 내려주시면 </body> 태그가 있습니다. 태그 바로 위쪽에 다음 코드를 넣어주세요.

script.txt

script.txt

---

<script>

    $(function() {

     $('#MOVE_TOP_BTN').show();

$("#MOVE_TOP_BTN").click(function() {

$('html, body').animate({

scrollTop : 0

}, 400);

return false;

});

    });

</script>

<a id="MOVE_TOP_BTN" href="#"><img src=./images/up.png border="0"/></a>

CSS에 소스 코드 추가

---

CSS 항목에서 제일 하단으로 스크롤을 내려서 다음 코드를 넣어주세요.

css.txt

css.txt

---

a#MOVE_TOP_BTN {

position: fixed;

    right: 20px;

    bottom: 50px;

    display: none;

    z-index: 999;

}

맨 위로 버튼 아이콘 업로드

---

마지막으로 맨 위로 버튼 아이콘을 업로드 해야합니다.

up.png.zip

위 첨부파일을 다운로드하여 사용 하셔도 되고, 만약 다른 아이콘을 사용하고 싶으면 다음 URL로 이동하여 원하는 아이콘을 다운로드 하시면 됩니다. 

http://app-developer.tistory.com/29 (아이콘 다운로드 페이지)

파일 업로드 항목으로 이동하여 아래 + 추가 버튼을 눌러 up.png 파일을 넣어줍니다. 파일의 이름은 up.png으로 올려야합니다.

업로드까지 했으면 우측에 저장 버튼을 눌러 지금까지 작업했던 모든 항목들을 저장합니다.

이제 블로그로 이동하면 다음과 같이 버튼이 생성된 것을 확인할 수 있습니다.

＃만약 지금까지 쭉 작업을 따라했는데도 화면이 바뀌지 않았다면 페이지에 캐시를 삭제해주세요.

http://app-developer.tistory.com/17 (캐시 지우는 방법)