반응형 애드센스 광고를 적용하는 방식으로 블로그에 글을 시작을로 하지않고 사진으로 시작하는 블로그에는 적합하지 않아 보이는 방식입니다.
글 없이 div 태그로 시작하는 문서에서도 글은 오른쪽으로 밀리지만 태그는 광고와 겹쳐저서 구글 애드센스 정책위반 사항이 될 수도 있기에 신중하게 적용하셔야 합니다.
반응형 광고 코드를 받아 http://cfs.tistory.com/custom/blog/168/1686514/skin/images/ResponsiveAdsenseHelper.html 등의 사이드나 직접 맞춤 코드를 추가 합니다.
광고 코드 수정 메뉴얼 : https://support.google.com/adsense/answer/6307124?hl=ko&ref_topic=1307438
아래 사항은 직접 스킨을 수정하지 않고 플러그인을 이용하여 적용한 예제입니다. 플러그인을 사용 않고 스킨에 직접 코드를 넣을 경우 아래와 같이 적용 되지 않을 수 있습니다.
반응형 애드센스 맞춤 코드 수정
<center>
<style>
.Speed_INK_Land_Top {
width: 320px;
height: 250px;
}
@media(min-width: 450px) {
.Speed_INK_Land_Top {
float: left;
margin: 0 20px 10px 0;
width: 336px;
height: 280px;
}
}
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle Speed_INK_Land_Top" style="display:inline-block" data-ad-client="ca-pub-xxxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</center>기본적으로 450px 이상의 화면에서는 매우 인기있는 사이즈인 사각형 336px 280px 사이즈를 노출 하라는 코드 입니다. 예전엔 두개 배치 였지만 반응형 블로그 들이 많아지면서 상단 2단 광고는 처리가 부담스러워 대부분 가로나 사각형 하나만 적용하는데 저는 336×280 사이즈를 선호하기에 ‘float: left‘ 속성을 사용하여 깔끔하게 정리 합니다.’<center>…</center>‘ 태그로 450px 이하의 화면에서는 중앙 정열을 하고, ‘margin: 0 20px 10px 0‘마진 속성으로 컨텐츠의 거리를 만들어 줍니다.
블로그 폭이 1060으로 PC에서 적용된 모습입니다.
1024 x 768 화면 사이즈에서 는 PC 와 별만 차이없이 깔끔하게 적용됩니다.
414 x 736 는 대부분 스마트폰 일겁니다. 450 이하로 줄버리면 flot 속성이 해제 되면서 가로폭 전체를 사용하고 center 태그로 가운데 정열됩니다.
※애드센스 정책상 모바일에서 300×250 초과는 위반이며 320×100 이상의 광고가 첫 화면에 노출되어서는 안 된다고 하니 유의하시기 바랍니다..※
이미지로 시작하는 블로그는 위와 같이 참으로 엉성하게 노출됩니다. 본문을 수정하던지 위와같은 글이 많이 없다면 저 처럼 그냥 두는것도……margin: 0 20px 10px 0;가 없으면 아래 이미지와 붙어 버립니다.
div 태그에 테두리를 적용한 글에서는 글은 밀리지만 테두리가 밀려 위험할 수 도있고 보기에도 좋지 않기에 광고 사이즈 만큼의 내용을 확보한 후에 div 태그를 사용하시는게 좋겠습니다. 저는 블로그 초기에 저런 형태의 글이 많기에 스킨에 .article div { clear:both; } 를 추가하여 사용중입니다. 본문 선택자 ‘article’ 스킨마다 다릅니다. 자신에 맞는 선택자를 적용해야 합니다. ):
.article div { clear:both; } 적용 후 광고와 겹치지는 않지만 역시나 매우 엉성한..
위 방법은 저에게만 해당되는 내용일 수도 있습니다. 스킨이나 여러가지 이유로 적용되지 않을 수 있기에 신중하게 적용 바랍니다.