본문 바로가기
도움되는이야기/티스토리 블로그

애드센스 반응형 기기별 배치방법

by XaXo 2016. 6. 17.
반응형




애드센스 초보자가 오늘 연습한 


애드센스 반응형 효율적 배치하는 방법


기존 반응형 애드센스를 상단에 2개 부착하고 


모바일웹 접속시 상단 1개와 하단1개로 구분되는 방식을 사용중이었는데


2016/03/10 - 반응형스킨 반응형스킨으로 애드센스 효율적 배치하기

   


상단 2개가 큰 의미가 없을것 같아


1개를 사이드바로 빼냈습니다...


2016/01/27 - 구글 애드센스 사이드바에 광고넣는 방법 





하지만 제가 지금 사용하고 있는 스킨은 태블릿, 스마트폰에서는 사이드바가 가려지기 때문에


광고가 보이는데 있어 불리한점이 있다고 판단해서


태블릿과 스마트폰에서는 다시 하단으로 위치하게끔 조절해봤습니다.


사이드바가 깔끔한게 이쁘긴 하지만 애드센스 크기를 줄였더니 


그래도 봐줄만한듯 합니다.





코드는 현재 제가 설정한 치수로 되어 있으며 


자신의 스킨 설정에 맞게 조절하여 사용하시면 됩니다.


초보라서.. 더 깔끔하게 정리하여 사용하시는분도 계실듯 합니다...


반응형 애드센스.txt




<!-- 사이드바 -->

<!-- PC 크기에서 노출 -->

<style>

.AAA { width:100%; height: 100px; text-align:center; }

@media(max-width: 768px) { .AAA { display: none; } }

@media(min-width: 769px) { .AAA { width: 300px; height: 250px; float:left; margin-left:-30px; margin-bottom:10px; } }

@media(min-width: 1440px) { .AAA { width: 300px; height: 250px; float:left; margin-left:-30px; margin-bottom:10px; } }

</style>

<!-- AAA -->

<ins class="adsbygoogle AAA"

data-ad-client="구글 애드센스"

data-ad-slot="구글 애드센스"></ins>

<script>

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

</script>

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



<!-- PC 반응형 / 모바일 배너형 -->

<style>

.BBB { width:100%; height: 100px; text-align:center; }

@media(min-width: 500px) { .BBB { width: 336px; height: 280px; float:center; margin-left:20px; margin-bottom:10px; } }

@media(min-width: 1500px) { .BBB { width: 970px; height: 250px; text-align:center; } }

</style>

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

<ins class="adsbygoogle BBB"

style="display:inline-block"

data-ad-client="구글 애드센스"

data-ad-slot="구글 애드센스"></ins>

<script>

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

</script>

  


<!-- 모바일에서만 보이기 -->

<div style="text-align:center">

<br>

<style type="text/css">

.CCC { display:inline-block; width: 300px; height: 250px; }

@media(max-width: 768px) { .CCC { width: 336px; height: 280px; } }

@media(min-width: 769px) { .CCC { display: none; } }

</style>

<!-- CCC -->

<ins class="adsbygoogle CCC "

data-ad-client="구글 애드센스"

data-ad-slot="구글 애드센스"</ins>

<script>

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

</script>

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

</div> 



 


반응형