닥치고 마케팅

[티스토리] 버튼 만들기 (HOME / TOP / BOTTOM 버튼) 본문

마케터의 일상/티스토리

[티스토리] 버튼 만들기 (HOME / TOP / BOTTOM 버튼)

닥치고마케팅 2020. 1. 24. 09:00


안녕하세요~

닥치고 마케팅입니다. :)


닥치고마케팅 블로그 우측에 노출되고 있는 3가지 버튼을 보셨나요?

버튼은 총 3가지 액션을 할 수 있도록 구성되어 있습니다.

  • HOME : 홈화면으로 이동하는 버튼
  • TOP : 페이지 최상단으로 이동하는 버튼
  • BOTTOM : 페이지 최하단으로 이동하는 버튼


스크롤 업/다운 편의성을 높여주는 이 버튼들을 설치하는 방법을 살펴보겠습니다..


티스토리 버튼 만들기 - HOME / TOP / BOTTOM

1. HTML 이미지 업로드

- [블로그 관리] > [스킨편집] > [html 편집] > [파일업로드] 메뉴로 이동합니다.

- 그리고, 하단에 [+추가] 버튼을 클릭해서 이미지를 업로드합니다.


2. 코드 삽입

- 각 코드별로 빨간색 음영이 들어간 부분을 기입한 다음

- 복사해서 <head>와 </head> 사이에 붙여넣어 주시면 됩니다.


(a) HOME 버튼 코드

<a href="본인블로그주소" id="gohome" style="display:scroll;position:fixed;bottom:205px;right:6.5px;z-index:99999999" title="블로그 대문으로"><img src="HOME이미지주소" width="60px" border="0"/></a> 


(b) TOP 버튼 코드

<script type="text/javascript">

$(function(){

  $("#gotop").hide();

  $(window).scroll(function(){

    if($(this).scrollTop() > 100){$("#gotop").fadeIn();}

    else{$("#gotop").fadeOut();}

  });

});

</script>

<a href="#" id="gotop" style="display:none;position:fixed;bottom:260px;right:6.5px;z-index:99999999" title="상단 이동"><img src="TOP버튼이미지주소" width="60px"  border="0"/></a>> 


(c) BOTTOM 버튼 코드 

<script type="text/javascript">

$(function(){

  $("#nowfooter").hide();

   $(window).scroll(function(){

var scrollBottom = $(document).height() - $(window).height() - $(window).scrollTop();

    if(scrollBottom > 100){$("#nowfooter").fadeIn();}

    else{$("#nowfooter").fadeOut();}

  });

});

</script>

<a href="#gofooter" id="nowfooter" style="display:none;position:fixed;bottom:150px;right:6.5px;z-index:99999999" title="아래 이동"><img src="BOTTOM버튼이미지주소" width="60px" border="0"/></a> 


- BOTTOM 버튼을 정상적으로 실행시키 위해서는 추가 코드가 필요합니다.

- 아래 코드를 복사해서 </body> 태그 바로 위해 붙여 넣어주세요. 

<div id='gofooter' />

어떠신가요 정말 간단하죠? 5분 안에 적용하실 수 있을 겁니다. 

이상으로 포스팅을 마치겠습니다.

긴 글 읽어주셔서 감사합니다. :D

저작자표시 비영리 동일조건

'마케터의 일상 > 티스토리' 카테고리의 다른 글

[티스토리] 구글 애드센스 광고 넣는 방법!(2) - 디스플레이 광고 설정  (17) 2020.03.09
[티스토리] 구글 애드센스 광고 넣는 방법!(1) - 자동광고 설정  (8) 2020.03.08
[티스토리] 구글 애드센스 승인받기. 하루만에 초고속으로!  (8) 2020.03.06
[티스토리] 애드센스 신청!!! 드디어 수익형블로그로...?  (18) 2020.03.03
[티스토리] 티스토리 기본 글꼴 바꾸는 방법  (3) 2020.02.21
'마케터의 일상/티스토리' Related Articles more
Comments