티스토리 블로그 로딩 게이지바 적용하기

Writer : 사랑을 담은 비너스인/
Date : 2016. 12. 20. 10:37/
Category : 지식in/Etc
반응형

제 블로그 보시면 상단에 페이지 넘기거나 새로고침 시 뭔가 휙 지나가는걸 보실 수 있습니다.

jquery 이용한 방법인데 스크롤시 내가 어느 지점에 있나 나타나내는 방법도있긴한데 호스팅에서는 제대로 작동이 되는데 티스토리 블로그

제꺼에 적용하려고하니 아쉽게도 지원이 안되더라구요. 아쉬운대로 로딩 게이지바만 적용해놨는데 문제없이 작동이 잘되네요.

테스트로 작동해본 영상인데 정상적 으로 잘작동 하네요. 혹시라도 적용하실분은 하단 폴딩 클릭 하시면 확인 하실 수 있습니다.

이제 복사한 소스를 관리자 페이지 - 꾸미기 HTML/CSS 편집 클릭 합니다. 스킨 편집 창이 나오면 이제 <head> 와 </head>

소스를 붙여넣기 해줍니다. (아래는 블로그에 적용된 심플한 로딩 게이지바 소스 입니다.)


<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>

빨간색으로 표시된건 자신이 원하는 색상으로 변경가능한 로딩 게이지바 입니다. 포토샵 또는 기타 프로그램으로 색상 찾아서 변경하시면 됩니다.

붙여넣기가 끝난 뒤 저장 클릭 후 자신의 블로그에 정상적 으로 로딩 게이지바 동작하는지 확인하시면 이로서 끝 입니다.

_M#]

반응형
venusin.tistory.com/434