본문 바로가기

Tistory

티스토리 IS BASE 스킨 Top버튼 만들기




티스토리 IS BASE 스킨 Top버튼 만들기


티스토리 IS BASE 스킨 Top버튼 만들기


 

티스토리 IS BASE 스킨 Top버튼 만들기


제트센스에 있는 스크롤 Top 버튼을 사용하려 했으나 기술적인 문제가 많아 일단 보류하고 간단하게 만들 수 있는 Top 버튼을 만들어 보았습니다.

간단한 소스만 넣어주면 되는데 관리자페이지 → HTML/CSS편집 에서 skin.html <body> 와 </body> 사이에 아래 소스를 수정해 넣어주면 됩니다.


<a style="display:scroll;position:fixed;bottom:20px;right:30px;" href="#" title=Top>

bottom:20px;right:30px : 화면에 보이는 버튼 위치를 조절할 수 있습니다.


<img src="Top버튼 이미지 주소" alt="" onmouseover="this.src='Top 버튼 롤오버 이미지 주소'" onmouseout=" Top버튼 이미지 주소'" border="0"/></a>

src="Top버튼 이미지 주소" : 기본적으로 처음에 보이는 이미지주소를 넣어줍니다.


onmouseover="this.src='Top 버튼 롤오버 이미지 주소'" : 버튼 위에 마우스를 올렸을 때 바뀔 이미지주소를 넣어줍니다.


onmouseout=" Top버튼 이미지 주소'" : 버튼 위에 마우스를 올리고 나왔을 때 보일 이미지주소를 넣어줍니다. (기본적으로 처음에 보이는 이미지주소를 넣어주면 됩니다.)


롤오버를 사용하지 않으려면 alt="" onmouseover="this.src='Top 버튼 롤오버 이미지 주소'" onmouseout=" Top버튼 이미지 주소'"이 소스만 지워주면 됩니다.


스크롤 Top버튼 적용방법을 다시 배워서 Top버튼 만들기 2번째 포스트를 준비하겠습니다.

 

티스토리 IS BASE 스킨 Top버튼 만들기


[파일 다운로드]

scroll_top.txt