티스토리 본문 상단 광고는 거의 국룰처럼 되었습니다. 실제로 제 블로그에서도 여기서 가장 광고 수익이 많이 나고 있습니다. 따라서 방문자 분들에게는 조금 죄송하지만 광고가 뜰 시간을 충분히 벌어주기 위해 로딩 화면을 통해 약간의 대기 시간을 얻어 보겠습니다.
사실 제 블로그에는 적용하지 않을 생각이었는데 요청하신 분이 계셔서 만들어 보았다가 만든 김에 적용을 하였습니다. 모든 스킨에 공통적으로 적용할 수 있다고 생각하지만 혹시 안 되시는 분 계시면 댓글 남겨 주세요.
광고 효율이 좋은 본문 상단 광고 2개와 비슷한 형태로 본문 하단에도 넣으면 어떨하는 생각에 작성한 포스팅도 있으니 참고 바랍니다.
티스토리 본문 하단에 구글 애드센스 광고 넣기
블로그를 운영하다보니 가장 효율이 좋은 광고 위치는 상단의 사각 광고 2개였습니다. 그런데 일부 방문자들이 상단 광고를 완전히 불러 오기도 전에 스크롤을 내려서 광고를 보지 못하는 경우
sangminem.tistory.com
목차
이미지 업로드하기
먼저 사용할 이미지를 업로드 해야 합니다. 샘플 이미지를 하나 제공해 드리겠습니다. 파일명은 loading.gif가 기본인데 원하는 이름으로 바꾸려면 코드도 손을 봐야하므로 그대로 사용하시는 걸 권장합니다.
스킨 편집 > html 편집 > 파일업로드 에서 업로드 하시면 됩니다.
로딩 화면 코드 위치 확인하기
스킨 편집 > html 편집 > html 탭으로 이동하여 head 태그가 끝나고 body 태그가 시작되는 바로 다음 위치에 코드를 작성해 보겠습니다. <body로 검색하시면 쉽게 찾을 수 있습니다.
코드 작성하기
적용하기 쉽게 html, 자바스크립트, css 코드를 한 군데 모두 작성해 보겠습니다. 화면이 모두 로드되기 전에 띄워줘야 하므로 맨 위쪽에 넣었고 페이지가 전부 로드되었다는 것이 감지되면 로딩 화면을 감추기 위한 코드도 자바스크립트로 작성을 하였습니다. 광고를 위해 500ms의 여유 시간을 더 두었는데 답답하다 싶으면 이 부분은 더 작은 값으로 바꾸셔도 됩니다.
<!-- 블로그 로딩 코드 start -->
<style type="text/css">
#waiting {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
display: flex;
background: white;
z-index: 999;
opacity: 0.9;
}
#waiting > img {
display: flex;
width: fit-content;
height: fit-content;
margin: auto;
}
</style>
<div id="waiting">
<img src="./images/loading.gif">
</div>
<script type="text/javascript">
$(window).on('load', function() {
setTimeout(function(){
$("#waiting").fadeOut();
}, 500);
});
</script>
<!-- 블로그 로딩 코드 end -->
결과 확인하기
화면 중간에 로딩 스피너 이미지가 보였다가 사라지게 됩니다.
움짤로도 확인해 보겠습니다. 다음과 같이 화면이 뜰 때까지 기다렸다가 사라지는 것을 알 수 있습니다.
유용하게 사용하시기 바랍니다.
'정보 > 블로그 운영팁' 카테고리의 다른 글
수익 효율이 가장 좋은 광고 플랫폼? 데이블, 텐핑, 애드핏, 애드센스 비교 (1) | 2021.12.03 |
---|---|
수익 향상 꿀팁, 티스토리 글 중간에 애드센스 광고 자동 삽입 (8) | 2021.11.29 |
수익 향상 꿀팁, 데이블 인피니트(무한) 피드 광고 자동 스크롤 (6) | 2021.11.28 |
월 100만원 광고 수익 달성, 티스토리 블로그와 구글 애드센스 (38) | 2021.10.30 |
구글 애드센스 광고 효과 향상을 위한 로딩 화면 만들기 (8) | 2021.10.10 |
티스토리 본문 하단에 구글 애드센스 광고 넣기 (2) | 2021.10.10 |
블로그 글 주제만 잘 선택해도 검색 유입이 증가한다는 증거 (22) | 2021.09.26 |
구글 애드센스 광고 중간 중간 안 뜨는 문제 해결 방법 (1) | 2021.09.22 |
폰트 경량화를 위해 woff 폰트를 woff2 타입으로 변경하는 방법 (2) | 2021.09.22 |
잘 적용했습니다 감사합니다 ㅎㅎ
답글
애드센스 승인 요청을 해두었는데 요즘 애드센스 유저가 포화 상태라서 그런지 전에는 탈락이든 승낙이든 하루 이틀만에 결과 메일을 보내주더니 이제는 무조건 한달 걸린다네요...;;;
승인 신청이 통과하게 되면 총알처럼 적용시켜보겠습니다. -0-
답글
저도 몇주는 걸렸던 것 같은데.. 탈락한 경험도 있구요 느긋하게 기다려보세요 ㅎㅎ
와!!너무 좋은 글들이 많아요!!방금 로딩하는거 제 블로그에 적용 해봤어요
너무 감사합니다!!
안 그래도 ㅜㅜ애드센스에 로딩 되는 부분에 오류가 많다고해서 어쩌나 했는데..!!
이 아이콘이 유용하게 작용할 것 같아요!!
답글
네 ㅎㅎ 도움이 되셨다니 기쁩니다!
현재 에미냄 최신버전 적용한 상태입니다.
https://openlove.tistory.com/2
로딩화면이 잘 나오고 있네요. 감사합니다.
한가지 질문할께요~
현재는 로딩화면이 나올때 배경색이 약간 흐릿하게 되면서 마우스스크롤이나 다른작업을 할수가 없게 해놓았는데요
로딩화면 나올때도 배경이 흐리지 않고 마우스스크롤이나 다른작업이 가능하게 바꿀려면 어떻게 해야할까요?
기다릴 사람은 기다리고 마음급한사람은 로딩화면 나올지라도 다른 작업을 할수있도록 하고 싶습니다.
답글
적용되어 있는 css 중 다음 부분을 제거하시구요.
#wrapper {
overflow: hidden !important;
height: calc(100vh + 1px) !important;
}
#wrapper.loaded {
overflow: unset !important;
height: unset !important;
}
자바스크립트 코드 중 $('#wrapper').off 구문과 $('#wrapper').on 구문을 제거하시면 될 듯 싶습니다.
감사해요~ 해결했습니다 ^^
답글