본문 바로가기
인터넷|IT

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

by nGroovy 2016. 7. 29.
반응형

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


코드 생성

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

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
27
28
<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>
cs


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

반응형

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


코드 생성

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

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
27
28
<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>
cs


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


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

반응형
위에 생성한 코드를 삽입


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

반응형

댓글