상단으로 이동 버튼 만들기.

광고 차단 플러그인을 꺼 주시면 블로그 운영에 도움이 됩니다. ^^

마크쿼리4.0스킨을 어느정도 제 블로그에 맞게 수정하고보니 한가지 아쉬운 부분이 있어 추가를 해 보았습니다.

 

스크롤을 내렸을때 인터넷 브라우저 오른쪽 하단에 나오는 'TOP으로 이동'버튼이 없으니 조금 불편한감이 있어 추가 작업을 해 보았습니다.

 

제가 사용하는 '상단으로 이동'버튼의 소스는 'jquery'가 설치되어 있어야 합니다. jquery는 반응형 스킨이라면 기본적으로 설치되어있으니 그냥 사용하시면 됩니다.

 

상단으로 이동을 보여줄 아이콘을 먼저 다운로드 해 보겠습니다.

 

 

위 링크로 이동하셔서 사용할 아이콘을 다운로드 하세요.

 

위 링크로 이동하셔서 사용할 화살표 아이콘을 선택 하시면 위 화면이 나옵니다.

 

아이콘 사이즈가 32x32인지 확인하시고 'PNG'아이콘을 눌러 다운로드 합니다.

 

다운로드 창이 뜨면 '다른 이름으로 저장'을 선택 하셔서 'up.png'로 이름을 저장 하세요.

 

그리고 아래 첨부한 'scrolltopcontrol.js'파일을 다운로드해서 위에사 다운로드한 up.png파일과 같이 두세요.

 

 

이제 티스토리 관리 -> HTML/CSS 편집으로 가서 HTML에 코드를 입력해 보겠습니다.

 

먼저 '파일업로드'를 클릭해서 나오는 파일들 중에 아무거나 선택 하셔서 마우스 오른쪽 버튼을 클릭 '속성'을 선택 하세요.

 

속성을 선택하면 위 창이 열리는데 주소란에 ' http:~~~~images/까지 드래그 +복사를 해 주세요.

 

그리고 위에서 다운로드한 'scrolltopcontrol.js'파일을 마우스 우 클릭해서 '편집'을 선택 하세요.

그럼 위에서 열한번째줄에 "이미지절대경로/up.png"라는 항목이 있는데 '이미지 절대경로/'를 삭제하고 복사한 ' http:~~~~images/까지 넣어서 저장하시면 됩니다.

 

위 이미지처럼 경로 수정. 이렇게 절대경로 입력을 해야 화살표 이미지를 불러오더군요.

 

저장하셨으면 파일을 업로드 하시면 됩니다.

 

'scrolltopcontrol.js, up.png'파일을 올려주시면 됩니다.

 

이제 스킨 편집 ->HTML항목을 선택 하셔서 맨 하단으로 이동하세요.

 

맨 하단 '</body>위에 '<script src="./images/scrolltopcontrol.js"></script>'을 입력하고 저장해 주시면 됩니다.

 

블로그 화면에서 스크롤을 내려보면 우측 하단에 화살표 아이콘이 나오는것을 보실수 있습니다.

 

위에서 언급했듯이 이 소스를 사용하기위해서는 'jquery'가 설치되어 있어야 합니다. 사용하는 스킨이 반응형이라면 'jquery'가 설치되어 있을테니 그냥 적용하시면 되지만 일반형 스킨이라면 확인해 보셔야 합니다.

 

이 스크립트의 자세한 도움말, 사용법은 아래 링크에서 확인하시면 됩니다.

 

 

신고