티스토리 애드센스 하단 광고2개, 모바일에서는 1개로 보이게 하는 방법

이번글은 많은 분들이 알고 계시지만 아직 애드센스를 처음 시작하는 분들이 많이 궁금해하며 질문을 주시는 부분 중 하나인 티스토리 애드센스 하단 광고2개, 모바일에서는 1개로 보이게 하는 방법에 대해서 함께 알아 볼텐데요. 

애드센스 입문자 분들께서 많이 묻는 질문 중 하나가 바로 "데스크탑에서 본문하단에 336X280 사이즈 광고 단위 2개가 보이는데 모바일로 보면 하나만 나오네요? 어떻게 하는 거에요?"라는 질문인데요.

제 티스토리 블로그 스킨에 적용중인 응용소스를 바탕으로 안내해 드리겠습니다. 코드만 이해하시면 포스팅 상단이나 분문 중간 어느 위치든 응용이 가능 하세요. 자 그럼 시작해 볼게요. 

■티스토리 애드센스 하단 광고2개, 모바일에서는 1개로 보이게 하는 방법

아래는 제 티스토리 블로그의 하단의 데스크탑 화면에서 본 모습입니다. 336X280 광고 단위 2개가 노출되어지는 모습니다. 저의 경우는 본문 상단에 728 사이즈 광고 1개와 하단에 2개 이렇게 3개만 노출 시키는 글이 많으며 모바일 화면에서는 상단 300X250 1개, 하단 336X280 1개 이렇게 2개만 노출되어 집니다.

광고가 많다고 CPC가 높아지는 것도 아니고 오히려 단가가 하락 되는 경우도 있기 때문에 처음엔 광고 개수와 위치들을 변경해가며 자신의 블로그에 맞는 최적의 광고 위치와 개수를 찾으시는 것이 중요합니다. 저의 경우는 지금의 광고 위치와 개수였을 때가 가장 안정적이었기 때문에 지금 이 상태를 유지 중입니다.

▼ 티스토리 애드센스 하단 광고2개, 모바일에서는 1개로 보이는 빈응형 광고코드

아래의 코드가 800px 이상에서는 336X280 광고단위 2개로 보여지며, 모바일에서는336X280 광고단위 1개로 보여지는 반응형 광고코드 입니다. 애드센스 반응형 광고코드를 미디어쿼리를 응용해 만든 코드입니다. 애드센스 측에서는 허용을 하고 있는 방법이니 안심하시고 사용하셔도 됩니다. 단, 반응형 광고코드로만 만드셔야 합니다. 

우클릭이 안돼 텍스트문서로 광고코드를 올려 둘게요. 받으셔서 사용하시기 바랍니다. 

하단광고2개모바일1개.txt

<div class="adsense_bottom" style="text-align: center;">

<span>

<style>

.bottom1 { width: 336px; height: 280px; box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.2); }

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

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

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

</style>

<ins class="adsbygoogle bottom1"

style="display:inline-block;"

data-language="ko"

data-ad-client="ca-pub-자신의애드센스게시자ID코드"

data-ad-slot="자신의애드센스반응형광고코드">

</ins>

<script>

(adsbygoogle = window.adsbygoogle || []).push({});

</script></td>

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

<style>

.bottom2 { display: none; }

@media ( min-width: 800px ) { .bottom2 { width: 336px; height: 280px; margin-left: 30px; box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.2); } }

</style>

<ins class="adsbygoogle bottom2"

     style="display:inline-block;"

     data-language="ko"

     data-ad-client="ca-pub-자신의애드센스게시자ID코드"

     data-ad-slot="자신의애드센스반응형광고코드">

     </ins>

<script>

(adsbygoogle = window.adsbygoogle || []).push({});

</script>

</span>

</div>

▼ 우선 아래에 보이시는 bottom1의 @media를 보시면 세 가지 px로 나뉘어진것을 확인 할 수 있습니다. 이것은 쉽게 말씀 드리면 첫번째 360px에서 width:336px, height:280px 말은 광고가 보여지는 해상도가 360px~399px까지는 336X280로 보여지게 된다는 말인 것입니다.

두번째 400px에서늬 336X280은 광고가 보여지는 해상도가 400px~799px까지도 336X280로 보여진다는 말인 것이죠. 그리고 세번째 800px도 같아요, 보여지는 해상도거 800px 이상일땐 주로 데스크탑 화면이 여기에 해당됩니다. 800px이상에서도 336X280으로 보여지게 된다는 말인 것입니다. 

이 광고 단위는 자기가 판단해 원하는 얼마든지 변형을 주실 수 있는데요. 주로 하단의 경우 336X280 2개나 336X280 1개, 300X250 1개 이렇게 2개를 노출 시키는 분들도 있습니다. 

.bottom1 { width: 336px; height: 280px; box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.2); }

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

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

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

▼ 아래는 하단광고 우측코드인데요. 잘 보시면 좌측과 달리 bottom2로 되어 있는것을 알수 있습니다. 좌우가 이름이 같게하면 안되니 원하는 사이즈 노출이 제대로 안되니 주의하시구요. 

bottom2 옆을 보시면 bottom1과 달리 display:none 보이시죠 이것은 아래 미디어쿼리로 800px 이상일때만 광고가 단위가 노출이되고 그 이하의 px에서는 이 광고는 노출이 안되게 한다는 뜻이 되겠어요. 

bootto2의 광고 크기를 bottom2 { width: 300px; height: 250px 으로 변경 하시면 좌측의 bootom1은 336X280으로 우측의 bottom2 300X250으로 보여지게 되는 것입니다. 

.bottom2 { display: none; }

@media ( min-width: 800px ) { .bottom2 { width: 336px; height: 280px; margin-left: 30px; box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.2); } }

▼티스토리 애드센스 하단 광고2개, 모바일에서는 1개 보이는 애드센스 반응형 수정코드를 티스토리 블로그에 적용하는 방법도 간단하게 올려 둡니다. html/CSS에 넣어서 적용하는 방법이 있으나 html에 너무 많은 스크립트를 넣다보면 로딩이 느려지는 경우가 있습니다. 

티스토리는 플러그인 중에 애드센스반응형 플러그인을 제공하고 있습니다. html에 자신 없는 분들도 쉽게 붙여 넣기만으로 원하는 위치에 광고를 적용 할 수 있습니다. 

먼저 티스토리 죄측의 메뉴 중 플러그인을 선택해 줍니다. 그럼 많은 플러그인들이 있는데요. 저 같은 이미 사용중이라 맨 위에 뜬건지는 모르겠지만 맨 위에 없는 분들은 아래를 찾아보시면 "구글애드센스(반응형)"플러그인이 있을거에요. 선택해서 다음단계로 이동 합니다.

▼반응형 플러그인 하단에 제가 올려놓은 코드에서 자신의 애드센스 웹게시자 아이디와 반응형 광고코드로 수정하여 복사를 하셔서 하단의 애드센스 광고 영역에 붙여 넣기 한 후 꼭 변경사항적용을 해 주셔서 완료하시기 바랍니다. 

저도 처음에 붙여넣기하고 몇번을 새로고침해도 안되길래 봤더니 변경사항적용을 안했던 기억이나서 말이죠.

어떻게 간단하게 티스토리 애드센스 하단 광고2개, 모바일에서는 1개로 보이게 하는 방법에 대해서 알아 보았는데 도움이 되셨는지 모르겠네요.