728x90
반응형
[티스토리 스킨 만들기] TOP, BOTTOM 버튼 만들기
만약 모바일 버전으로 이 게시글을 보고 계신다면 피씨 버전으로 보시면 좋습니다!
안녕하세요~ 최근에 티스토리 시작한 Zynar 입니다 :)
네이버 블로그 보다 훨씬 자유롭다는 게 티스토리의 장점이죠 다만 네이버에서의 검색 유입이 어렵다는 거..
여튼! 요즘 티스토리 스킨을 편집하면서 얻은? 코드들을 올리려고 합니다!
제 블로그를 보시면 알겠지만 화면 오른쪽에 위 화살표와 아래 화살표가 있습니다.
이걸 만드는 방법을 공유하고자 합니다.
TOP, BOTTOM 버튼 만들기
1. 이미지 준비
먼저 방향을 표시할 이미지를 준비해야겠죠?
무료 이미지 파일 사이트에서 다운받거나 포토샵으로 만들던지
아니면 간단하게 그림판으로 만들어도 됩니다.
또는
제 블로그에서 사용하는 이미지입니다.
다운로드하셔서 사용해도 괜찮아요~
2. 이미지 업로드
준비한 이미지를 각각 top, bottom 이름으로 설정하여 업로드합니다.
스킨 편집 -> HTML 편집 -> 파일 업로드
추가를 누르시고 업로드합니다.
3. 코드 입력
맨 위에서는 위로가는 버튼은 안보이게 만들고
맨 아래에서는 밑으로 가는 버튼을 안보이게 만들겁니다.
중앙에선 둘 다 보이게 만드는거죠!
<head> ~ </head> 사이에 아래 코드를 입력합니다.
<!--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:210px;right:20px;z-index:99999999" title="Top"><img src="./images/top.png" border="0"/></a>
<!--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:140px;right:20px;z-index:99999999" title="Bottom"><img src="./images/bottom.png" border="0"/></a>
<body> ~ </body> 안 제일 끝에 아래 코드를 입력합니다.
<!--Bottom-->
<div id='gofooter' />
마지막으로 적용하시면 됩니다~
728x90
반응형
'프로그래밍 > 티스토리' 카테고리의 다른 글
| [티스토리 스킨 만들기] 반응형 2 스킨 인피드 광고 5분만에 만들기 (0) | 2019.08.13 |
|---|---|
| [티스토리 스킨 만들기] 티스토리 sns 공유 버튼 만들기(텀블러, 네이버, 트위터, 페이스북) (0) | 2019.07.30 |
| 티스토리 네이버 검색 등록 반영 웹마스터도구 총정리 (1) | 2019.07.30 |
| [티스토리 스킨 만들기] 홈 버튼 블로그 대문으로 이동 만들기 (1) | 2019.07.29 |
| [티스토리 스킨 만들기] 사이드바 공유 버튼 만들기 (0) | 2019.07.29 |
