본인의 블로그에서 가장 효율이 좋은 광고는 무엇인가요?
금융, 보험, 피부미용 광고 같이 CPC 단가가 높은 광고가 단기적으로는 가장 효율이 좋을 겁니다.
이런 광고는 안정적인 수익 효과를 내기가 어려워 한마디로 Lotto라고 볼 수 있습니다.
좋은 광고 수익을 내기 위해서 연구하시는 분들은 광고 게재 위치에 신경을 많이 쓸 텐데 보통 광고 효과가 가장 좋은 위치는 본문 상단이라고 합니다.
검색 유입이 대부분인 블로그 특성상 가장 먼저 노출이 되기 때문일 텐데요.
하지만 상단 광고 단점이 자칫 광고 로딩이 늦어 성격 급한 사람들은 아래로 휙휙 내려버려 노출되기도 전에 화면에서 사라지는 일이 발생하여 광고가 클릭될 기회조차도 주어지지 않는 경우가 생길 확률이 높다는 거죠.
이런 손실을 조금이라도 줄이기 위해 블로그가 화면에 완전히 로딩될 때까지 시간을 벌어줄 로딩 화면을 보여주는 방법을 소개해 드리겠습니다.
블로그 로딩 화면 만드는 방법
우선은 위의 계속 보면 어지러운 로딩 중이라는 표시를 할 이미지 GIF 사진이 필요합니다.
능력 좋은 분들은 이쁘게 사진을 직접 만들어 로딩 중을 나타낼 GIF 파일을 만들면 되고
Ctrl+C 가 주종목인 분들을 위한 사이트를 소개해드리겠습니다.
Preloaders.net - Loading GIF, SVG & APNG (AJAX loaders) generator
More than 1000 free and premium ajax loader (loading animated GIF, SVG and APNG) spinners, bars and 3D animations generator for AJAX and JQuery
icons8.com
위의 사이트에 들어가서 여기저기 둘러본 후에 마음에 드는 GIF 파일을 선택 후에
IMAGE TYPE : GIF 선택
COLOR : 원하는 대로 ANIMATION SPEED : 취향 껏 조절 후
PRELODER SIZE : Width, Height 조절 후 나중에 블로그에 위치를 맞추기 편하게 따로 기록해 두고(위의 이미지는 Width : 256px, height : 34px)
[DOWNLOAD] 선택 파일 이름을 [Loading]으로 저장해서 잘 모셔둡니다.
블로그 로딩 화면 티스토리 스킨 HTML 수정하기
[Tistory Manage] -> [스킨 편집] -> [HTML 편집] 선택
[파일업로드] -> [+추가] 선택하여 위에서 다운로드하여 놓은 [Loading.gif] 파일 선택 후 그림과 같이 [images/loading.gif] 파일이 보이면 됩니다.
다시 [HTML] 선택 후 아래의 코드를 복사해서
<!-- start Loading screen code -->
<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 () {
$("#loading").hide();
});
</script>
<style type="text/css">
#loading {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
display: block;
opacity: 0.7;
background: #FFFFFF;
z-index: 99;
text-align: center;
}
#loading > img {
position: absolute;
top: 50%;
left: 50%;
margin-top:-128px; margin-left:-128px;
width:256px; height:34px;
z-index: 100;
}
</style>
<div id="loading">
<img src="./images/loading.gif">
</div>
<!-- end Loading screen code -->
혹은 아래의 [Tistory_Loading_Screen_Code.TXT] 파일을 다운로드하여 열어서 복사해서
<BODY> </BODY> 태그 안에 적당한 위치에 붙여 넣기 해줍니다.
적용 후 블로그 화면이 예상하던 대로 된다면 성공입니다.
블로그 로딩 화면 CSS 수정하여 위치 맞추기
그런데 말입니다.
예상하던 대로 나오지 않고 위치가 한쪽으로 치우쳤거나 할 겁니다. 분명!
위의 Tistory_Loading_Screen_Code를 수정하여 위치나 불투명도를 조절하는 방법 입니다.
#loading {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
display: block;
opacity: 0.7;
background: #FFFFFF;
z-index: 99;
text-align: center;
}위의 코드는 로딩화면에서 전체적인 흐린 화면을 설정하는 CSS 코드 입니다.
다른 것은 특별히 고칠 것이 없고
전체화면을 더 흐리게 or 덜 흐리게 조절하려면
opacity 값을 늘이고 or 줄여서 원하는 값을 얻을 수 있습니다.
전체화면 색을 조절하려면
background 값을 원하는 색상 값으로 바꿔줄 수 있습니다.
z-index는 겹쳐진 객체가 화면에 나타나는 높이 순서인데 100이면 가장 앞에 나타나게 됩니다.
99인 이유는 Loading 이미지가 가장 앞에 나와야 하니 100을 주고 이것 보다는 뒤에 나타나야 하니 -1 해서 99로 하였습니다. 딱히 수정할 필요는 없는데 혹시나 화면 로딩시에 로딩화면 보다 앞에 무언인가 나타나 보인다면 이 값이 문제인 것 입니다.
#loading > img {
position: absolute;
top: 50%;
left: 50%;
margin-top:-128px; margin-left:-128px;
width:256px; height:34px;
z-index: 100;위의 코드는 로딩 중 표시 GIF 이미지를 설정하는 CSS 코드 입니다.
로딩 이미지는 어차피 만들거나 다운 받을 때 이미 원하는 대로 수정을 했을 것이기 때문에 화면 상에 나타나는 위치만 문제가 될 것 입니다.
(보통은 다들 화면 중앙에 로딩 이미지가 나오길 원할테니) 화면에 가운데 오도록 위치를 수정하려면
위의 코드에서 width 값과 height 값을 처음에 다운로드 할 때 기록해둔 값으로 변경 해줍니다.
그리고 margin-top과 margin-left 값을 width 값의 반의 음수(-)값으로 변경해 줍니다.
(예 : width가 256px 이므로 반은 128px에 "-"이면 -128px)
이렇게 하면 로딩 이미지가 화면의 가운데 위치하게 될 것입니다.
사실..
이렇게 한다고 해서 수익에 얼마나 효과가 있을지는 모르겠습니다.
다 필요없고 방문자가 많으면 최고죠 뭐. 그냥 자기 만족, 위안......
최근댓글