티스토리 #1 스킨 사이드바 광고 배치

안녕하세요. 이번에도 간만에 블로그 카테고리로 인사드립니다.

 

제 블로그를 보시면 아시다시피 저는 티스토리 기본스킨인 #1 스킨을 사용하고 있는데 이 스킨은 티스토리에서 뉴비 블로거들에게 사용을 독려할만큼 블로그에 최적화된 스킨 중 하나입니다.

 

하지만 이러한 #1 스킨도 단점이 명백히 존재했는데 그 중 하나가 바로 사이드바가 하단에 고정되어 있다는 단점이에요.

다른 스킨들을 보면 사이드바를 원하는 위치에 클릭 몇번이면 바꿀 수 있는데 #1은 만드신분이 일부러 본문글에 집중할 수 있도록 사이드바를 하단에 고정시키고 스킨을 제작하여 사용자가 직접 html 문을 수정하는 방법밖에 없어 저처럼 웹 편집에 조예가 없으신분들은 불편한점을 감수할 수 밖에 없었습니다.

 

이러한 문제 때문에 본문글이 있는 중앙을 제외하곤 좌측과 우측이 빈공간이 되어버려 허전해보이고, 특히나 애드센스 광고를 사이드에 달고 싶으신분들도 불편들을 많이 겪었으리라 생각됩니다.

 

그래서 오늘은 #1 스킨 html문을 약간 수정하여 우측 사이드바에 광고를 달 수 있게끔 하는 방법을 소개할까 합니다.

현재 모바일로 보고 계신분들은 제 블로그의 우측 사이드바 광고가 보이지 않을테지만, pc로 보시고 계시는 분들이라면 사이드바 쪽에 광고가 나오는걸 확인할 수 있는데 이렇게 광고가 나올 수 있게끔 수정하는거에요 !

 

---

사이드바 광고 달기

앞서 설명드렸듯 #1 스킨은 html 문을 직접 수정해야 사이드에 광고를 게재 할 수 있습니다.

하지만 다른 스킨들의 경우엔 클릭 몇번으로 가능한데 먼저, 이와 같은분들을 위한 사이드 광고 다는법을 간단히 소개할까 합니다. #1 스킨은 뒤에 따로 설명드릴게요.

 

1) '블로그 관리'로 들어가 '꾸미기'에서 '사이드바' 메뉴를 클릭합니다.

그 후 좌측에 있는 '[플러그인]HTML배너출력'을 '+'를 눌러 우측으로 옮겨 주시면 됩니다.

 

위 사진은 현재 제 블로그에 적용된 사이드바 설정인데요. 저같은 경우는 지저분한게 싫어 우측에 적용했던 항목들을 다 좌측으로 빼버린 상태에요. 우측에 하나 있는 '광고'라는 항목은 'HTML배너출력'의 이름을 광고라고 수정한 상태입니다.

 

2) 우측에 옮긴 'HTML 배너출력'을 눌러 '편집'을 클릭하고,

이름 메뉴에 원하는 제목을 입력,

HTML소스 메뉴에 사이드에 넣고 싶은 광고 소스를 복사 붙여넣기 하시면 됩니다.

광고 소스는 본인이 사용하던 반응형 광고 소스를 입력하셔도 되고, 따로 크기를 설정해서 만들고 그 소스를 입력하셔도 되지만, 반응형은 사실 본인 블로그 서식에 맞춰 크기가 조정되기에 따로 크기를 설정할 필요는 없다고 생각해 저는 일반 반응형 스킨을 사용하고 있습니다.

 

그 후 '사용자 모듈에 저장'을 체크하시고 '확인' 눌러주시면 됩니다.

사용자 모듈에 저장함으로써 언제든 필요할때 설정한 광고를 가져올 수 있습니다.

마지막으로 '변경사항 저장'을 눌러주면 사이드에 광고가 게재되는걸 확인할 수 있습니다.

* 광고를 만든지 얼마 안됐다면 게재되는데 10분정도 시간이 소요될 수 있습니다. 끝

 

---

#1 스킨 사이드바 광고 달기 (HTML문 수정)

생각보다 간단하죠?

하지만 대부분의 티스토리 스킨에서는 위 방법만으로 사이드에 광고를 게재할 수 있지만, 지금 제가 사용하는 #1 스킨 등 일부 스킨에서는 이런 방법으로는 우측 사이드바가 아닌 맨 하단에 광고가 게재됩니다. 

 

예시

위 사진처럼 맨 아래에 광고가 게재됩니다. 이렇게 될 경우 눈에 띄기가 쉽지 않으니 광고 수익도 형편 없겠죠.

이렇게 사이드바에 광고를 넣었음에도 맨 하단으로 광고가 게재되는 경우는 HTML문을 조금 수정해주어야 합니다.

생각보다 간단해요. 방법은 아래와 같습니다.

 

 

-HTML에 추가할 소스코드-

<!--사이드 광고 소스 코드 시작-->



 	<div id="side_ad" style="width: 160px; height: 600px; margin-top: 20px; margin-right: 10px; float: right; position: absolute; display:none">



<!-- 광고단위 소스 코드-->



 	

 	</div>



			<script>	

var window_size=window.getWindowCleintWidth();

//var margin_right = ((window_size-800)/2-8.5-300)/2+"px";

var margin_left = (window_size-800)/2+820+"px"

if(window_size>1435){	

document.getElementById("side_ad").style.display="block";

document.getElementById("side_ad").style.margin="500px 0 0 "+margin_left;	

}else{

document.getElementById("side_ad").style.display="none";

}



window.onresize = function() {

window_size=window.getWindowCleintWidth();

margin_left = (window_size-800)/2+820+"px"

if(window.getWindowCleintWidth()>1435){	

document.getElementById("side_ad").style.display="block";

document.getElementById("side_ad").style.margin="500px 0 0 "+margin_left;

}else{

document.getElementById("side_ad").style.display="none";

}

}

</script>



			<!--사이드 광고 소스 코드 끝-->

위 HTML 소스를 제가 말하는대로 소스를 추가하고, 말하는 위치에 붙여넣기 해주시면 #1 스킨 등 하단에 광고가 붙는 스킨들도 우측 사이드바에 광고를 배치할 수 있습니다. 위 소스코드는 복붙이 안되는 관계로 아래 파일로 올리겠습니다.

사이드 광고문.txt

0.00MB

 

1) 위 텍스트 파일을 다운로드 받고, <!-- 애드센스 광고단위 소스 코드-->의 바로 밑 하단에 자신이 배치하고 싶은 광고 소스코드를 복사 붙여넣기 합니다. 다른 설정은 필요없이 그냥 반응형 스킨 소스코드를 복붙하시면 돼요.

 

 

2) 자신의 광고 소스를 복붙했다면 코드를 전부 복사하신 후 블로그 관리탭 '스킨편집' -> 'html편집', HTML문에서,

<div id="dkContent" class='cont_skin" role="main">

바로 밑 하단에 붙여넣기 하시면 됩니다. Ctrl + f 로 <div id="dkContent" 만 검색하셔도 편하게 찾을 수 있습니다.

붙여넣기가 제대로 됐다면 적용하시고 블로그 사이드에 제대로 붙었는지 확인하시면 됩니다.

 

---

-이 방법대로 한 결과 - 메인화면-

현재 제 블로그 메인화면 입니다.

위 사진처럼 우측 사이드바에 광고가 달리는걸 확인할 수 있습니다~ 원래는 아무것도 없었어요 ㅠㅠ

참고로, 만든지 얼마 안된 광고는 노출되기까지 10분정도 소요됩니다.

 

-본문-

마찬가지로 현재 제 블로그 본문 상태이며, 우측 사이드바에 광고가 배치된걸 확인할 수 있습니다.

당연하지만 원래는 아무것도 없이 휑 했었습니다.

 

---

사이드바 광고 배치 후 수익 변화

어제 처음 사이드 광고를 게재하고 하루 변화를 관찰했습니다.

수익은 정책상 밝힐 수 없어 페이지 CTR로 변화를 보여드리고자 합니다.

 

제 블로그는 페이지 CTR이 평균 1.7% ~ 1.72%를 왔다갔다 했었는데, 사이드 광고를 배치하고 보시다시피 지난주와 비교하여 0.12%가 오른 1.82%로 상승하였습니다. 이 0.12% CTR 상승이 구글애드센스를 하시는 분들이라면 아시다시피 굉장히 큰 폭으로 오른 긍정적인 변화입니다. CTR이 오르면서 수익도 당연히 증가하였구요.

 

이렇게 사이드 광고를 배치할 수 있게 되면서 긍정적인 변화들이 눈에 보이니 힘들게 방법들을 찾아 실행해본 노력이 보상을 받는 느낌입니다. 혹여나 저처럼 사이드 광고에 골머리를 썩고 계시다면 지금까지 알려드린 방법대로 해보시길 바랄게요. 지금까지 티스토리 #1 사이드바 광고 배치에 관한 글이었습니다.