https://madebyan.tistory.com/502
[티스토리 로딩 화면 만들기 1] 로딩 이미지 다운 사이트 모음.
일반적으로 인터넷 서핑을 하다보면 인터넷 환경에 따라 다양하게 나타나는 로딩화면을 볼 수 있죠. 가장 일반적인 로딩화면이 바로 모래시계 로딩화면인데요. 수익형 블로그에서 블로그의 글
madebyan.tistory.com
다양한 사이트에서 맘에 드는 로딩이미지를 다운받았으니, 이제 그 이미지를 사용하여 로딩화면을 만들어보겠습니다.
혹시나 아직 로딩이미지를 다운받지 못했다면 위의 글을 통해 다운받으세요.
첫번째로 먼저 다운받은 로딩이미지의 파일명을 "loading.gif"로 변경해줍니다.
이유는 이 후에 나오는 로딩화면을 위한 소스코드에 loading.gif로 해 놨기 때문입니다.
만약에 loading.gif로 변경하기 귀찮으신 분은 이후 로딩화면을 위한 소스코드에서 파일명만 살짝 본인이 설정한 이름의 파일명으로 변경하시면 됩니다.
파일명 변경이 완료되었으면 다음 단계로 넘어가겠습니다.
두번째로 다운받은 loading.gif 파일을 티스토리의 [스킨편집 > 파일업로드]에서 업로드 시켜줍니다.
여기에 이미지 파일을 업로드해줘야 사용할 수 있게 됩니다.
하단의 +추가 버튼을 누르고 loading.gif 파일을 선택하면 다음과 같이 업로드가 됩니다.
업로드 후에는 항상 적용을 빼놓지 말고 해주셔야 합니다.
로딩이미지까지 업로드를 완료했다면 마지막 단계로 고고고~!!!
마지막으로 html 코드 입력입니다.
아래 넣은 Loading 화면 코드를 <body>와 </body> 태그 사이에 넣어주면 됩니다.
햇갈리지 않도록 <body> 태그 바로 아래 넣거나, </body> 태그 바로 위에 넣어주는 것을 추천드립니다.
<!-- Loading 화면 코드 시작 -->
<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="./images/loading.gif" alt="loading">
</div>
<!-- Loading 화면 코드 종료-->
위의 소스코드를 드래그해서 사용하시면 됩니다.
만약을 대비하여 텍스트 파일로 다운받을 수 있도록 올려놓겠습니다.
소스 코드를 넣은 후에는 반드시 적용 버튼을 눌러 적용을 해주셔야 로딩 화면이 적용이 됩니다.
로딩화면을 적용했다면 얼른 블로그로 가서 확인을 해 봐야겠죠~?
문제 없이 잘 들어갔는지를 확인하면 완료입니다.
이 로딩화면이 광고가 모두 뜰때까지 시간을 벌어주는 역할을 해서 수익에 도움을 준다고 하는 의견도 있는 반면에, 원하는 글이 바로 뜨지 않고 로딩이 되는 시간 때문에 블로그 방문자가 바로 이탈하여 좋지 않다고 하는 의견도 있습니다. 이 로딩화면은 양날의 칼처럼 좋을 수도 있고 나쁠 수도 있습니다.
잘 판단하셔서 로딩화면 적용 여부를 결정하세요~^^
감사합니다.
'티스토리 Tip' 카테고리의 다른 글
| [티스토리 꾸미기] 코드블럭에 복사버튼 만들기!!! (0) | 2022.09.14 |
|---|---|
| [티스토리 로딩 화면 만들기 1] 로딩 이미지 다운 사이트 모음. (0) | 2022.01.05 |
| [3차 종료] (No 선착순) MadebyAn의 세 번째 초대장 나눔~!! (25) | 2017.09.09 |
| [2차 종료] MadebyAn의 두 번째 초대장 나눔~!! (19) | 2017.09.01 |
| [1차 종료] MadebyAn의 첫 번째 초대장 나눔~!! (23) | 2017.08.30 |
댓글