애드센스 광고 게재하기_ 본문 좌측하단(다른글 보기 옆)

제 포스팅을 보면

본문 하단의 [카테고리 다른 글 보기] 왼쪽에 광고가 게재되어 있습니다.

 

이 방법은 저번 포스팅에서 다룬 본문 우측상단 광고 게재방법 중

(☞ 애드센스 광고 게재하기_ 본문 우측상단)

Readiz 님의 JS를 이용한 광고게재 방법과 통합니다.

단, 이 방법은 Bootstrap 기반으로 한 스킨에서 유효하다고 합니다.

(http://blog.readiz.com/206)

 

Readiz님께서 알려주신 코드는 모바일에서는 보이지 않도록 되어있는데,

애드센스는 스크롤 없이 볼 수 있는 부분에만 광고 크기를 제한하니

굳이 본문 하단의 광고를 모바일에서 보이지 않게 할 필요가 없단 생각이 듭니다.

 

전 모바일에도 보일 수 있도록 하되, 광고 크기가 바뀌도록 수정하였으며,

실제 적용이 용이하도록 텍스트를 첨부하여드렸습니다.

포스팅을 죽 읽어보시고, 아래 세가지 방법 중 원하는 방식의 광고를 게재하시면 됩니다.   

 

선택 1) 모바일에서 사라지도록

선택 2) 데탑, 모바일에서 모두 보이도록

선택 3) 모바일에서 보이되, 광고 크기 바뀌도록

 

 

 

#1. 광고 코드 준비하기  

 

본문 상단우측 광고 게재하기를 따라하셨다면, 이 과정은 이제 익숙하실 거예요.

이미 만들어놓은 광고단위나 새로 생성한 광고단위를 통해

광고 코드에서 본인ID와 광고ID를 메모해와야 합니다.

 

선택 1), 2)를 하신다면 336x280 크기의 고정형 광고코드 하나만 생성하시면 됩니다.

(아, 물론 반응형 코드여도 상관없습니다만, 반응형 광고는 왠지 로딩이 느린 것 같은 느낌이 들어서요. 어쨌든 취향껏!)

 

선택3을 하신다면

반응형 광고 단위를 준비하거나 

336x280과 또 하나의 모바일용 크기(본인 임의)의 고정형 코드 총 2개를 준비해야겠죠?

저는 선택 3)을 적용할거구요, 반응형 광고 코드로 하겠습니다.

 

광고코드를 복사하여 메모장에 붙이세요.

 

 

복사해온 광고 코드에서 우리가 필요로 하는 정보는 딱 2개 입니다.

data-ad-client 애드센스 고유 본인ID와

data-ad-slot 광고ID !

 

 

 

 

 

#2. Fastboot v1.6.2 좌측하단 광고 코드

 

좌측하단에 광고를 게재하기 위한 코드를 본인의 환경에 맞게 수정해봅시다.

정확히는 본문 좌측하단에 게재..라기보다

[카테고리 다른 글 보기]의 왼쪽에 게재..라고 하는게 맞는 것 같네요.

 

선택 1)을 하신다면, Readiz님의 코드를 그대로 사용하면 됩니다.

이 코드는 가로너비가 768px 이상일 때만 336x280 크기의 광고가 보여지며, 모바일에서는 보이지 않습니다.

 

텍스트 파일을 참고하여, 아래 태그에 메모해 두었던 본인ID와 광고ID를 삽입하세요.

 

Fastboot 좌측하단_모바일 숨김.txt

<script>
    if(window.getWindowCleintWidth()>=768){
        var adTmp = '<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script><ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px;margin:auto" data-ad-client="본인ID" data-ad-slot="광고ID"></ins>';
        document.getElementsByClassName('another_category')[0].className+=" col-md-6";
        document.getElementsByClassName('another_category')[0].style.clear="none";
        document.getElementsByClassName('another_category')[0].outerHTML='<div style="margin:0 auto;"><div class="col-md-6" style="margin-top:20px; padding:0; text-align:center;">'+adTmp+'</div>'+document.getElementsByClassName('another_category')[0].outerHTML+'<div class="clearfix"></div></div>';
        (adsbygoogle = window.adsbygoogle || []).push({});
    }
</script>

 

자바스크립트는 넘사벽이에요. 머리가 핑글핑글..ㅠㅠ

대충 보이는 데로만 얘기하자면

If문을 사용하여 윈도우 가로너비가 768이상일 때

변수 adTmp로 정의한 애드센스 스크립트를,

another_category 클래스 왼쪽에 붙인다네요...

음.. 네..... 제 해석은 여기까지.ㅋㅋ

 

선택 2)를 하신다면, if문을 삭제해도 되고, 아래처럼 768조건을 1로 바꿔줘도 됩니다.

그 외에는 똑같아요.

 

Fastboot 좌측하단_모바일 숨기지 않음.txt

<script>
    if(window.getWindowCleintWidth()>=1){
        var adTmp = '<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script><ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px;margin:auto" data-ad-client="본인ID" data-ad-slot="광고ID"></ins>';
        document.getElementsByClassName('another_category')[0].className+=" col-md-6";
        document.getElementsByClassName('another_category')[0].style.clear="none";
        document.getElementsByClassName('another_category')[0].outerHTML='<div style="margin:0 auto;"><div class="col-md-6" style="margin-top:20px; padding:0; text-align:center;">'+adTmp+'</div>'+document.getElementsByClassName('another_category')[0].outerHTML+'<div class="clearfix"></div></div>';
        (adsbygoogle = window.adsbygoogle || []).push({});
    }
</script>

 

 

선택 3)을 하신다면,

else if를 써서 가로너비가 768px 미만일 때의 조건을 하나 더 추가하면 되겠습니다.

간단하게 else if로 통째로 추가해도 되고.... 조금 더 간결하게 코드를 정리 할 수도 있어요.

두 가지 코드를 알려드릴테니 편한대로~

 

아무튼,

저는 768px 미만일 때 320x100이 되게 할거예요.

이 320x100 사이즈는 뭐 제 취향인거구요, 본인의 블로그에 맞게 크기를 정하세요.

 

Fastboot 좌측하단_폭당 광고크기.txt

<script>
     if(window.getWindowCleintWidth()>=768){
        var adTmp = '<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script><ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px;margin:auto" data-ad-client="본인ID" data-ad-slot="광고ID"></ins>';
        document.getElementsByClassName('another_category')[0].className+=" col-md-6";
        document.getElementsByClassName('another_category')[0].style.clear="none";
        document.getElementsByClassName('another_category')[0].outerHTML='<div style="margin:0 auto;"><div class="col-md-6" style="margin-top:20px; padding:0; text-align:center;">'+adTmp+'</div>'+document.getElementsByClassName('another_category')[0].outerHTML+'<div class="clearfix"></div></div>';
        (adsbygoogle = window.adsbygoogle || []).push({});
    }
    else if(window.getWindowCleintWidth()<768) {
        var adTmp2 = '<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script><ins class="adsbygoogle" style="display:inline-block;width:320px;height:100px;margin:auto" data-ad-client="본인ID" data-ad-slot="광고ID"></ins>';
        document.getElementsByClassName('another_category')[0].className+=" col-md-6";
        document.getElementsByClassName('another_category')[0].style.clear="none";
        document.getElementsByClassName('another_category')[0].outerHTML='<div style="margin:0 auto;"><div class="col-md-6" style="margin-top:20px; padding:0; text-align:center;">'+adTmp2+'</div>'+document.getElementsByClassName('another_category')[0].outerHTML+'<div class="clearfix"></div></div>';
        (adsbygoogle = window.adsbygoogle || []).push({});
    }
</script>

 

광고ID 입력할 때 유의하세요~

반응형이라면 768px 이상이든, 768px 미만이든, 어차피 반응형이니까 통일하여 입력하면 되는데

각각의 고정형 광고코드를 사용하신다면

if문에는 336x280 광고단위의 본인ID와 광고ID를

else if문에는 320x100 광고단위의 본인ID와 광고ID를 잘 구분해서 입력해야겠죠?

다만 다른 크기 쓰실 땐 아래 else if문의 320px, 100px를 바꿔주셔야겠죠?

 

 

아래는 좀 더 간결하게 바꾼 코드입니다.

뜻하지않게 js까지 맛을 봤어요. 핑글핑글~ 어렵긴 한데 막상 공부하다보니 재밌네요 ㅎㅎ

 

Fastboot 좌측하단_폭당 광고크기2.txt

<script>
     var adTmp;

     if(window.getWindowCleintWidth()>=768){
          var adTmp = '<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script><ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px;margin:auto" data-ad-client="본인ID" data-ad-slot="광고ID"></ins>';}
     else if(window.getWindowCleintWidth()<768){
          var adTmp = '<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script><ins class="adsbygoogle" style="display:inline-block;width:320px;height:100px;margin:auto" data-ad-client="본인ID" data-ad-slot="광고ID"></ins>';}

     document.getElementsByClassName('another_category')[0].className+=" col-md-6";
     document.getElementsByClassName('another_category')[0].style.clear="none";
     document.getElementsByClassName('another_category')[0].outerHTML='<div style="margin:0 auto;"><div class="col-md-6" style="margin-top:20px; padding:0; text-align:center;">'+adTmp+'</div>'+document.getElementsByClassName('another_category')[0].outerHTML+'<div class="clearfix"></div></div>';
        (adsbygoogle = window.adsbygoogle || []).push({}); 
</script>

 

꼭 768px에 기준하지 않더라도, 가로너비 각각에 따라 광고 크기를 적절하게 맞추고 싶다면

이를 응용하여 얼마든지 수정하실 수 있으시겠죠?

예를 들어 데스크탑, 태블릿, 모바일 세가지 버전으로도 할 수 있을거구요.

 

 

 

 

#3. 광고 코드 삽입하기

 

이제 이 코드를 skin.html 에 삽입해야합니다.

관리 < 꾸미기 < HTML/CSS편집 < html 에서

[ 포스트 본문 내용 ] 을 검색하세요.

 

아래 화면을 찾으셨나요.

블로그 본문내용 치환자 [＃＃_article_rep_desc_＃＃] 바로 아래에 붙여넣기 하면 됩니다.!!!

 

이렇게 들어갑니다.

저장!

 

 

 

 

제대로 광고가 게재되었는지 확인해볼게요.

 

768px 이상일 때 ~

 

786px 미만일 때~

 

코드 때문에 어려워보이지만,

차근차근 하니 쉽죠? ^^

성공적으로 게재하셨기를 바라요.