본문 바로가기

블로그팁/티스토리

티스토리 탑 맨위로 버튼 만들기 설치 달기

반응형

블로그를 구독하다 기억이 안나는 부분이 있거나 다른 카테고리 메뉴를 보고 싶을때 보통 마우스 휠을 이용해 위로 올라갑니다. 자바스크립트의 고수분들이라면 제이쿼리를 이용해 원하는대로 블로그나 홈페이지를 꾸밀수 있는데요. 자바스크립트에 능숙하지 못한 분들을 위한 포스팅이 되겠습니다. 

그런거 안달아도 된다~ 하시는 분들도 계실테지만 블로그를 구독하시는 분들이 조금이나마 편리하길 바라신다면 나쁘지 않겠죠! 그래서 오늘은 간단히 탑 버튼을 삽입하는 방법에 대해 알려드릴게요! 대단한건 아니지만 탑 버튼 이미지도 직접 만들었습니다.오른쪽 하단에 보이시죠?후후 뭔가 복잡해 보일수 있으나 정말 간단하니 천천히 따라하세요.. ( 코드를 넣거나 변경을하기전에는 항상 스킨을 저장해두세요! )



티스토리 탑 버튼 간단히 삽입 해보자.zip


1. 위에 파일을 받아주세요 파일 안에는 이미지파일과 삽입해야할 코드 그리고 설명이 들어있어요.. 일단 파일안에있는 이미지 파일을 티스토리에 업로드 해주세요. 업로드후 이미지 주소를 복사해 메모장에 적어 두세요.. 이미지 주소를 알아내는 방법은 업로드한 이미지파일에 오른쪽마우스 클릭하신후 링크주소 복사를 하시면됩니다.. ( 익스플러 사용자는 오른쪽 마우스 클릭후 속성누르셔서 주소 복사하세요 )


       <!-- 탑 버튼 시작 -->

      <div id="return_top">

                                         <a href="#top">&nbsp;</a>

</div>

       <!-- 탑 버튼 끝 -->

2. 관리자로 가셔서 html/css 편집 - Skin.html 항목에서 <body> 와 </body> 사이에 위의 코드를 넣어주세요.


/* return top link */

  #return_top a

  {

      position: absolute;

      position: fixed;

      right: 15px;

      bottom: 15px;

      width: 50px;

      height: 60px;

      display: block;

      background: url(이미지주소) no-repeat left top;

      z-index: 9888;

  }

3. 관리자 - html/css 편집 - style.css 항목 하단에 위의 코드를 넣어줍니다.. 단 ( ) 안에 아까 메모장에 적어두었던 이미지 주소를 꼭 삽입하셔야되요.. 두개의 코드를 각각 넣고 저장을 하면 오른쪽 하단에 탑 버튼이 생겨요. 참 간단하죠?

반응형