'맨 위로가기 버튼' 태그의 글 목록

맨 위로가기 버튼

라온피아 2012. 7. 23. 14:45

2012. 7. 23. 14:45

블로그에 부드럽게 올라가는 Top(맨 위로가기) 버튼 추가하기

블로그에 위로가기 버튼 추가하겠다고 2시간 반 동안 시행착오를 거쳐서 마침내 완성 했습니다!! ㅎㅎ

필요한 준비물 부터~~

1. Top(맨 위로가기) 버튼 (아이콘): arrowtop.zip

2. 자바 스크립트 소스: scroll_top.js

3. 부드럽게 올라가는 Top 버튼 소스: 부드럽게 올라가는 Top 버튼 소스.txt

일단 위에있는 아이콘과 자바 스크립트 소스를 다운합니다.

스크롤링 속도를 조절하고 싶으시면 다운받은 자바 스크립트 소스를 메모장이나 notepad++로 연다음

'var speed = 5;'이부분에서 "5" 부분을 원하시는 숫자로 지정해주시면 됩니다.

(높으면 높을수록 스크롤링 속도가 빨라집니다..)

그 다음엔 티스토리 관리자 매뉴로 들어간 후 'HTML/CSS 편집' 카테고리로 들어갑니다.

'파일업로드'탭을 클릭하셔서 미리 다운받은 아이콘과 자바 스크립트 소스를 업로드합니다.

2개의 파일이 업로드 된것을 확인하신후 아래 사진과 같이 각 파일의 링크 주소를 따옵니다.

2개의 파일 주소를 알아내셨으면 'HTML/CSS'탭으로 이동합니다.

'부드럽게 올라가는 Top 버튼 소스'를 메모장이나 notepad++로 여신후

'자바 스크립트 링크 주소'와 '아이콘 링크 주소'를 본인 블로그에 맞게 수정합니다.

마지막으로, 'skin.html'에서 <head>과</head> 사이에

수정된 '부드럽게 올라가는 Top 버튼 소스'를 복사해서 붙여넣습니다.

예(Example)

추가된 소스를 저장하시면 아래와 같이 상하 오른쪽에 Top(맨 위로가기) 버튼 추가됩니다.

그냥 가시지 마시고 아래 손가락 버튼을 꾹!!! 눌러주시면 감사하겠습니다^^.

네이버 오픈캐스트 구독도 부탁드립니다~~

저작자표시 비영리 변경금지