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

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. 적용 결과 확인

 

 

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

 

 

 

 

 

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

 

 

 

소스코드

 

 

 

 

 

 

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

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

 

 

 

 

 











이 댓글을 비밀 댓글로
  1. 로딩 이미지를 넣었는데 pc에는 알맞은 크기로 로딩 이미지가 노출되는 반면 스마트폰에서는 pc크기와 동일한 크기로 나오다보니 로딩 이미지가 잘리더라구요.. 혹시 스마트폰에서도 크기에 맞게 노출되게 하는 방법이 있을까요?
    • 댓글 감사합니다. 처음 로딩이미지를 사용하다가 현재는 소스코드를 삭제한 상태입니다. 아마도 소스코드를 모바일에 맞게 수정해야 될 것 같네요.
    • 그럼 지금은 로딩 이미지를 사용안하신다는 건가요..? 블로그 시작한지 얼마 되지않아서 로딩 이미지가 방문자들에게 좋은 효과를 줄거 같아서 넣어보려고하는데 고민되네요ㅠ
    • 네 지금은 사용안하고 있어요.
  2. 많은 도움이 되었습니다.. 모바일에서도 센터에 나오게 하는 방법을 알고 싶어요..^^
    • 댓글 감사합니다. 아무래도 PC화면에 맞게 만들어진것이다 보니 모바일에서는 보이는데 다른거 같네요.
    • 2020.05.19 02:48
    비밀댓글입니다
      • 2020.06.13 16:42
      비밀댓글입니다
  3. 혹시 로딩 이미지와 더불어서 글귀도 넣을 수 있을까요?
    • 저는 이미지 넣는 방법만 찾아봤는데, 찾아보면 넣는방법이 있을지도 모르겠네요.