맨 위로 가기 버튼
블로그 뿐 아니라, 여러 사이트를 사용하다보면 자주 눈에 띄는 '맨 위로 가기' 버튼이 보이실겁니다. 포스팅의 내용이 길어지거나 이미지가 많을 경우 유용하게 사용되는 기능인데, 티스토리 블로그는 이러한 부분을 설정할 수가 있습니다.
가장 먼저 필요한 것은 '맨 위로 가기' 버튼으로 사용하고자 하는 이미지가 필요합니다. 아래 사이트를 통해서 이미지를 다운 받으실 수가 있는데, 다양한 이미지를 제공하고 있으니 도움이 되시리라 봅니다.
사이트에 접속하시면 바로 보이시는 아이콘이 '개인의 생각' 블로그에 적용되어 있는 아이콘입니다. 이리저리 찾다가 제일 깔끔한 것 같아서 사용을 하고 있습니다. 아이콘 다운로드 방법은 해당 아이콘을 클릭하시면, ICO 파일형식과 PNG 파일 형식이 나옵니다. PNG 파일 형식를 클릭하셔서 다운 받으시면 됩니다.
아이콘 업로드 및 주소 알기
아이콘을 다운 받으셨다면, 해당 아이콘을 블로그에 업로드 하여, 관련된 아이콘의 주소를 얻어야 합니다. 티스토리 관리자 모드에 진입하신 후 다음과 같이 파일 업로드 - 추가 를 선택하여 줍니다.
다운 받은 경로를 확인 하신 뒤, 해당 아이콘을 선택하여 업로드 하여 줍니다.
업로드 된 파일을 확인하셔서 마우스 우클릭 / 속성 항목을 선택하여 줍니다.
여기서 사용할 주소는 http ~ png 부분 까지입니다. 아래 이미지와 같이 파란색으로 드래그 된 부분 까지 선택하신 후 복사하여 줍니다.
블로그에 적용하기
해당 아이콘의 주소를 복사하여 메모장 등에 붙여넣어 줍니다.
이번에는 HTML/CSS 편집 항목에서 skin.html 항목을 선택하셔서 <body> ~ </body> 사이에 아래 소스를 수정하여 입력합니다.
수정하실때에는 이미지 주소 라고 되어 있는 부분에 앞서 복사한 아이콘의 주소를 입력하여 주시면 됩니다.
<a style="display:scroll; position:fixed; bottom:5px; right:0px;" href="#" title="top">
<img src="이미지 주소"></a>
드래그가 안되시면 아래 파일을 다운 받으시면 됩니다.
맨위로 소스.txt
편의상 </body> 바로 위에 소스를 추가하여 주었습니다. 이미지 주소 라고 되어 있는 부분을 변경하여 주시면 됩니다.
해당 아이콘의 주소로 변경하였습니다. 빨간 네모박스 부분과 같은 형태로 되었다면, 끝입니다. 미리보기를 통해 아이콘이 적용되었는지를 확인 하시면 됩니다.
우측 하단에 앞서 업로드 한 아이콘이 적용되었습니다. 깔끔하니 좋네요. ㅎㅎ 저만 그럴수도;;;ㅋ
'블로그 관련' 카테고리의 다른 글
| 티스토리 블로그 유튜브 동영상 간단히 넣기 (5) | 2013.08.24 |
|---|---|
| 티스토리 트랙백 삭제하는 방법 (10) | 2013.08.18 |
| 티스토리 꾸미기 html 배너출력 사용하기 (6) | 2013.08.12 |
| 1회차 - 티스토리 초대장 배포합니다. (완료) (8) | 2013.07.10 |
| 다음 '많이 본 글' 내 글도 베스트가 될 수 있다. (0) | 2013.07.07 |
| 요즘 대세 SNS 티스토리 블로그에 트위터 버튼을 달아봅니다. (3) | 2013.05.21 |
| 블로그에 다음뷰 구독 위젯을 설치하여 블로그를 꾸며 보자. (7) | 2013.05.16 |
| 구글 크롬 요소검사 기능을 활용하여 블로그와 친해지기 (0) | 2013.05.12 |
| 네이버에 블로그 사이트 등록 신청을 해보자. (4) | 2013.05.11 |
| 블로그 지수 올리려면 블로그 지수를 확인하라. (4) | 2013.05.10 |
