애드센스 상단 반응형광고 2개 설치방법

필자가 쓰는 티스토리 스킨은 반응형스킨인 Fastboot 1.6.2 버전이다.

과거의 티스토리 스킨은 PC형과 모바일형으로 분리된 페이지를 사용했기 때문에, PC형에서 336X280 컨텐츠광고를 나란히 2개를 배치해도 별 문제가 없었다.

하지만 반응형스킨에 336X280 컨텐츠광고를 나란히 2개를 놓을 경우, 모바일 기기에서는 광고가 짤려서 애드센스 정책위반에 걸릴 수도 있다.

오늘은 반응형 스킨에서 정책위반 없이 애드센스 광고를 2개 설치하는 방법에 대해 자세히 알아보도록 하자!

원하는 형태의 광고 구상하기

애드센스를 해보신 분이라면 잘 아시겠지만, 336X280 광고가 320X250보다 클릭률이 높다. 이는 336X280 광고가 사이즈가 더 크기 때문인데, 안타까운건 336X280 크기는 모바일에서는 광고 일부분이 잘려서 사용할 수 없다. 모바일에서 가능한 최대 크기는 320X250 이다.

필자는 모바일에서 볼때는 320X250 크기의 광고가 1개만 나오도록, 그리고 PC에서 볼때는 336X280 광고가 나란히 2개가 나오도록 코딩을 하고 싶다. 과연 이게 가능할까?

정답은.. 두둥! 가능하다! 지금부터 여러분께 차근차근 알려드리겠다.

일단 정리하자면 필자가 원하는 광고 배치 구상도는 다음과 같다.

▶ 필자가 원하는 애드센스 광고 배치 구상도

① 반응형 스킨을 PC에서 보았을 때, 336X280 광고가 나란히 2개가 나오도록 한다.

② 반응형 스킨을 모바일에서 보았을 때, 320X250 광고가 1개만 나오도록 한다.

③ 위의 2개의 요건을 하나의 코딩으로 완성한다.

그림으로 표현하자면 위와 같을 것이다. 이걸 한번 코딩으로 만들어보도록 하겠다.

애드센스 상단 반응형광고 2개 설치 코딩방법

▶ 첨부파일

반응형광고코드.txt

<div align="center">

<span>

<style>

.myads1 { width:320px; height: 250px; }

@media(min-width: 450px) { .myads1 { width: 336px; height: 280px; } }

</style>

<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle myads1" style="display:inline-block" 

data-ad-client="ca-pub-xxxxxxxx" 

data-ad-slot="xxxxxxxx"></ins>

<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

</span>

<span style="margin-left: 20px;">

<style>

.myads2 { display:none; }

@media(min-width: 1100px) { .myads2 { width: 336px; height: 280px; } }

</style>

<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><ins class="adsbygoogle myads2" style="display:inline-block" 

data-ad-client="ca-pub-xxxxxxxx" 

data-ad-slot="xxxxxxxx"></ins>

<script>

(adsbygoogle = window.adsbygoogle || []).push({});</script>

</span>

</div>

이 코딩은, 반응형광고 코드를 넣어서 만든 것이다. 본문의 가로폭이 450px 이하일 때에는 320X250 광고 1개만 나오도록 코딩하였고, 가로폭이 450px ~ 1100px 사이일 경우 336X280 광고 1개, 그리고 본문 사이즈가 1100px 이상일 때에는 336X280 광고가 나란히 2개가 배치되도록 한 코딩이다.

여러분이 수정할 부분은, 파란색 부분을 여러분의 반응형광고코드 안에 있는 데이터로 집어넣으면 된다. 주의할 것! 일반 컨텐츠광고가 아닌, 반응형광고로 집어넣어야 한다!

여러분의 애드센스 광고코드에 들어가서, 위의 두줄만 복사해서 필자가 만든 코드에 붙여넣기하면 된다.

 

코드 구현 검증

위에서 만든 코드는 어디다가 집어넣어야 할까? 아마 Fastboot 스킨 뿐만 아니라 대부분의 스킨도 공통적으로 적용할 수 있을 것이다. 

먼저 HTML/CSS 편집창에 들어간다.

HTML 수정창에서 ##_article_rep_desc 를 검색한다.

<div class="article">

"광고코드 삽입"

필자가 쓰는 티스토리 스킨은 반응형스킨인 Fastboot 1.6.2 버전이다.

과거의 티스토리 스킨은 PC형과 모바일형으로 분리된 페이지를 사용했기 때문에, PC형에서 336X280 컨텐츠광고를 나란히 2개를 배치해도 별 문제가 없었다.

하지만 반응형스킨에 336X280 컨텐츠광고를 나란히 2개를 놓을 경우, 모바일 기기에서는 광고가 짤려서 애드센스 정책위반에 걸릴 수도 있다.

오늘은 반응형 스킨에서 정책위반 없이 애드센스 광고를 2개 설치하는 방법에 대해 자세히 알아보도록 하자!

원하는 형태의 광고 구상하기

애드센스를 해보신 분이라면 잘 아시겠지만, 336X280 광고가 320X250보다 클릭률이 높다. 이는 336X280 광고가 사이즈가 더 크기 때문인데, 안타까운건 336X280 크기는 모바일에서는 광고 일부분이 잘려서 사용할 수 없다. 모바일에서 가능한 최대 크기는 320X250 이다.

필자는 모바일에서 볼때는 320X250 크기의 광고가 1개만 나오도록, 그리고 PC에서 볼때는 336X280 광고가 나란히 2개가 나오도록 코딩을 하고 싶다. 과연 이게 가능할까?

정답은.. 두둥! 가능하다! 지금부터 여러분께 차근차근 알려드리겠다.

일단 정리하자면 필자가 원하는 광고 배치 구상도는 다음과 같다.

▶ 필자가 원하는 애드센스 광고 배치 구상도

① 반응형 스킨을 PC에서 보았을 때, 336X280 광고가 나란히 2개가 나오도록 한다.

② 반응형 스킨을 모바일에서 보았을 때, 320X250 광고가 1개만 나오도록 한다.

③ 위의 2개의 요건을 하나의 코딩으로 완성한다.

그림으로 표현하자면 위와 같을 것이다. 이걸 한번 코딩으로 만들어보도록 하겠다.

애드센스 상단 반응형광고 2개 설치 코딩방법

▶ 첨부파일

반응형광고코드.txt

<div align="center">

<span>

<style>

.myads1 { width:320px; height: 250px; }

@media(min-width: 450px) { .myads1 { width: 336px; height: 280px; } }

</style>

<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle myads1" style="display:inline-block" 

data-ad-client="ca-pub-xxxxxxxx" 

data-ad-slot="xxxxxxxx"></ins>

<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

</span>

<span style="margin-left: 20px;">

<style>

.myads2 { display:none; }

@media(min-width: 1100px) { .myads2 { width: 336px; height: 280px; } }

</style>

<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><ins class="adsbygoogle myads2" style="display:inline-block" 

data-ad-client="ca-pub-xxxxxxxx" 

data-ad-slot="xxxxxxxx"></ins>

<script>

(adsbygoogle = window.adsbygoogle || []).push({});</script>

</span>

</div>

이 코딩은, 반응형광고 코드를 넣어서 만든 것이다. 본문의 가로폭이 450px 이하일 때에는 320X250 광고 1개만 나오도록 코딩하였고, 가로폭이 450px ~ 1100px 사이일 경우 336X280 광고 1개, 그리고 본문 사이즈가 1100px 이상일 때에는 336X280 광고가 나란히 2개가 배치되도록 한 코딩이다.

여러분이 수정할 부분은, 파란색 부분을 여러분의 반응형광고코드 안에 있는 데이터로 집어넣으면 된다. 주의할 것! 일반 컨텐츠광고가 아닌, 반응형광고로 집어넣어야 한다!

여러분의 애드센스 광고코드에 들어가서, 위의 두줄만 복사해서 필자가 만든 코드에 붙여넣기하면 된다.

 

코드 구현 검증

위에서 만든 코드는 어디다가 집어넣어야 할까? 아마 Fastboot 스킨 뿐만 아니라 대부분의 스킨도 공통적으로 적용할 수 있을 것이다. 

먼저 HTML/CSS 편집창에 들어간다.

HTML 수정창에서 ##_article_rep_desc 를 검색한다.

<div class="article">

"광고코드 삽입"

</div>

이 부분이 보이실 것이다. 바로 윗줄에, 즉 <div태그와 사이에 위의 코드를 집어넣으면 본문 상단에 반응형광고가 나타나며, </div> 태그 사이에 코드를 집어넣으면 본문 하단에 나타나게 된다.

만약 여기까지 잘 따라오셨다면 아마 광고가 제대로 구현될 것이다. 제대로 구현되는지는 아래 사이트에서 참고해보시길 바란다.

http://troy.labs.daum.net/

필자도 위의 링크로 들어가 광고가 제대로 구현되어있는지 확인해보았다.

갤럭시 노트4에서의 화면이다. 의도한대로 320X250 크기 1개만 노출되고 있다.

이번에는 PC화면으로 보았다. 역시 의도한대로 336X280 크기 2개가 나란히 노출되고 있다.

오늘은 애드센스 반응형광고 2개를 본문 상단에 나란히 넣는 방법에 대해 알아보았다. 추가로 모바일기기에서는 1개만 나오도록 코딩해보았는데, 제대로 먹히는 것을 확인하였다.

아마 필자와 같은 고민을 했던 블로거분들이 많으실거라 예상되는데, 위의 코딩을 사용해서 잘 해결하시길 바란다. ^^ 끝.

</div>

이 부분이 보이실 것이다.

필자가 쓰는 티스토리 스킨은 반응형스킨인 Fastboot 1.6.2 버전이다.

과거의 티스토리 스킨은 PC형과 모바일형으로 분리된 페이지를 사용했기 때문에, PC형에서 336X280 컨텐츠광고를 나란히 2개를 배치해도 별 문제가 없었다.

하지만 반응형스킨에 336X280 컨텐츠광고를 나란히 2개를 놓을 경우, 모바일 기기에서는 광고가 짤려서 애드센스 정책위반에 걸릴 수도 있다.

오늘은 반응형 스킨에서 정책위반 없이 애드센스 광고를 2개 설치하는 방법에 대해 자세히 알아보도록 하자!

원하는 형태의 광고 구상하기

애드센스를 해보신 분이라면 잘 아시겠지만, 336X280 광고가 320X250보다 클릭률이 높다. 이는 336X280 광고가 사이즈가 더 크기 때문인데, 안타까운건 336X280 크기는 모바일에서는 광고 일부분이 잘려서 사용할 수 없다. 모바일에서 가능한 최대 크기는 320X250 이다.

필자는 모바일에서 볼때는 320X250 크기의 광고가 1개만 나오도록, 그리고 PC에서 볼때는 336X280 광고가 나란히 2개가 나오도록 코딩을 하고 싶다. 과연 이게 가능할까?

정답은.. 두둥! 가능하다! 지금부터 여러분께 차근차근 알려드리겠다.

일단 정리하자면 필자가 원하는 광고 배치 구상도는 다음과 같다.

▶ 필자가 원하는 애드센스 광고 배치 구상도

① 반응형 스킨을 PC에서 보았을 때, 336X280 광고가 나란히 2개가 나오도록 한다.

② 반응형 스킨을 모바일에서 보았을 때, 320X250 광고가 1개만 나오도록 한다.

③ 위의 2개의 요건을 하나의 코딩으로 완성한다.

그림으로 표현하자면 위와 같을 것이다. 이걸 한번 코딩으로 만들어보도록 하겠다.

애드센스 상단 반응형광고 2개 설치 코딩방법

▶ 첨부파일

반응형광고코드.txt

<div align="center">

<span>

<style>

.myads1 { width:320px; height: 250px; }

@media(min-width: 450px) { .myads1 { width: 336px; height: 280px; } }

</style>

<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle myads1" style="display:inline-block" 

data-ad-client="ca-pub-xxxxxxxx" 

data-ad-slot="xxxxxxxx"></ins>

<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

</span>

<span style="margin-left: 20px;">

<style>

.myads2 { display:none; }

@media(min-width: 1100px) { .myads2 { width: 336px; height: 280px; } }

</style>

<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><ins class="adsbygoogle myads2" style="display:inline-block" 

data-ad-client="ca-pub-xxxxxxxx" 

data-ad-slot="xxxxxxxx"></ins>

<script>

(adsbygoogle = window.adsbygoogle || []).push({});</script>

</span>

</div>

이 코딩은, 반응형광고 코드를 넣어서 만든 것이다. 본문의 가로폭이 450px 이하일 때에는 320X250 광고 1개만 나오도록 코딩하였고, 가로폭이 450px ~ 1100px 사이일 경우 336X280 광고 1개, 그리고 본문 사이즈가 1100px 이상일 때에는 336X280 광고가 나란히 2개가 배치되도록 한 코딩이다.

여러분이 수정할 부분은, 파란색 부분을 여러분의 반응형광고코드 안에 있는 데이터로 집어넣으면 된다. 주의할 것! 일반 컨텐츠광고가 아닌, 반응형광고로 집어넣어야 한다!

여러분의 애드센스 광고코드에 들어가서, 위의 두줄만 복사해서 필자가 만든 코드에 붙여넣기하면 된다.

 

코드 구현 검증

위에서 만든 코드는 어디다가 집어넣어야 할까? 아마 Fastboot 스킨 뿐만 아니라 대부분의 스킨도 공통적으로 적용할 수 있을 것이다. 

먼저 HTML/CSS 편집창에 들어간다.

HTML 수정창에서 ##_article_rep_desc 를 검색한다.

<div class="article">

"광고코드 삽입"

</div>

이 부분이 보이실 것이다. 바로 윗줄에, 즉 <div태그와 사이에 위의 코드를 집어넣으면 본문 상단에 반응형광고가 나타나며, </div> 태그 사이에 코드를 집어넣으면 본문 하단에 나타나게 된다.

만약 여기까지 잘 따라오셨다면 아마 광고가 제대로 구현될 것이다. 제대로 구현되는지는 아래 사이트에서 참고해보시길 바란다.

http://troy.labs.daum.net/

필자도 위의 링크로 들어가 광고가 제대로 구현되어있는지 확인해보았다.

갤럭시 노트4에서의 화면이다. 의도한대로 320X250 크기 1개만 노출되고 있다.

이번에는 PC화면으로 보았다. 역시 의도한대로 336X280 크기 2개가 나란히 노출되고 있다.

오늘은 애드센스 반응형광고 2개를 본문 상단에 나란히 넣는 방법에 대해 알아보았다. 추가로 모바일기기에서는 1개만 나오도록 코딩해보았는데, 제대로 먹히는 것을 확인하였다.

아마 필자와 같은 고민을 했던 블로거분들이 많으실거라 예상되는데, 위의 코딩을 사용해서 잘 해결하시길 바란다. ^^ 끝.

바로 윗줄에, 즉 <div태그와

필자가 쓰는 티스토리 스킨은 반응형스킨인 Fastboot 1.6.2 버전이다.

과거의 티스토리 스킨은 PC형과 모바일형으로 분리된 페이지를 사용했기 때문에, PC형에서 336X280 컨텐츠광고를 나란히 2개를 배치해도 별 문제가 없었다.

하지만 반응형스킨에 336X280 컨텐츠광고를 나란히 2개를 놓을 경우, 모바일 기기에서는 광고가 짤려서 애드센스 정책위반에 걸릴 수도 있다.

오늘은 반응형 스킨에서 정책위반 없이 애드센스 광고를 2개 설치하는 방법에 대해 자세히 알아보도록 하자!

원하는 형태의 광고 구상하기

애드센스를 해보신 분이라면 잘 아시겠지만, 336X280 광고가 320X250보다 클릭률이 높다. 이는 336X280 광고가 사이즈가 더 크기 때문인데, 안타까운건 336X280 크기는 모바일에서는 광고 일부분이 잘려서 사용할 수 없다. 모바일에서 가능한 최대 크기는 320X250 이다.

필자는 모바일에서 볼때는 320X250 크기의 광고가 1개만 나오도록, 그리고 PC에서 볼때는 336X280 광고가 나란히 2개가 나오도록 코딩을 하고 싶다. 과연 이게 가능할까?

정답은.. 두둥! 가능하다! 지금부터 여러분께 차근차근 알려드리겠다.

일단 정리하자면 필자가 원하는 광고 배치 구상도는 다음과 같다.

▶ 필자가 원하는 애드센스 광고 배치 구상도

① 반응형 스킨을 PC에서 보았을 때, 336X280 광고가 나란히 2개가 나오도록 한다.

② 반응형 스킨을 모바일에서 보았을 때, 320X250 광고가 1개만 나오도록 한다.

③ 위의 2개의 요건을 하나의 코딩으로 완성한다.

그림으로 표현하자면 위와 같을 것이다. 이걸 한번 코딩으로 만들어보도록 하겠다.

애드센스 상단 반응형광고 2개 설치 코딩방법

▶ 첨부파일

반응형광고코드.txt

<div align="center">

<span>

<style>

.myads1 { width:320px; height: 250px; }

@media(min-width: 450px) { .myads1 { width: 336px; height: 280px; } }

</style>

<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle myads1" style="display:inline-block" 

data-ad-client="ca-pub-xxxxxxxx" 

data-ad-slot="xxxxxxxx"></ins>

<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

</span>

<span style="margin-left: 20px;">

<style>

.myads2 { display:none; }

@media(min-width: 1100px) { .myads2 { width: 336px; height: 280px; } }

</style>

<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><ins class="adsbygoogle myads2" style="display:inline-block" 

data-ad-client="ca-pub-xxxxxxxx" 

data-ad-slot="xxxxxxxx"></ins>

<script>

(adsbygoogle = window.adsbygoogle || []).push({});</script>

</span>

</div>

이 코딩은, 반응형광고 코드를 넣어서 만든 것이다. 본문의 가로폭이 450px 이하일 때에는 320X250 광고 1개만 나오도록 코딩하였고, 가로폭이 450px ~ 1100px 사이일 경우 336X280 광고 1개, 그리고 본문 사이즈가 1100px 이상일 때에는 336X280 광고가 나란히 2개가 배치되도록 한 코딩이다.

여러분이 수정할 부분은, 파란색 부분을 여러분의 반응형광고코드 안에 있는 데이터로 집어넣으면 된다. 주의할 것! 일반 컨텐츠광고가 아닌, 반응형광고로 집어넣어야 한다!

여러분의 애드센스 광고코드에 들어가서, 위의 두줄만 복사해서 필자가 만든 코드에 붙여넣기하면 된다.

 

코드 구현 검증

위에서 만든 코드는 어디다가 집어넣어야 할까? 아마 Fastboot 스킨 뿐만 아니라 대부분의 스킨도 공통적으로 적용할 수 있을 것이다. 

먼저 HTML/CSS 편집창에 들어간다.

HTML 수정창에서 ##_article_rep_desc 를 검색한다.

<div class="article">

"광고코드 삽입"

</div>

이 부분이 보이실 것이다. 바로 윗줄에, 즉 <div태그와 사이에 위의 코드를 집어넣으면 본문 상단에 반응형광고가 나타나며, </div> 태그 사이에 코드를 집어넣으면 본문 하단에 나타나게 된다.

만약 여기까지 잘 따라오셨다면 아마 광고가 제대로 구현될 것이다. 제대로 구현되는지는 아래 사이트에서 참고해보시길 바란다.

http://troy.labs.daum.net/

필자도 위의 링크로 들어가 광고가 제대로 구현되어있는지 확인해보았다.

갤럭시 노트4에서의 화면이다. 의도한대로 320X250 크기 1개만 노출되고 있다.

이번에는 PC화면으로 보았다. 역시 의도한대로 336X280 크기 2개가 나란히 노출되고 있다.

오늘은 애드센스 반응형광고 2개를 본문 상단에 나란히 넣는 방법에 대해 알아보았다. 추가로 모바일기기에서는 1개만 나오도록 코딩해보았는데, 제대로 먹히는 것을 확인하였다.

아마 필자와 같은 고민을 했던 블로거분들이 많으실거라 예상되는데, 위의 코딩을 사용해서 잘 해결하시길 바란다. ^^ 끝.

사이에 위의 코드를 집어넣으면 본문 상단에 반응형광고가 나타나며, </div> 태그 사이에 코드를 집어넣으면 본문 하단에 나타나게 된다.

만약 여기까지 잘 따라오셨다면 아마 광고가 제대로 구현될 것이다. 제대로 구현되는지는 아래 사이트에서 참고해보시길 바란다.

http://troy.labs.daum.net/

필자도 위의 링크로 들어가 광고가 제대로 구현되어있는지 확인해보았다.

갤럭시 노트4에서의 화면이다. 의도한대로 320X250 크기 1개만 노출되고 있다.

이번에는 PC화면으로 보았다. 역시 의도한대로 336X280 크기 2개가 나란히 노출되고 있다.

오늘은 애드센스 반응형광고 2개를 본문 상단에 나란히 넣는 방법에 대해 알아보았다. 추가로 모바일기기에서는 1개만 나오도록 코딩해보았는데, 제대로 먹히는 것을 확인하였다.

아마 필자와 같은 고민을 했던 블로거분들이 많으실거라 예상되는데, 위의 코딩을 사용해서 잘 해결하시길 바란다. ^^ 끝.