Please Enable JavaScript!
Gon[ Enable JavaScript ]

[블로그] 티스토리 블로그에 위/아래 이동 버튼달기

블로그
반응형

티스토리 블로그에 위/아래 이동 버튼달기

 

환경 :  Internet Explorer 11

 

글이 길어서 스크롤이 생겼을 때 브라우저에 /아래로 이동이 가능한 버튼을 만들어 두면 편리 하겠죠. 제가 운영하고 있는 티스토리에 달아보도록 하겠습니다.

 

먼저 사용할 아이콘이 있어야 겠죠. 다음은 구한 아이콘을 사용하기 위해 블로그 서버로

올려야 겠죠. 관리자 페이지에서 HTML/CSS 편집으로 갑니다. 그리고 파일업로드 탭을 클릭해서 아이콘을 추가합니다.

 

l  사용한 아이콘 :      arrow.zip

 

 

[블로그] 티스토리 블로그에 위/아래 이동 버튼달기

 

올려진 파일의 URL 주소를 HTML 소스에 넣어야 하는데 모르겠다면 링크할 파일을 선택하고 단축메뉴 중 [바로 가기 복사] 를 클릭하시면 됩니다. 그럼 이미지 전제 주소가 클립보드에 저장 됩니다.

[블로그] 티스토리 블로그에 위/아래 이동 버튼달기

 

 

이제 소스를 추가해 보도록 하겠습니다. HTML/CSS 편집에 넣을 소스 입니다. CSS 에서 간단히 설명하자면 bottom 브라우저 아래에서의 거리 입니다. 버튼 이미지의 크기에

따라서 겹치지 않도록 bottom 에 있는 값을 조절해야 합니다. 그리고 right 는 브라우저 오른쪽에서의 거리 입니다. 이부분도 값을 넣어서 적당한 위치를 맞춰 보시기 바랍니다.

 

<!-- 위로가기 -->

<a style="display:scroll; position:fixed; bottom:70px; right:15px;" href="#top" title= 위로가기 >

<img src="./images/arrow_top.png" ></a>

<!-- //위로가기 -->

 

<!-- 아래로 가기 -->

<a style="display:scroll; position:fixed; bottom:5px; right:15px;" href="#footer" title= 아래로가기 >

<img src="./images/arrow_bottom.png" ></a>

<!-- //아래로 가기 -->

 

[블로그] 티스토리 블로그에 위/아래 이동 버튼달기

 

소스를 HTML/CSS skin.html 에디터에 넣고 적용합니다. 그리고 다시 화면으로 와서 보시면 오른쪽 아래 위/아래 아이콘이 위치해 있는 것을 볼수 있습니다.

[블로그] 티스토리 블로그에 위/아래 이동 버튼달기

 

 

반응형
Posted by 녹두장군1
,