티스토리 블로그 접속 시 페이지 로딩 화면 나오게 하는 방법

티스토리 블로그 접속 시 페이지 로딩화면 만들기

티스토리 블로그에 접속하면 구글 애드센스 특성상 글보다 광고 배너가 늦게 나타나게 되면서 상단 광고 배너 설치가 무의미하게 되버리는 경우가 있다. 이같은 경우를 위해 약간의 팁이라면 로딩 이미지를 통해 광고가 모두 송출 된 후 해당 콘텐츠를 볼 수 있게 하는 방법을 적용할 수 있다.

 

페이지 접속 로딩 소스코드

일단 페이지 접속 로딩 소스 코드는 아래와 같다.

 

<!-- 로딩 이미지 코드 시작 -->
<script src="https://code.jquery.com/jquery-1.8.0.js"
  integrity="sha256-00Fh8tkPAe+EmVaHFpD+HovxWk7b97qwqVi7nLvjdgs="
  crossorigin="anonymous"></script>
<script type="text/javascript">
 $(window).on('load', function () {
      $("#load").hide();
 });
</script>
<style type="text/css">
#load {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: fixed;
	display: block;
	opacity: 0.8;
	background: white;
	z-index: 99;
	text-align: center;
}

#load > img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
	z-index: 100;
}
</style>
<div id="load">
	<img src="https://tistory2.daumcdn.net/tistory/624676/skin/images/loading.gif" alt="loading">
</div>
<!-- 로딩 이미지 코드 종료 -->

 

로딩 이미지 다운로드

로딩 이미지는 GIF 확장자를 가진 이미지 파일을 다운로드 하면 되는데 구글에서 찾거나 icons8.com/preloaders 사이트에서 원하는 이미지를 다운로드 받으면 된다.

 

블로그관리→스킨 편집→html편집→파일업로드→+추가를 눌러 다운로드 받은 이미지 파일 업로드