티스토리 꾸미기 | 프로그레스바 탑(TOP) 버튼 만들기

프로그레스바 탑(TOP) 버튼의 장단점.

장점:

가시성 향상: 사용자가 페이지를 스크롤할 때에도 좌측에 있는 '프로그레스바 탑 버튼'은 항상 보입니다. 이를 통해 사용자에게 현재 작업의 진행 상황을 지속적으로 알릴 수 있습니다.
사용자 집중 유도: 죄측에 위치한 '프로그레스바 탑 버튼'은 눈에 잘 띄어 사용자가 작업을 완료하는 데 집중할 수 있도록 도와줍니다.

단점:

공간 제약: '프로그레스바 탑 버튼'을 배치하면 다른 중요한 UI 요소를 위한 공간이 줄어들 수 있습니다. 특히 모바일 환경에서는 공간이 제한적이므로 주의가 필요합니다.
시각적 방해: 모든 사용자가 좌측에 위치한 '프로그레스바 탑 버튼'을 긍정적으로 받아들이는 것은 아닙니다. 일부 사용자는 이를 방해 요소로 인식할 수 있습니다.

프로젝트의 목적과 사용자 경험을 고려하여 '프로그레스바 탑 버튼'의 위치를 결정하는 것이 중요합니다

[📌 코드 수정 시 주의사항은 아래 '더 보기'를 참고하세요.]

1. 스킨 저장.

스킨을 변경하기 전에 가장 먼저 해야 할 일은 현재 사용 중인 스킨을 백업하는 것입니다. 스킨 변경 후 문제가 발생하면 변경 전 스킨으로 돌아가야 하기 때문에 백업이 필요합니다.

스킨을 백업하려면, 블로그 관리자 > 꾸미기 > 스킨 변경을 클릭합니다. 상단에 사용 중인 스킨을 확인할 수 있으며, [보관]을 클릭하면 됩니다.

2. [Ctrl] + [F]를 사용할 때.

먼저 코드 탭의 빈 곳을 클릭한 후 [Ctrl] + [F]를 사용하여 검색할 코드를 입력해야 합니다.

프로그레스바 TOP 버튼 만들기 #1

오늘은 '프로그레스바 탑 버튼' 꾸미기에 대해 이야기해보려고 합니다.

최근 웹 서핑 중, 탑 버튼에 프로그레스바를 접목시켜 사용하는 웹사이트를 보았는데, 헤더 부분에 적용하는 방식보다 훨씬 멋지고 독특해 보여 이를 따라 해 보도록 하겠습니다.

프로그레스바 탑 버튼 #1 미리 보기

프로그레스바 탑 버튼 #1 HTML 편집

아래 코드를 복사 후 </body> 위에 넣어주면 됩니다.

1) '관리자 홈'에서 [꾸미기] > [스킨 편집] > [html 편집] > [HTML] 탭으로 이동합니다.

2) 아래 코드를 복사해서 </body> 위에 넣어줍니다.

<!--위로버튼&프로그레스바 HTML-->
<div class="progress-circle">
    <div class="gotop">
        <span class="dial"></span>
        <a class="top-btn">top</a>
    </div>
</div>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/72900/jquery.knob.min.js"></script>
<script>
    $(document).ready(function() {
    	var offset = 100,
    		scroll_top_duration = 700,
    		$go_top = $('.gotop'),
    		$thedial = $('.dial'),
    		$progress_circle = $('.progress-circle');
    	$thedial.knob( {
    		'min' : 0,
    		'max' : 100,
    		'width' : 70, <!-- 프로그레스바 크기 -->
    		'height' : 70, <!-- 프로그레스바 크기 -->
    		'bottom' : 300,
    		'fgColor' : '#d31919', <!-- 프로그레스바 색상 -->
    		'skin' : 'tron',
    		'thickness' : .08, <!-- 프로그레스바 굵기 -->
    		'displayInput' : false,
    		'displayPreview' : false,
    		'readOnly' : true
    	});
    	$(window).scroll(function() {
    		($(this).scrollTop() > offset) ? $progress_circle.addClass('is-visible') : $progress_circle.removeClass('is-visible');
               var s = $(window).scrollTop(),
                   d = $(document).height(),
                   c = $(window).height();
    		scrollPercent = (s / (d-c)) * 100;

    		$('.dial').val(scrollPercent).change();
    	});
    	//위로 가기
    	$go_top.on('click', function(e) {
    		e.preventDefault();
    		$('body,html').animate( {
    			scrollTop: 0 ,
    		}, scroll_top_duration);
    	});
    });
</script>
<!--위로버튼&프로그레스바 HTML END-->

3) [적용]을 눌러 '저장'합니다.

프로그레스바 탑 버튼 #1 CSS 추가

1) [HTML] 옆 [CSS] 탭으로 이동합니다.

2) 아래 코드를 복사해서 [CSS] 탭의 하단에 넣어줍니다.

/* 위로 버튼&프로그레스 바 CSS*/
.gotop {
    width: 70px; /* 탑 버튼 크기 */
    height: 70px; /* 탑 버튼 크기 */
    font-weight: bold; /* 폰트 굵기 */
    color: #f3c4d9;
    border-radius: 50%;
    background: #ffffff80 !important; /* 탑 버튼 배경색 */
    box-shadow: 0 0 15px #4f839750; /* 탑 버튼 그림자 */
    text-align: center;
    line-height: 60px !important;
    font: normal 16px "InkLipquid"; /* 폰트 크기 "폰트 종류" */
    transition: all .8s;
    cursor: pointer;
    -webkit-transition: .8s;
    -moz-transition: .8s;
    -o-transition: .8s;
}
.gotop:hover{
    animation: btn-top 3s infinite;
    color: #fff;
    font-weight: bold;
    background: #f3c4d9 !important; /* 마우스 오버 배경색 */
}
@keyframes btn-top {
    0%, 100% {transform: scale(1);}
    25%, 75% {transform: scale(.8);}
    50% {transform: scale(1.1);}
}
.progress-circle {
    width: 70px !important;
    height: 70px !important;
    position: fixed;
    right: 40px; /* 버튼 가로 위치 */
    bottom: 40px; /* 버튼 세로 위치 */
    display: flex;
    text-align: center;
    transform: scale(0);
    transition: .5s;
    -webkit-transition: .5s;
    -moz-transition: .5s
}
.is-visible {
    opacity: 1;
    transform: scale(1)
}
.top-btn {
    position: absolute;
    width: 50px;
    height: 50px;
    font-size: 20px; /* 폰트 크기 */
    line-height: 50px;
    color: #f3c4d9 !important; /* 폰트 색상 */
    right: 10px; /* 폰트 가로 위치 */
    top: 8px; /* 폰트 세로 위치 */
}
.top-btn:hover{
    text-decoration: none !important;
    color: #fff !important; /* 마우스 오버 폰트 색상 */
    font-weight: bold;
}
/* 위로 버튼&프로그레스 바 CSS END*/

3) 미리보기로 확인 후 [적용]을 눌러 '저장'합니다.

위 코드를 복사하여 사용하면 알 수 없는 이유로 버튼이 우측 하단에 생기는 등의 오류가 발생할 수 있습니다. 오류가 발생하는 분들은 아래 메모장을 다운로드한 후 코드를 복사하여 사용하시기 바랍니다.

위로 버튼&프로그레스 바 #1.txt

0.00MB

프로그레스바 TOP 버튼 만들기 #2

위의 '프로그레스바 탑 버튼'이 커서 부담스러운 분들을 위해 조금 작은 스타일의 버튼을 만들어 봤습니다.

프로그레스바 탑 버튼 #2 미리 보기

프로그레스바 탑 버튼 #2 HTML 편집

아래 코드를 복사 후 </body> 위에 넣어주면 됩니다.

1) '관리자 홈'에서 [꾸미기] > [스킨 편집] > [html 편집] > [HTML] 탭으로 이동합니다.

2) 아래 코드를 복사해서 </body> 위에 넣어줍니다.

3) [적용]을 눌러 '저장'합니다.

<!--위로버튼&프로그레스바 HTML-->
<div class="progress-circle">
    <div class="gotop">
        <span class="dial"></span>
        <a class="top-btn">top</a>
    </div>
</div>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/72900/jquery.knob.min.js"></script>
<script>
    $(document).ready(function() {
    	var offset = 100,
    		scroll_top_duration = 700,
    		$go_top = $('.gotop'),
    		$thedial = $('.dial'),
    		$progress_circle = $('.progress-circle');
    	$thedial.knob( {
    		'min' : 0,
    		'max' : 100,
    		'width' : 50, <!-- 프로그레스바 크기 -->
    		'height' : 50, <!-- 프로그레스바 크기 -->
    		'bottom' : 300,
    		'fgColor' : '#d31919', <!-- 프로그레스바 색상 -->
    		'skin' : 'tron',
    		'thickness' : .08, <!-- 프로그레스바 굵기 -->
    		'displayInput' : false,
    		'displayPreview' : false,
    		'readOnly' : true
    	});
    	$(window).scroll(function() {
    		($(this).scrollTop() > offset) ? $progress_circle.addClass('is-visible') : $progress_circle.removeClass('is-visible');
               var s = $(window).scrollTop(),
                   d = $(document).height(),
                   c = $(window).height();
    		scrollPercent = (s / (d-c)) * 100;

    		$('.dial').val(scrollPercent).change();
    	});
    	//위로 가기
    	$go_top.on('click', function(e) {
    		e.preventDefault();
    		$('body,html').animate( {
    			scrollTop: 0 ,
    		}, scroll_top_duration);
    	});
    });
</script>
<!--위로버튼&프로그레스바 HTML END-->

프로그레스바 탑 버튼 #2 CSS 추가

1) [HTML] 옆 [CSS] 탭으로 이동합니다.

2) 아래 코드를 복사해서 [CSS] 탭의 하단에 넣어줍니다.

3) 미리보기로 확인 후 [적용]을 눌러 '저장'합니다.

/* 위로 버튼&프로그레스 바 CSS*/
.gotop {
    width: 50px; /* 탑 버튼 크기 */
    height: 50px; /* 탑 버튼 크기 */
    font-weight: bold; /* 폰트 굵기 */
    color: #f3c4d9; /* 폰트 색상 */
    border-radius: 50%;
    background: #ffffff80 !important; /* 탑 버튼 배경색 */
    box-shadow: 0 0 15px #4f839750; /* 탑 버튼 그림자 */
    text-align: center;
    line-height: 60px !important;
    font: normal 16px "InkLipquid"; /* 폰트 크기 "폰트 종류" */
    transition: all .8s;
    cursor: pointer;
    -webkit-transition: .8s;
    -moz-transition: .8s;
    -o-transition: .8s;
}
.gotop:hover{
    animation: btn-top 3s infinite;
    color: #fff; /* 마우스 오버 폰트 색상 */
    font-weight: bold; /* 마우스 오버 폰트 굵기 */
    background: #f3c4d9 !important; /* 마우스 오버 배경색 */
}
@keyframes btn-top {
    0%, 50%, 100% {transform: scale(1);}
    25%, 75% {transform: scale(1.2);}
}
.progress-circle {
    width: 50px !important;
    height: 50px !important;
    position: fixed;
    right: 40px; /* 버튼 좌측 위치 */
    bottom: 140px; /* 버튼 하단 위치 */
    display: flex;
    text-align: center;
    transform: scale(0);
    transition: .5s;
    -webkit-transition: .5s;
    -moz-transition: .5s
}
.is-visible {
    opacity: 1;
    transform: scale(1)
}
.top-btn {
    position: absolute;
    width: 50px;
    height: 50px;
    font-size: 16px;
    line-height: 50px;
    color: #f3c4d9 !important;
    right: 0px;
    top: -3px;
}
.top-btn:hover{
    text-decoration: none !important;
    color: #fff !important;
    font-weight: bold;
}
/* 위로 버튼&프로그레스 바 CSS END*/

위 코드를 복사하여 사용하면 알 수 없는 이유로 버튼이 우측 하단에 생기는 등의 오류가 발생할 수 있습니다. 오류가 발생하는 분들은 아래 메모장을 다운로드한 후 메모장의 코드를 복사하여 사용하시기 바랍니다.

위로 버튼&프로그레스 바 #2.txt

0.00MB

728x90

푸터의 기본 탑(TOP) 버튼 숨기기

반응형 TOP 버튼을 추가하면 티스토리 포스팅 하단 푸터에 위치한 기본 TOP 버튼과 새로 넣은 TOP 버튼이 모두 출력되어 TOP 버튼이 두 개로 보입니다.

이때는 CSS 코드 추가로 간단하게 기본 TOP 버튼을 숨겨줄 수 있습니다.

아래 CSS 코드를 적용한 후 미리보기로 확인하면 하단의 기본 TOP 버튼이 사라진 것을 확인할 수 있습니다.

/* 기본 탑 버튼 숨기기 */
#footer .page-top {display: none;}
/* 기본 탑 버튼 숨기기 */

top 글꼴 바꾸기

제 TOP 버튼에 사용된 폰트는 TT투게더체이며, 해당 폰트는 눈누 웹폰트 사이트에서 확인할 수 있습니다.

눈누

TT투게더 - 투게더그룹

noonnu.cc

'눈누 사이트'에서 확인하기 번거로우신 분들은 아래 코드를 복사하여 CSS 탭에 붙여넣은 후 CSS 코드를 수정하면 됩니다.

@font-face { font-family: 'TTTogether'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/TTTogetherA.woff') format('woff'); font-weight: normal; font-style: normal; }

1. CSS 탭에 'TTTogether' 웹폰트 코드를 삽입합니다.

2. CSS코드를 수정합니다.

/* 위로 버튼&프로그레스 바 CSS*/

.gotop {

width: 50px; /* 탑 버튼 크기 */

height: 50px; /* 탑 버튼 크기 */

font-weight: bold; /* 폰트 굵기 */

color: #f3c4d9; /* 폰트 색상 */

border-radius: 50%;

background: #ffffff80 !important; /* 탑 버튼 배경색 */

box-shadow: 0 0 15px #4f839750; /* 탑 버튼 그림자 */

text-align: center; line-height: 60px !important;

font: normal 16px "TTTogether"; ← 폰트변경 /* 폰트 크기 "폰트 종류" */

transition: all .8s;

마무리

이렇게 '프로그레스바 탑 버튼'을 만들었습니다. 색상 변경이 필요한 경우, 주석을 참고하여 수정하시면 됩니다.

그리고 top 글씨가 사용하는 폰트에 따라 위치가 달라질 수 있으니 이때는 .top-btn {.top-btn {의 right: 10px; /* 폰트 가로 위치 */와 top: -3px; /* 폰트 세로 위치 */를 적절히 조정하여 수정하시면 됩니다.

마지막으로, '프로그레스바 탑 버튼'은 모바일에서 버튼 클릭 시 버튼이 커졌다가 작아지는 애니메이션이 화면을 한 번 클릭해 주기 전까지 멈추지 않는 단점이 있습니다. 이 점 참고하여 설치하시기 바랍니다.

참고한 블로그 : [티스토리] 위로 가기 버튼& 프로그레스 바 함께 구현하기

[티스토리] 위로 가기 버튼& 프로그레스 바 함께 구현하기

안녕하세요! 토미타미입니다. 오늘은 티스토리 블로그 꾸미기 관련해서 위로 가기 버튼과 진행 바 (progress bar)를 구현해보려고 합니다. 위로 가기 버튼은 예전부터 사용하고 있던 게 있어서 버튼

tommjang.tistory.com

티스토리 꾸미기 | 프로그레스바 탑(TOP) 버튼 만들기

프로그레스바 TOP 버튼 만들기 #1

프로그레스바 탑 버튼 #1 미리 보기

프로그레스바 탑 버튼 #1 HTML 편집

프로그레스바 탑 버튼 #1 CSS 추가

프로그레스바 TOP 버튼 만들기 #2

프로그레스바 탑 버튼 #2 미리 보기

프로그레스바 탑 버튼 #2 HTML 편집

프로그레스바 탑 버튼 #2 CSS 추가

푸터의 기본 탑(TOP) 버튼 숨기기

top 글꼴 바꾸기

마무리

관련글 바로가기

티스토리툴바

티스토리 꾸미기 | 프로그레스바 탑(TOP) 버튼 만들기

프로그레스바 TOP 버튼 만들기 #1

프로그레스바 탑 버튼 #1 미리 보기

프로그레스바 탑 버튼 #1 HTML 편집

프로그레스바 탑 버튼 #1 CSS 추가

프로그레스바 TOP 버튼 만들기 #2

프로그레스바 탑 버튼 #2 미리 보기

프로그레스바 탑 버튼 #2 HTML 편집

프로그레스바 탑 버튼 #2 CSS 추가

푸터의 기본 탑(TOP) 버튼 숨기기

top 글꼴 바꾸기

마무리

관련글 바로가기

• 관련글 바로가기

티스토리툴바