블로그 본문 첨부사진 아래에 자동 구글광고삽입::어나일언덕

블로그에서 광고효과가 가장 좋은 위치는 아무래도 정보를 담고 있는 본문입니다.

사이드바는 모바일에서는 광고효과가 거의 없고 본문 하단 아래의 광고들은 노출되기도 전에 뒤로 가기 버튼이 눌러지기 일쑤기 때문입니다. 모바일에서 본문 상단광고는 반대로 로딩이 되기도 전에 올라가버리기도 합니다.

그래서 본문에 광고를 죄다 쑤셔 박는 것이 가장 효과가 좋은 방법이지만 본문에 일일이 광고코드를 집어 넣는 것은 여간 귀찮은 일이 아닐 수 없습니다. 나중에 본문을 수정하는 경우가 생기면 일이 만많치 않게 커지게 되기도 합니다.

보통 글을 쓰다보면 본문에 이미지가 한두개씩은 반드시 들어가게 되는데 이 글에서는 본문에 일일이 광고코드를 넣지 않고도 본문 이미지 아래에 자동으로 광고가 삽입되게 하는 방법을 공유하려고 합니다.

설명에 앞서 이 블로그의 다른 글들을 혹은 이 글을 살펴보면 3번째 이미지 아래 구글광고가 삽입되어 있습니다.

다른글 둘러 보기
[공황장애 정의, 증상, 진단, 치료에 관한 정보]
[공황장애에 좋은 음식들에 관한 정보]

우선 위와 같이 광고를 하나 만들어서 개인식별코드와 광고코드를 따로 복사해 둡니다.

HTML 코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!-- 본문 이미지 아래 광고 -->
<div id="imgadslot">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-개인식별코드"
     data-ad-slot="광고코드"
         data-ad-format="auto"
     ></ins>
</div>
<script type="text/javascript">
$(function(){
  var numimg = parseInt($(".imageblock").length,10);
  if(numimg>0){ 
    if(window.getWindowCleintWidth()>=768){
        $("#imgadslot").css({"display":"block","height" : "280px", "width" : "336px", "margin" : "10px auto"});
      }else{
        $("#imgadslot").css({"display":"block","height":"250px","width":"300px", "margin" : "10px auto"});
      }
     $(".imageblock:eq(2)").append($("#imgadslot"));
    (adsbygoogle = window.adsbygoogle || []).push({});
  }else{
    $("#imgadslot").remove();
  }
});
</script>
Colored by Color Scripter
cs