본문 바로가기
블로그팁

티스토리 블로그에 탑버튼 설치하는 방법

POSTED BY© 디에스이라이™ 2012. 12. 23.
  웹사이트의 글이나 블로그의 포스팅 하단에서 상단으로 바로 이동한 수 있는 맨위로 가기 버튼 즉, 탑(TOP) 버튼을 설치하면 편리하게 웹사이트의 카테고리나 블로그 상단 메뉴로 이동을 할 수 있습니다. 티스토리 블로그의 경우도 포스팅에 사진이나 이미지 등을 추가하게 되면 포스팅의 내용이 길어져 상단으로 이동하고자 하는 경우 탑버튼을 설치하면 불편하게 스크롤바를 이용하지 않아도 되는데, 이번 포스팅에서는 티스토리 블로그에 탑버튼 설치하는 방법에 대해 소개해 드리도록 하겠습니다.


 티스토리 블로그는 맨위로 가기 버튼, 즉 탑버튼을 설치하여 사용하는 블로그가 많은데, 탑버튼의 유형에 따라 간단한 HTML 소소코드를 이용하며 탑버튼을 설치하는 방법 부터 제이쿼리(JQuery)를 이용하는 방법까지 탑버튼을 설치하는 방법은 상당히 다양 합니다. 이번 포스팅에서 소개해 드리는 티스토리 블로그에 탑버튼 설치하는 방법은 웹 사이트나 구글블로그에 많이 사용하는 세로형 RETURN TOP 버튼으로
회색의 RETURN TOP 버튼에 마우스 커서를 가져다 대면 진한 회색으로 바뀌고 RETURN TOP 버튼을 클릭하면 맨위도 이동하게 됩니다.


* 티스토리 블로그에 탑버튼 설치하는 방법 skin.html 항목
   <!-- 탑버튼 시작 -->
   <div id="return_top">
             <a href="#top">&nbsp;</a>
   </div>
   <!-- 탑버튼 끝. -->
티스토리 블로그에 탑버튼 설치하는 방법 중 은 skin.html 항목은 티스토리 관리 - HTML/CSS 편집 - skin.html 항목에서 <body>와 </body> 사이에 위의 탑버튼 소소크드를 넣어 주면 됩니다.

* 티스토리 블로그에 탑버튼 설치하는 방법 style.css 항목
/* return top link */
  #return_top a
  {
      position: absolute;
      position: fixed;
      right: 15px;
      bottom: 15px;
      width: 18px;
      height: 99px;
      display: block;
      background: url(이미지주소) no-repeat left top;
      z-index: 9888;
  }
  #return_top a:hover
  {
      background: url(이미지주소) no-repeat right top;
      text-decoration: none;
  }

티스토리 블로그에 탑버튼 설치하는 방법 중 은 style.css 항목은 티스토리 관리 - HTML/CSS 편집 - style.css 항목에서 위의  /* return top link */ ~ 이하 내용을 style.css 하단에 넣어 주면 됩니다. 참고로 RETURN TOP 버튼 위치는 우측 하단으로 위를 변경하고자 하는 경우는 position의 숫자 값을 수정해 주면 됩니다.


 티스토리 블로그에 탑버튼 설치하는 방법은 위의
티스토리 블로그 탑버튼 설치하는 방법 첨부파일에 RETURN TOP 버튼 PNG 이미지 파일과 skin.htmlstyle.css에 입력할 소스코드와 설치 방법이 텍스트 문서에 저장이 되어 있습니다. 첨부 파일을 다운받아 압축을 푼 후 return_top.png 파일을 티스토리 관리 - HTML/CSS 편집 - 파일업로드에 올린 후 이미지주소를 복사하여, /* return top link */ 코드 하단의 이미지 주소 두곳에 입력한 후 style.css 항목에 저장하면 됩니다. 탑버튼 이미지 파일 업로드 및 이미지 주소 복사 방법은 관련 포스팅 티스토리 블로그에 맨위로 버튼 설치 참조하면 됩니다. 이상, 티스토리 블로그에 탑버튼 설치하는 방법에 대한 간단한 소개 였습니다.
반응형

댓글