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

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

 

환경 :  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 에디터에 넣고 적용합니다. 그리고 다시 화면으로 와서 보시면 오른쪽 아래 위/아래 아이콘이 위치해 있는 것을 볼수 있습니다.