심플하고 가독성이 좋아서 '기본 반응형 스킨#1'을 사용하시는 티스토리 블로거분들이 많이 있습니다. 현재는 티스토리 블로그 개설시 설정되어 있는 기본 스킨이기도 해서 많은 분들이 스킨을 제작하거나 구해서 변경하기 전까지 사용하고 있습니다.
기본 반응형 스킨#1에 사이드 광고 배치
기본 스킨 중에 하나인 반응형 스킨#1에는 빈 공간에 애드센스 광고를 넣기 어렵다는 단점이 있습니다. 티스토리 스킨을 꾸미려고 html을 막 시작한 분들이시라면 빈 공간에 애드센스 광고를 넣을 수는 있지만, 강제로 넣는 경우가 많아서 반응형 스킨의 장점을 살리지 못하는 경우도 많습니다. 그래서 제가, 측면에 애드센스 광고를 달면서, 반응형 스킨의 장점을 살릴 수 있는 소스 코드를 배포하겠습니다.
위에 이미지는 현재 제 블로그에 적용되어 있는 애드센스 광고 입니다. 사이드 바 없이, 기본 반응형 스킨 #1의 좌측에 광고가 달려있는 것을 보실 수 있습니다.
반응형 스킨의 장점을 살리기 위해, 창 크기를 줄이거나, 저해상도로 볼 경우 광고가 자동적으로 사라지게 됩니다. 구글 애드센스 정책상, 광고가 컨텐츠 내용을 가리면 위반 사유가 되기 때문에 저해상도에서는 사이드에 있는 광고들이 무조건 사라져야합니다.
기본 반응형 스킨#1 사이드 광고 소스 코드
<!--사이드 광고 소스 코드 시작-->
<div id="side_ad" style="width: 300px; height: 600px; margin-top: 20px; margin-left: 10px; float: left; position: absolute; display:none">
<!-- 애드센스 광고단위 소스 코드-->
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:600px"
data-ad-client="ca-pub-애드센스번호"
data-ad-slot="광고단위번호"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- 애드센스 광고단위 소스 코드 끝-->
</div>
<script>
var window_size=window.getWindowCleintWidth();
var margin_left = ((window_size-800)/2-8.5-300)/2+"px";
console.log(margin_left);
if(window_size>1440){
document.getElementById("side_ad").style.display="block";
document.getElementById("side_ad").style.margin="30px 0 0 "+margin_left;
} else if(window_size<=1440 & window_size >1435){
document.getElementById("side_ad").style.display="block";
document.getElementById("side_ad").style.margin="30px 0 0 0"
}else{
document.getElementById("side_ad").style.display="none";
}
window.onresize = function() {
window_size=window.getWindowCleintWidth();
margin_left = ((window_size-800)/2-8.5-300)/2+"px";
if(window.getWindowCleintWidth()>1440){
document.getElementById("side_ad").style.display="block";
document.getElementById("side_ad").style.margin="30px 0 0 "+margin_left;
} else if(window_size<=1440 & window_size >1435){
document.getElementById("side_ad").style.display="block";
document.getElementById("side_ad").style.margin="30px 0 0 0"
}else{
document.getElementById("side_ad").style.display="none";
}
}
</script>
<!--사이드 광고 소스 코드 끝-->
사이드 광고 소스 코드 넣는 법
위에 코드를 복사한 후에 소스 코드를 어디에 붙이셔야하는지 알려드리겠습니다. 먼저, [관리센터]-[HTML/CSS편집]을 누르셔서 html 편집기를 엽니다. 그리고 아래에 태그가 있는 곳을 찾습니다.
<div id="dkContent" class="cont_skin" role="main">
ctrl + f로 검색창을 띄우고 "dkContent"만 입력하셔도 쉽게 찾으실 수 있습니다. 이 태그 밑에 소스 코드를 달아야 합니다. 예시를 보여드리겠습니다.
맨 위에 블럭으로 처리된 태그 밑에 제가 공유하는 소스 코드를 붙이시면 됩니다. 코드를 붙이신 후에 구글 애드센스에서 300x600 광고단위를 만듭니다.
<!-- 애드센스 광고 단위 소스-->
애드센스 소스코드 붙여넣기
<!-- 애드센스 광고단위 소스 끝-->
광고 단위를 만드신 후에, 위에 부분에 볼드처리한 부분에 그대로 애드센스 소스 코드를 붙여넣기 하시고 저장하시면, 제 블로그처럼 좌측 상단에 애드센스 광고가 생기시는 것을 확인할 수 있습니다.
도움이 되셨으면 공감♥을 눌러주세요!
↓ ↓ ↓
