티스토리에서 맨 위로 가기 TOP 버튼 만들기

 

 

티스토리에서 맨 위로 가기 TOP 버튼 만들기

 

 

며칠 전에 맨 위로 가기 버튼 만들기에 대해 배웠는데,

 

[html/css] 맨 위로 가기 버튼 만들기

 

 

오늘은 티스토리에서 위로 가기 버튼 깔끔하게 만드는 법입니다.

 

이 방법을 적용해 보니, 지난번보다 훨씬 깔끔하게 버튼이 생기더라고요.

 

 

티스토리에서 위로 가기 버튼 만들기

 

 

STEP 1. TOP 버튼을 클릭했을 때 올라갈 곳 지정

 

티스토리 화면 구성은 보통 이런 형태이죠

 

메뉴바(예: #header)

본문(예:#contents) 사이드바(예:#sidebar)

하단(예: #footer)

 

그래서 보통 맨 위로 올라갈 곳은 #header라는 이름으로 지정하면 되는데요

 

티스토리 스킨마다 이름이 다를 수 있습니다.

 

이름을 모른다면 #이라고만 입력해도 맨 위로 올라간다고 하네요

 

 

STEP 2. TOP 버튼 만들기(텍스트 링크)

 

<a href="#header">TOP</a>

또는 <a href="#">TOP</a>

 

TOP 대신에 '맨 위로 가기' 라든지 원하는 내용 입력하시면 됩니다.

 

 

글자 색상이나 링크 색상 바꾸는 방법은 아래를 참조해주세요

 

[html/css]문서를 연결하는 a 태그 (href, title, target 속성)

 

a: link, a: visited, a: active, a: hover 사용법 자세히 알기

 

 

텍스트 링크로 하실 분은 바로 STEP3으로 넘어가시면 됨

 

 

STEP 2. TOP 버튼 만들기(이미지를 가진 링크)

 

(1) top 버튼 이미지 구하기

     

직접 그리는 방법도 있고, 무료로 다운 받아 사용하시는 것도 좋고요

 

(2) 이미지를 티스토리 스킨에 업로드하기

 

관리자 화면->스킨->[파일 업로드] 선택합니다.

 

 

 

 

 

 

(3) [추가]버튼을 클릭해 이미지를 업로드 합니다.

    

  그리고, 파일에 대고 마우스 오른쪽 클릭해서 [등록 정보]확인해 주세요

 

 

(4) 링크 만들기

 

등록정보에 나온 이미지의 주소를 그대로 적어주시면 되는데요 png이후는 적지 않습니다.

 

<a href="#header"><img src="http://cfs.tistory.com/custom/blog/163/1632216/skin/images/top.PNG " title="위로 가기"></a>

 

이미지를 넣는 img 태그(css로 이미지 중앙 정렬 방법)

 

 

STEP 3. TOP 버튼이 위치할 곳 정하기

 

 

오른쪽 하단에 고정하려면;

 

<div style="position: fixed; bottom: 5px; right: 5px;">
<a href="#header"><img src="top.png" title="위로 가기"></a>

</div>

 

 

왼쪽 하단에 고정하려면;

 

<div style="position: fixed; bottom: 5px; left: 5px;">
<a href="#header"><img src="top.png" title="위로 가기"></a>

</div>

 

*픽셀값은 조정 가능합니다

*width으로  div 너비 조정

*height으로 div 너비 조정

*border로div 선두께, 선모양, 선색 조정

 

position 속성으로 정렬하기 (static, relative, absolute, fixed 차이)

 

text-align 속성으로 정렬하기 (left, right, center, justify)

 

border 속성 자세히 알아 보기(border-width, border-style, border-color 사용법)

 

div 1개 정렬하기(왼쪽, 오른쪽, 가운데 정렬)

 

 

STEP 4. TOP 버튼을 html 안에 삽입하기

 

티스토리 화면에서 TOP 버튼을 HTML안에 삽입하는 방법은 두 가지 입니다.

 

지난 시간에는 방법 하나만 알아보았고요.  두번째 방법을 해 보니 훨씬 수월한 것 같네요

    

 

방법 하나: 관리지 화면->HTML/CSS-> skin.html 에서 ctrl+f 로 </body>를 찾아 바로 위에 코드 입력 

 

 

방법 둘: 관리자 화면->사이드바->[기본 모듈]에서 [HTML]배너출력 + 클릭->

 

 

 

그럼 오른쪽에 [HTML 배너출력] 버튼이 생기는데요 [편집]을 클릭하면 팝업창이 뜹니다.

 

여기에서 HTML소스란에 위에서 만든 코드를 넣어주면 됩니다.

 

<div style="position: fixed; bottom: 5px; right: 5px;">
<a href="#header"><img src="top.png" title="위로 가기"></a>

</div>

 

이름 란에는 원하는 이름을 쓰신 후 [확인]버튼을 눌러주세요

 

마지막으로 오른쪽 상단에 있는 [저장] 버튼을 클릭하면 완료.

 

 

 

저장후 실행한 화면인데요, 저는 텍스트로 위로 가기 버튼을 만들어 보았습니다. 

 

 

 

제가 사용한 코드는 다음과 같습니다

 

top.txt

 

<div style="position: fixed; bottom: 10px; right: 10px; width:50px; height:20px; border: 1px solid grey; text-align:center;">
<a href="#header" style="text-decoration:none; font-color: grey;">TOP</a>