티스토리 SEO 설정 '로딩화면' 만들기... 애드센스 효과 기대

로딩화면 GIF 파일 다운로드

일단 처음에 원하는 GIF파일을 다운로드합니다.

이미지 파일은 아래 사이트를 통해 다운로드하시면 되겠습니다.

Preloaders.net - Loading GIF, SVG and APNG (AJAX loaders) generator

원하는 이미지를 선택하셨다면
티스토리 [설정] - [스킨편집] - [html 편집] 메뉴로 이동.

이미지를 업로딩하여 로딩이미지를 추가 후 적용 버튼을 눌러줍니다.

[html 편집]에서 /body 바로 위에
아래 스크립트 코드를 복사 붙여 넣기 하여 줍니다.

그럼 로딩 화면 만들기는 완료가 된 것입니다.

· 스크립트

<!-- Loading Code -->

<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();
 });

 function closeTime() {
 setTimeout(function(){
	    $("#load").hide();}, 2500);
}

</script>
<style type="text/css">
#load {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: fixed;
	display: block;
	opacity: 1.0;
	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="./images/loading.gif" alt="loading">
</div>

<!-- Loading Code-->

· 다운로드

위 코드 복사가 안되시거나 하시는 분은
아래 파일을 다운로드하시면 되겠습니다.

Loading_Code.txt

0.00MB

· 파일설명

해당 코드 중 삭제해도 되는 부분은
아래 보여드리는 코드로 로딩 이미지가 나오는
시간을 관리하는 부분입니다.

 function closeTime() {
 setTimeout(function(){
	    $("#load").hide();}, 2500);
}

그럼 오늘도 좋은 하루 되시기 바랍니다.