[블로그] 티스토리 맨 위로, 맨 아래로 이동 화살표 버튼 만들기

티스토리 맨 위로, 맨 아래로 화살표 버튼 만드는 법을 알아보죠.

티스토리 블로그는 설치형 블로그여서 직접 블로그를 편집 할 수 있습니다.

그래서 맨 위로, 맨 아래로 버튼을 만들수가 있죠.

이제 본격적으로 알아보죠.

 

화살표 버튼이 없으신분들은 맨 아래에 있는 첨부파일에 있는 알집 파일을 다운 받으시던가

아이콘 파인더 ( http://www.iconfinder.com/ ) 에서 직접 Arrow 를 검색해서 찾아보세요.

 

그럼 이미지는 있다는 가정하에 글을 작성합니다.

 

블로그 맨 위로, 맨 아래로 버튼을 만드는 것에는 여러가지 방법이 있습니다.

저는 그중에서 href="#"  , href="#footer" 를 이용하는 방법을 사용할것입니다.

 

 

일단 , 이미지를 블로그에 등록 시켜야 합니다.

관리자 모드로 들어가신후 , HTML/CSS 편집으로 들어가시고

파일 업로드를 누르세요.

 

 

 

이제 

 

버튼을 누르신 다음 원하는 사진을 열어 파일을 업로드 시키세요.

 

 

 

여기서 자신이 업로드한 파일의 이름을 찾으세요.

( 저의 경우 images/Arrow-Up.png 와 images/Arrow_down.ico 겠죠 )

 

찾으셨으면 일단 맨 위로 가는 버튼부터 만들어 볼까요  ?

 

 

 

이렇게 속성을 클릭하신후 ~

 

 

 

이렇게 .png 부분 까지만 블록 처리해서

맨위로 가는 버튼의 Url을 복사합시다.

 

이제 다시 파일업로드 옆에 보이는 HTML/CSS 로 들어갑시다.

그런후 , skin.html 의 스크롤을 맨 밑으로 내린후 body 부분을 찾아봅시다

</body> 부분말하는 겁니다.

 

</body> 부분 위에 스크립트를 넣을겁니다. 

 

 

 

이렇게요 . 이 이미지대로 넣으면 안되고요 . ( 왜냐하면 주소가 다르기 때문이죠.)

 

<!-- 맨 위로 버튼 -->
 
<a style="display:scroll; position:fixed; bottom:300px; right:0px;" href="#" title="맨 위로">
<img src="아까 복사한 주소"></a>

 

<!-- 맨 위로 버튼 -->

 

네모칸 안에 있는 박스처럼 </body> 부분 위에 넣으시면 됩니다.

꼭 </body> 부분 위에 넣으셔야합니다 !

아까 복사한 주소 부분에는 아까 복사한 주소를 넣어주시면 됩니다.

 

그러면 제 블로그에 있는 맨위로 가는 버튼처럼 생긴게 하나 옆에 만들어집니다.

뭐 여기서 따로 설명 드릴게 있냐하면,

bottom: 부분은 일종의 아래에서 위로 향하는 y좌표고요. ( 진행방향 : 아래에서 위로 )

right: 는 오른쪽 부분에서 왼쪽으로 향하는 x 좌표입니다. ( 진행방향 : 오른쪽에서 아래로 )

그냥 영어 뜻대로 이해하시는게 더 편합니다.

 

title="" 은 마우스를 갖다댔을시 노란색 tip에 뜨는 글씨를 의미합니다.

href="" 는 연결되는 경로를 의미합니다. 여기서 # 으로 되어있는데

자신의주소/#

으로 연결되는 겁니다.

 

제 블로그의 경우

 

http://jogamja.tistory.com/#

 

이겠죠.

 

잡소리가 길었네요.

 

이제 맨 아래로 가는 버튼을 만들어 봅시다.

 

똑같아요 맨위로 가는 버튼이랑.

하지만 href="#" 부분이 href="footer" 로 바뀐거죠.

 

맨위로 가는 버튼 만드는 과정처럼

다시 맨아래로 가는 버튼 Url을 복사해옵시다.

 

이제 다시, skin.html 의 스크롤을 맨 밑으로 내려 </body> 위에 스크립트를 넣어줍시다.

 

<!-- 맨 아래로 버튼 -->

 

<a style="display:scroll; position:fixed; bottom:252px; right:0px;" href="#footer" title="맨 아래로">
<img src="아까 복사한 주소"></a>

 

<!-- 맨 아래로 버튼 -->

 

이 스크립에서

아까 복사한 주소 부분만 바꿔서 넣으시면 맨 아래로 가는 버튼 만들기도 완성! 입니다.

 

저장 버튼을 잘 눌러주셨으리라 믿습니다. HTML/CSS 편집을 하면서요 ㅎㅎ

안그러면 저장이 안되서 아무것도 안한거거든요 ;;

저장을 잘 했는지 모르니 다시 저장을 눌러주시는 센스 !

그리고 , 이글을 보면서 아셨을지도 모르겠지만

 

자신의주소/#   :  맨위로

자신의주소/#footer : 맨아래로

 

라는 사실을요.

 

당연히 티스토리에 해당이 되는거죠 !

이 긴 글 잘 읽어주셨네요 ...  버튼 만들기에 성공하시길 바랍니다.

 

 화살표 버튼.zip