티스토리 블로그 로딩 이미지 넣는 방법

Posted by 바리스타7 Barista7
B7 블로그/티스토리

티스토리 블로그 페이지를 로딩하는동안 마우스 아이콘에서는 로딩중이라는 표시가 나타난다. 블로그에서도 로딩중이라는 상황을 알 수 있도록 코드를 추가해보자. 적용코드는 로딩중 일때는 빙글빙글 돌아가다 로딩이 끝나면 이미지가 사라지게 된다. 쉽게 따라할 수 있으니 블로그에 한번 적용해보자.

 

 

 

 

 

티스토리 블로그 로딩 이미지 넣는 방법

 

 

 

 

 

 

티스토리 블로그 로딩 이미지 넣는 방법

 

 

1.이미지 준비

 

 

코드에 사용할 이미지가 필요하다. 이미지는 아래의 사이트에서 받으면 된다. 무료로 사용할 수 있으니 마음에 드는 이미지를 다운 받고, 코드에 맞도록 이름을 수정하고, 티스토리 블로그에 업로드해 두자.

 

이미지 다운로드 : https://icons8.com/preloaders/

 

 

 

 

 

 

 

 

 

 

 

2. 소스코드 복사하기

 

 

다음 순서는 아래의 소스코드를 복사해서 붙여 넣으면 된다. 다운받은 이미지파일 이름을 수정해야 제대로 적용이 될수 있다. 아래의 코드에서는 loading.gif 로 되어 있으니 파일 업로드전에 확인해보자.

 

 

<!-- 로딩 이미지 소스코드 시작 -->

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

 z-index: 100;

}

</style>

<div id="load">

 <img src="./images/loading.gif" alt="loading">

</div>

<!-- 로딩 이미지 소스코드 끝-->

 

 

 

 

3. HTML/CSS 편집 소스코드 붙여넣기

 

 

다음 소스코드를 티스토리 블로그관리 > HTML/CSS편집에 들어가서 <body> 태그 하단에 붙혀넣기 하면된다. 필자는 찾기 편하게 </body> 앞에다가 코드를 붙여넣었다. 

 

 

 

 

 

 

 

 

 

 

 

 

4. 적용 결과 확인

 

 

이제 적용된 결과를 확인할 차례인다. 아래 그림처럼, 티스토리 블로그 글이 모두 로딩 되기 전까지는 빙글빙글 도는 이미지가 나타나게 된다.

 

 

 

 

 

지금까지 티스토리 블로그 페이지 로딩 이미지 넣는 방법을 알아보았다. 본분에 나와있는 소스코드를 첨부하였으니 필요하면 다운받아서 적용해보자.

 

 

 

소스코드

 

 

 

 

 

 

도움이 되셨다면 로그인 없이 가능한

아래 하트♥공감 버튼을 꾹 눌러주세요! 

 

 

 

 

 











이 댓글을 비밀 댓글로