블로그스팟 VIETRICK 테마 POST ADS1,2 애드센스 레이아웃 깨짐 해결하기: 본문과 사이드바 겹침 현상 해결법

운영하는 블로그에 애드센스를 붙였는데 광고가 본문 영역을 벗어나 사이드바랑 겹치는 경험 있으신가요? 블로그를 꾸미는 과정에서 가장 짜증나는 순간 중 하나죠. 제 블로그도 처음엔 같은 문제로 머리를 쥐어뜯었던 기억이 생생합니다. 오늘은 그 고통의 시간을 줄여드릴 팁들을 정리해봤어요.

왜 이런 문제가 생기는 걸까요?

광고가 본문 영역을 벗어나는 이유는 보통 다음과 같은 원인이 있습니다:

• 광고 컨테이너에 너비 제한이 없음
• CSS 오버플로우 설정 미흡
• 반응형 디자인 처리 부족
• 애드센스 자체 스타일과 블로그 테마 충돌

이게 참 민망한 게, 방문자들이 보기에도 얼마나 어색해 보이겠어요. 블로그 퀄리티가 급 추락하는 느낌적인 느낌... 😅

해결 방법 (간단합니다)

테마파일 직접 수정하기!

블로거 설정에서 테마-HTML편집으로 들어가서 아래의 코드를 찾으세요. 

<b:section cond="data:view.isPost" id="vtrick-pro-main-before-ad" maxwidgets="1" name="Post ADS 1" showaddelement="yes">
    <b:widget id="HTML4" locked="false" title="POST ADS1" type="HTML" version="2" visible="false">
        <b:widget-settings>
            <b:widget-setting name="content">
                <![CDATA[<script async="async" crossorigin="anonymous" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=아이디디"></script>
                <!--디스플레이 수평형-->
                <ins class="adsbygoogle" data-ad-client="ca-pub-아이디디" data-ad-format="auto" data-ad-slot="아이디디" data-full-width-responsive="true" style="display: block;"></ins>
                <script>
                    (adsbygoogle = window.adsbygoogle || []).push({});
                </script>]]>
            </b:widget-setting>
        </b:widget-settings>
        <b:includable id="main">
            <b:include name="html-content">
        </b:include></b:includable>
    </b:widget>
</b:section>

Vietrick 테마의 경우 Post ADS 1, Post ADS 2 두개의 위젯이 있습니다. Post ADS 2는 위 코드 바로 아래에 있을거예요. 

위 코드부분에서 b:includable 부분을 아래와 같이 대체하시면 됩니다. 광고의 너비를 제한하고 overflow를 hidden으로 설정하여 다른 요소와 겹치는 것을 방지하는 거예요.

<b:includable id="main">
  <b:include name="html-content">
</b:include></b:includable>

요거를 아래와 같이 바꾸시면 끝!!

<b:includable id='main'>
  <div style="width:100%; max-width:100%; overflow:hidden;">
    <b:include name='html-content'/>
  </div>
</b:includable>

참 간단하죠? 이렇게 수정하면 아래와 같이 에드센스 레이아웃이 더이상 겹쳐있지 않은 것을 확인 할 수 있어요. Post ADS 2 부분도 수정하실 분은 똑같이 적용하시면 됩니다. 

물론 Adsense 붙여넣는 테그는 반응형으로 선택하셨다면,  

data-full-width-responsive="true"

일겁니다. True로 설정되어 있는지 확인하세요.