티스토리 반응형 애드센스 상단 2개 배치

애드센스에서 반응형 광고 코드(AD1, AD2) 생성

코드 생성

DIV 안에 AD1, AD2 코드를 넣고 ad1, ad2 alias를 부여하여 style과 매치

<style>
    .ad1 {width: 300px; height: 250px;}
    .ad2 {width: 0px; height: 0px;}
    @media (min-width: 400px) { .ad1 { width: 336px; height: 280px; }}
    @media (min-width:1120px) { .ad1 { width: 300px; height: 250px; } .ad2 { width: 300px; height: 250px; margin-left: 5%;}}
    @media (min-width:1200px) { .ad1 { width: 336px; height: 280px; } .ad2 { width: 336px; height: 280px; margin-left: 5%;}}                            
</style>                                
                        
<div class="adstyle1" style="text-align: center; margin-bottom:80px;">
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <!-- AD1 -->
    <ins class="adsbygoogle ad1"
             style="display:inline-block"
             data-ad-client="ca-pub-개별 번호"
             data-ad-slot="개별 번호"></ins>
    <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <!-- AD2 -->
    <ins class="adsbygoogle ad2"
             style="display:inline-block"
             data-ad-client="ca-pub-개별 번호"
             data-ad-slot="개별 번호"></ins>
    <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script>    
</div>

HTML/CSS 편집으로 들어가 HTML 내의 

반응형

애드센스에서 반응형 광고 코드(AD1, AD2) 생성

코드 생성

DIV 안에 AD1, AD2 코드를 넣고 ad1, ad2 alias를 부여하여 style과 매치

<style>
    .ad1 {width: 300px; height: 250px;}
    .ad2 {width: 0px; height: 0px;}
    @media (min-width: 400px) { .ad1 { width: 336px; height: 280px; }}
    @media (min-width:1120px) { .ad1 { width: 300px; height: 250px; } .ad2 { width: 300px; height: 250px; margin-left: 5%;}}
    @media (min-width:1200px) { .ad1 { width: 336px; height: 280px; } .ad2 { width: 336px; height: 280px; margin-left: 5%;}}                            
</style>                                
                        
<div class="adstyle1" style="text-align: center; margin-bottom:80px;">
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <!-- AD1 -->
    <ins class="adsbygoogle ad1"
             style="display:inline-block"
             data-ad-client="ca-pub-개별 번호"
             data-ad-slot="개별 번호"></ins>
    <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <!-- AD2 -->
    <ins class="adsbygoogle ad2"
             style="display:inline-block"
             data-ad-client="ca-pub-개별 번호"
             data-ad-slot="개별 번호"></ins>
    <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script>    
</div>

HTML/CSS 편집으로 들어가 HTML 내의  위에 생성한 코드를 삽입

PC 환경에서 두 개 모바일 환경에서 한 개의 광고가 보이게 되며 필요시 자신의 블로그에 맞게 style의 width를 변경하시면 됩니다.

반응형

위에 생성한 코드를 삽입

PC 환경에서 두 개 모바일 환경에서 한 개의 광고가 보이게 되며 필요시 자신의 블로그에 맞게 style의 width를 변경하시면 됩니다.