반응형
최근 블로그 스킨을 변경하면서 블로그에 접속할 때 로딩시간이 다소 길어진 것이 느껴진다.
수익성 블로그도 아니기 때문에 최적화를 하게될지는 잘 모르겠지만 블로그에 로딩게이지가 있으면 좀 더 편할 것 같아 로딩바를 설치해 보았다.
설치하는 방법은 간단하다. 우선 아래의 파일을 다운 받는다.
pace.min.js
다운받은 파일을 꾸미기->스킨 편집->html 편집->파일 업로드를 눌러 이 파일을 업로드 시킨다.
다음으로 아래의 코드를 html 편집기의 <head>와 <head/> 사이에 삽입한다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24 |
<script type="text/javascript" src="./images/pace.min.js"></script>
<style>
.pace {
-webkit-pointer-events: none;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.pace-inactive {
display: none;
}
.pace .pace-progress {
background: #ac0ff0;
position: fixed;
z-index: 2000;
top: 0;
right: 100%;
width: 100%;
height: 2px;
}
</style> |
cs |
이제 블로그에 접속하면 로딩바가 생성된 것을 확인할 수 있다.
색상은 보라색인데 바꾸고 싶다면 16번 줄의 색상 코드를 변경하면 된다.
필자의 경우 반응형 스킨의 상단 메뉴 때문에 로딩바가 가려져서 22번 줄을 48px으로 변경해 사용중이다.
반응형
'블로그' 카테고리의 다른 글
| 티스토리 사이트 구조 문제 해결법 (네이버 웹마스터 도구) (9) | 2018.02.21 |
|---|---|
| 깔끔하게 블로그에 소스코드 넣기 (0) | 2017.12.02 |