웹사이트나 블로그를 돌아다니다 보면 맨위로 버튼(탑 버튼)이 적용되어 있는 경우가 종종 있는데 글의 내용이 길어 스크롤바를 이용해 위아래로 옮겨 다니는 것 보다 맨위로 버튼을 이용해 이동하는 것이 상당히 편리 합니다. 이번 포스팅에서는 티스토리 블로그에 맨위로 버튼 설치 하는 방법에 대해 소개해 드리도록 하겠습니다.
참고로 맨위로 버튼 적용하는 다양한 방법이 있으나 맨위로 버튼 이미지와 간단한 태그로 적용하는 제일 간단한 방법을 소개해 드리도록 하겠습니다.
먼저 좌측의 이미지 처럼 맨위로 버튼으로 사용할 적당한 크기의 이미지를 구해 적당한 공간에 업로드 합니다. 티스토리 블로그의 경우는 스킨 파일에 업로드 하면 됩니다.
이미지 주소(이미지 업로드)는 티스토리 관리 - HTML/CSS 편집 - 파일 업로드 - 추가 버튼을 이용해 맨위로 버튼(탑버튼)으로 사용할 이미지를 업로드 한 후 해당 파일에 마우스 오른쪽 버튼을 눌러 링크주소를 복사한 후 해당 주소를 붙여넣기 하면 됩니다.
*맨위로(탑) 버튼 예제 소스
위의 맨위로 버튼 예제 소스는 제 블로그 우측 하단에 적용되어 있는 맨위로 버튼 소스 입니다.
오렌지색으로 표시된 부분의 bottom:5px 부분은 화면에서 어느정도 높이에 위치 하겠는가 이고 right:0px맨위로 버튼을 오른쪽에 붙여서(0px) 위치시켜 놓은 것 입니다. 사용자에 따라 적당한 값을 입력하여 사용하시면 됩니다. 이미지주소는 위에 티스토리 스킨에 업로드한 주소를 입력하시면 됩니다.
위의 작성한 소스를 티스토리 관리 - HTML/CSS 편집에서 skin.html 에서 <body>와 </body> 사이에 넣어 주시면 맨위로 버튼(탑버튼)이 적용 됩니다.이상, 티스토리 블로그에 맨위로 버튼 설치 하는 방법에 대한 간단한 소개 였습니다.
먼저 좌측의 이미지 처럼 맨위로 버튼으로 사용할 적당한 크기의 이미지를 구해 적당한 공간에 업로드 합니다. 티스토리 블로그의 경우는 스킨 파일에 업로드 하면 됩니다.
이미지 주소(이미지 업로드)는 티스토리 관리 - HTML/CSS 편집 - 파일 업로드 - 추가 버튼을 이용해 맨위로 버튼(탑버튼)으로 사용할 이미지를 업로드 한 후 해당 파일에 마우스 오른쪽 버튼을 눌러 링크주소를 복사한 후 해당 주소를 붙여넣기 하면 됩니다.
맨위로(탑) 버튼 예제 소스.txt*맨위로(탑) 버튼 예제 소스
| <body> . <!-- 맨위로 시작 --> <a style="display:scroll;position:fixed;bottom:5px;right:0px;" href="#" title= Top ><img src="이미지주소"/></a> <!-- 맨위로 끝. --> </body> |
위의 맨위로 버튼 예제 소스는 제 블로그 우측 하단에 적용되어 있는 맨위로 버튼 소스 입니다.
오렌지색으로 표시된 부분의 bottom:5px 부분은 화면에서 어느정도 높이에 위치 하겠는가 이고 right:0px맨위로 버튼을 오른쪽에 붙여서(0px) 위치시켜 놓은 것 입니다. 사용자에 따라 적당한 값을 입력하여 사용하시면 됩니다. 이미지주소는 위에 티스토리 스킨에 업로드한 주소를 입력하시면 됩니다.
위의 작성한 소스를 티스토리 관리 - HTML/CSS 편집에서 skin.html 에서 <body>와 </body> 사이에 넣어 주시면 맨위로 버튼(탑버튼)이 적용 됩니다.이상, 티스토리 블로그에 맨위로 버튼 설치 하는 방법에 대한 간단한 소개 였습니다.
반응형
'블로그팁 > TISTORY' 카테고리의 다른 글
| 블로그 꾸미기 / 티스토리 블로그에 실시간 방문자 위젯 설치하는 방법 (42) | 2012.07.05 |
|---|---|
| 네이버 모바일 애드포스트 티스토리 모바일 광고 지원 (25) | 2012.06.21 |
| 티스토리 블로그에 나눔고딕 폰트 적용 하는 방법 / 나눔고딕 폰트 다운로드 (14) | 2012.05.17 |
| 티스토리 블로그 하위 카테고리 펼치기 (20) | 2012.05.14 |
| 티스토리 블로그의 이미지 테두리 없애는 방법 (2) | 2012.05.13 |
댓글