티스토리-글 상단으로 가는 아이콘 (탑버튼) 적용방법

티스토리의 글을 읽다가 상단으로 올려야 할 경우 마우스 휠을 사용하기보다 상단 아이콘으로 한 번에 올리는 탑버튼 만드는 방법에 대해서 알아보겠습니다. 제 블로그 오른쪽 아래를 보시면 작은 화살표가 적용된 상태입니다. 아래 순서대로만 하시면 예시 이미지 없이도 충분히 따라오실 수 있습니다.

 

 

이미지 만들기

• "직접 제작한 파일" 또는 "웹 써칭"으로 화살표 모양의 이미지 파일(png, jpg)을 다운로드합니다. 웹 서칭을 통한 파일은 다양하지만 라이선스가 걸려있는 경우도 있으니 무료 이미지 사이트를 통해 마음에 드는 이미지를 다운로드합니다.
• 다운로드한 파일의 파일명을 원하시는 파일명으로 바꿔줍니다. 예) up_arrow.png
• 아이콘 전용 파일이 아니라면 이미지가 매우 큽니다. 아이콘 모양답게 알씨나 포토샵 등으로 적절한 사이즈로 줄여 줍니다. 예) 30px X 30px

 

이미지 파일 업로드

• 만들어진 이미지를 티스토리 블로그 관리에서 [스킨편집] → [html편집] → [파일업로드] → [+추가] → [up_arrow.png 파일 선택] → [적용] 순서대로 합니다.
• 티스토리 [스킨편집] → [html편집] → [HTML]에서 아래의 코드를 </body> 바로 위에 넣은 후 [적용] 시켜주면 마무리가 됩니다.

<!-- 맨 위로가기(Top) -->
<a style ="display:scroll;position:fixed;bottom:15px;right:15px;" href="#" title=Top>
<img src=./images/up_arrow.png border="0"/></a>
<!-- 맨 위로가기(Top) 코드 끝-->

상단으로 가는 아이콘 적용 코드.txt

0.00MB

 

 

▶ html 코드 입력 시 아이콘 파일명에 적힌 그대로 적어 넣습니다. 혹시라도 대소문자가 구분되어 있다면 그대로 입력해 주어야 합니다. 예) 파일명 : UP-button.png → <img src=./images/ UP-button.png border="0"/></a>

 

Tip. 아이콘 상단으로 더 올리는 방법

만일 블로그 하단에 앵커 광고가 적용되어 있다면 아이콘이 가려져서 안보입니다. 그럴 땐 html 코드 입력 시 bottom:15px → 이 부분의 수치를 올려주면서 원하는 위치에 오도록 조정해 주시면 됩니다. 앵커 광고가 없다면 10px이나 15px이면 적당합니다.

 

---

 

 

티스토리 - 본문 상단 광고 2개 배열 방법

 

 

티스토리-사이드바 AdSense 광고 적용 방법

 

 

티스토리-Bing Webmaster Tool “2개 이상의 h1 태그” 오류 해결방법