티스토리 기본스킨 #1에 애드센스 사이드 광고(좌측) 달기

티스토리 기본스킨 #1에 애드센스 사이드 광고(좌측) 달기

출처 : HaNaZuOu's 

Blog https://hanazuou.tistory.com/33

심플하고 가독성이 좋아서 '기본 반응형 스킨#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 광고단위를 만듭니다. 

<!-- 애드센스 광고 단위 소스-->

애드센스 소스코드 붙여넣기

<!-- 애드센스 광고단위 소스 끝-->

광고 단위를 만드신 후에, 위에 부분에 볼드처리한 부분에 그대로 애드센스 소스 코드를 붙여넣기 하시고 저장하시면, 제 블로그처럼 좌측 상단에 애드센스 광고가 생기시는 것을 확인할 수 있습니다. 

------------------------------------------------------------------------

본인이 사용을 하기 위하여, 원문의 내용을 스크랩 및 내용을 추가 하였습니다.  

원문 작성자의 삭제 요구가 있을 경우, 즉시 삭제 조치를 하겠습니다.

------------------------------------------------------------------------

<< Yuotube : Click >>

TiStory blog : https://sosmt.tistory.com

Afreeca TV : http://bj.afreecatv.com/sosmt1004/vods

문제의 소지가 될 수 있는 부분에 대해 

말씀을 주시면 바로 시정하도록 하겠습니다.