1인 창업 이야기

티스토리 로딩 화면 설정 만들기 - HTML 코드 다운

roundmoons 2023. 1. 16. 07:56
728x90

어떤 티스토리 블로그를 들어가면 글을 불러올 때까지 '책'이나 '로딩'과 같은 이미지가 나오는 것을 본 적 있으시죠?

아무래도 동영상이나 고화질 사진과 같이 콘텐츠를 불러오는 데 시간이 걸리기 때문이죠

반면에 선택 후에 로딩 화면 없이 글이 보이지 않으면 뒤로 가기 버튼을 눌러보신 경험도 상당히 많을 거예요. 

오류라고 생각하거나 해당 티스토리가 잘못됐다고 생각하게 되는 거죠.

loading

이런 식으로 우리 글을 보러 온 사람들이 콘텐츠를 불러오는 잠깐이라도 지루함을 덜 느끼고, 로딩 중이라는 시그널로 기다릴 수 있게 하기 위해 필요한 것이 티스토리 로딩 화면 설정이에요.

 

로딩 화면 설정할 이미지 다운로드

https://icons8.com/

 

Free Icons, Clipart Illustrations, Photos, and Music

Forum Mostly used for bugs, feature requests, and support.

icons8.com

검색어는

'loading', 'sandtimer', 'timer', 'countdown', 'clock', 'spinner' 등으로 찾아보시면 좋아요. 

아이콘 다운로드
아이콘 검색해보기

검색된 아이콘을 볼 때, 기본 이미지와 GIF가 있어요.

저는 움직임을 선호해 GIF 파일을 주로 찾아보는 데요.

아래처럼 검색된 결과에서 animated 필터를 걸어주시면 돼요.

타이머 아이콘 GIF 검색하기

마음에 드시는 이미지 파일을 다운로드하여 주세요.

이때 파일 이름을 'loading'으로 해주세요.

나중에 코드가 잘 적용되도록 하기 위함이에요.

Bar 형태 GIF 아이콘
Bar 형태 GIF 아이콘

 

티스토리 스킨 편집

티스토리 블로그 관리자에서 스킨 편집을 선택해 주세요.

티스토리 스킨편집
티스토리 스킨편집

그리고 html 편집을 눌러주세요.

HTML 코드 삽입 전에 이미지 파일을 업로드해야 해요.

오른쪽 이미지처럼 추가가 되면 HTML 작업 창으로 넘어가주세요.

티스토리 hrml 편집티스토리 로딩 화면 업로드
스킨 편집에서 이미지 추가하기

 

이제 로딩 화면이 삽입될 수 있도록 아래의 코드를 넣어주세요.

위치는 </body> 위쪽에 넣어주세요.

보통 맨 아래로 내려가시면 돼요.(검색하셔도 돼요.)

코드는 메모장으로 남겨 놓으니 그대로 복붙 해주세요.

티스토리 로딩 화면 HTML 코드.txt
0.00MB
소스 코드 위치 확인하기
소스 코드 위치 /body 위

다음으로 왼쪽에서 새로고침을 눌러보고 잘 적용되는지 확인해 주시면 돼요.

소스 코드 적용 확인
소스 코드 적용 확인

콘텐츠 불러오는 속도가 너무 빠른 경우 잘 안 보일 수 있어요.
이미지가 많은 글을 클릭해서 확인해 보시면 좋아요.

 

티스토리 이탈률을 줄이기 위한 노력으로 꼭 설정해 보세요.

 

 

[1인 창업 이야기] - 티스토리 애드센스 승인 받는 방법 총정리 1편 - 티스토리 설정

[1인 창업 이야기] - 티스토리 애드센스 승인 받는 방법 총정리 2편 - 구글 웹마스터 도구 등록

[1인 창업 이야기] - 티스토리 애드센스 승인 받는 방법 총정리 3편 - 네이버 서치 어드바이저 등록

[1인 창업 이야기] - 티스토리 애드센스 승인 받는 방법 총정리 4편 - 5차 거절과 해결 방법

[1인 창업 이야기] - 걱정할 필요 없는 robots.txt에 의해 차단됨 해결 방법 - 색인 생성 문제

 

걱정 할 필요 없는 robots.txt에 의해 차단됨 해결 방법 - 색인 생성 문제

구글 애드센스를 위해 열심히 티스토리 블로그를 포스팅하는 우리에게 이런 메일이 올 때마다 정말 짜증 나죠 거기다가 색인생성 문제까지 함께 오면 이 문제 때문에 그러는 건가 애드센스가

novechaya.tistory.com

 

도전기를 인스타툰으로 보러 가기

노브가 출간한 화장품 스몰 브랜딩 Ebook 보러 가기

반응형
loading