작년 5월 정도에 블로그의 폰트 변경과, 상단으로 되돌아가는 TOP버튼 추가, 본문 글자 크기 변경을 했었는데요. 그 이후로는 블로그 자체에는 변화를 주지 않고 있었습니다
그러다가 오래간만에 블로그에 약간의 변경을 주었습니다
카테고리를 통해서 포스트로 진입하면 지저분했던 주소창을 개선하고, 로딩화면을 추가한 것입니다. 주소창의 카테고리 숫자를 없애니까 확실히 깔끔해보이고, 애드센스 광고의 로딩 속도에 맞춰서 로딩 화면을 추가하니까 광고가 어느 정도는 뜬 상태에서 글이 보여지게 되어서 로딩이 늦어서 허전해보이던 광고 위치가 안보이게 되었네요
포스트 주소창의 카테고리 숫자 없애기
카테고리를 통해서 포스트를 보면, 주소창에 글 번호 뒤쪽으로 카테고리 번호가 붙게 됩니다
그러면 포스트의 주소가 2개로 나뉘어 지는데요. 다른 사용자가 저의 포스트의 주소를 복사해서 공유하는 경우에 어떤 사람은 카테고리 번호가 없는 주소를 복사해서 공유하고, 어떤 사람은 카테고리 번호가 있는 주소를 복사해서 공유하게 되겠죠?(근데 비인기 블로그라서 외부에 걸린 링크가 매우 적다는게 함정이군요)
그러면 외부에서 링크를 타고 들어오는 경우에 애드센스 광고도 주소마다 분산이 되어버려서 미미하지만 광고 수익에도 영향이 있다고 하더라고요? 그리고 주소창이 지저분해 보이기도 했기에, 깔끔하게 카테고리 주소를 보이지 않게 변경하였습니다
브라우저에서 화면을 보는 경우에는 주소창에서 보이지 않는다는 것이지, 카테고리 번호를 주소창에 입력해도 포스트에 접속(굳이 그렇게?)은 가능합니다. 누군가 글 주소를 복사하는 경우에 주소가 분산되는 경우를 방지하는 것이죠
<!-- 티스토리 카테고리 매개변수 지우기 시작 -->
<script type="text/javascript">
if(typeof(history.pushState) == 'function') {
var CatagoryURL = location.href;
CatagoryURL = CatagoryURL.replace(/\?category=([0-9]+)/ig,'');
history.pushState(null, null, CatagoryURL); }
</script>
<!-- 티스토리 카테고리 매개변수 지우기 끝 -->출처 & 참고 : topis.me/37
티스토리에서 관리자 모드로 들어가서 '블로그 관리 → 스킨 편집 → HTML 편집'으로 진입하여, HTML의 <head>와 </head>사이에 해당 코드를 붙여넣기 하면 됩니다
저는 </head> 앞 부분에 코드를 삽입하였습니다. 적용되면 블로그의 메인 화면이 아닌 카테고리를 통해서 포스트에 진입하는 경우에도 주소가 깔끔하게 나오게 됩니다
로딩 화면 추가
로딩 화면을 최대 2.5초까지 출력하는데, 무의미한 보여주기식 로딩이 아니라 구글 애드센스가 로딩이 되었다면 즉시 페이지를 보여주도록 추가하였습니다
물론, 최대 시간이 지나면 애드센스의 로딩 유무와 상관없이 페이지가 보여지게 됩니다
이미 페이지는 띄워져 있지만, 커다란 흰색 창을 추가로 띄워서 화면을 가리고, 그 위에 로딩 이미지를 불러와서 페이지를 불러오는 듯한 모습을 보여준다고 생각하면 되겠습니다(로딩되는 것처럼 보여야 사람들이 뒤로가기를 누르지 않겠죠)
<!-- 애드센스 광고 로딩 전, 본문 대기 시작 -->
<div id="loadOverwrapper">
<div class="sk-cube-grid">
<div class="sk-cube sk-cube1"></div>
<div class="sk-cube sk-cube2"></div>
<div class="sk-cube sk-cube3"></div>
<div class="sk-cube sk-cube4"></div>
<div class="sk-cube sk-cube5"></div>
<div class="sk-cube sk-cube6"></div>
<div class="sk-cube sk-cube7"></div>
<div class="sk-cube sk-cube8"></div>
<div class="sk-cube sk-cube9"></div>
</div>
</div>
<!-- 애드센스 광고 로딩 전, 본문 대기 끝 -->출처 & 참고 : topis.me/44
출처 & 참고 : tobiasahlin.com/spinkit
티스토리에서 관리자 모드로 들어가서 '블로그 관리 → 스킨 편집 → HTML 편집'으로 진입하여, HTML에서 <body>의 바로 아래에 코드를 삽입합니다
<!-- 애드센스 광고 로딩 체크 시작 -->
<script>
function rmLoadOverwapper(){
document.querySelector("#loadOverwrapper").style.display="none";
}
try {
document.querySelector("iframe[onload*='google']").onload=function(){
rmLoadOverwapper();
}
setTimeout(function(){
rmLoadOverwapper();
}, 2500);
}
catch(err) {
setTimeout(function(){
rmLoadOverwapper();
}, 2500);
}
</script>
<!-- 애드센스 광고 로딩 체크 끝 -->출처 & 참고 : topis.me/44
그리고 HTML의 </body> 바로 위에 코드를 삽입합니다
/* 로딩 큐브 애니메이션 */
#loadOverwrapper {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #fff;
z-index: 9999;
text-align: center;
padding: 20%;
}
.sk-cube-grid {
width: 40px;
height: 40px;
margin: 100px auto;
}
.sk-cube-grid .sk-cube {
width: 33%;
height: 33%;
background-color: #333;
float: left;
-webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
}
.sk-cube-grid .sk-cube1 {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s; }
.sk-cube-grid .sk-cube2 {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s; }
.sk-cube-grid .sk-cube3 {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s; }
.sk-cube-grid .sk-cube4 {
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s; }
.sk-cube-grid .sk-cube5 {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s; }
.sk-cube-grid .sk-cube6 {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s; }
.sk-cube-grid .sk-cube7 {
-webkit-animation-delay: 0s;
animation-delay: 0s; }
.sk-cube-grid .sk-cube8 {
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s; }
.sk-cube-grid .sk-cube9 {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s; }
@-webkit-keyframes sk-cubeGridScaleDelay {
0%, 70%, 100% {
-webkit-transform: scale3D(1, 1, 1);
transform: scale3D(1, 1, 1);
} 35% {
-webkit-transform: scale3D(0, 0, 1);
transform: scale3D(0, 0, 1);
}
}
@keyframes sk-cubeGridScaleDelay {
0%, 70%, 100% {
-webkit-transform: scale3D(1, 1, 1);
transform: scale3D(1, 1, 1);
} 35% {
-webkit-transform: scale3D(0, 0, 1);
transform: scale3D(0, 0, 1);
}
}출처 & 참고 : nubiz.tistory.com/670
출처 & 참고 : topis.me/44
출처 & 참고 : tobiasahlin.com/spinkit
마지막으로는 HTML이 아닌 CSS로 진입하여 제일 하단에서 엔터를 눌러서 공간을 추가로 생성하여 코드를 삽입하면 완료가 됩니다. 기존 코드 사이에 삽입하는게 아니라 별개로 삽입하는 것입니다
저는 큐브 애니메이션이 마음에 들어서 큐브로 했습니다. 코드로 제작된 로딩 이미지는 github.com과 codepen.io에서 찾아보시면 되겠습니다
로딩 이미지는 블로그 자체적으로 업로드해서 사용해도 되지만, 요즘은 코드만으로도 이미지를 구현하기도 한다는군요
'일상 이야기 > etc.' 카테고리의 다른 글
| 진산리 어촌계(충청남도 태안군), 조개 잡이 & 갯벌 체험 (0) | 2021.10.04 |
|---|---|
| 용봉산 '케이 카페(K CAFE)' 방문, 해미읍성과 해미천 벚꽃 관람 (0) | 2021.04.05 |
| 배스킨라빈스31 아이스크림 케이크 "시크릿 라이언" (0) | 2020.12.28 |
| 영양제 구입(타우린, 아르기닌&오르티닌, 카페인) (0) | 2020.11.08 |
| 구글 애드센스 수익으로 받은 '외환 수표' 환전하기(ft. 추심) (0) | 2020.10.15 |
