본문 바로가기
웹 개발/구글애드센스

구글애드센스 | 티스토리 홈화면 상단 광고

by KISCH 2020. 5. 8.
반응형

 

 

 

애드센스

 

 

 

 애드센스 광고 만들기

 

 사이즈

+ 홈화면 광고는 자동광고를 넣을 경우 인라인 광고가 자동으로 들어갑니다.

+ 상단에 긴 리더보드 광고와 카테고리 사이드 바 광고 정도로 만들수 있습니다.  

 

 

 광고만들기

+ 애드센스 > 광고 > 개요 > 상단에 '광고단위기준' 탭

 

+ 신규 광고 단위 만들기 > 디스플레이 광고 선택

구글애드센스

 

+ 수평형으로 선택 하시고 광고 크기는 반응형으로 해 주세요.

+ 코드가 뜨면 일단 창 그대로 두시고 티스토리로 넘어갑니다.

 

 

 

 

 

  티스토리 광고 넣기

 

 CSS

+ 스킨편집 >> CSS 에 다음 코드를 삽입해 리더보드광고 자리를 마련해 줍니다.  

 

#header .leaderboard {
position: relative;
max-width: 1080px; 
height: 90px; 
margin: 0 auto; 
}

 

 HTML

 

+ 스킨편집 >> HTML 에서 Ctrl F 누르시고 blog_menu를 검색해주세요

 

애드센스삽입

  

 

 

+ 애스센스에서 아까 만든 광고 코드를 복사해 blog_menu 다음에 있는 </div>와 </header> 사이에 붙여넣기 합니다.

 

			
		</nav>
	</div>
		
	<!-- 메인 상단 728by90 -->
        <div class="leaderboard" align="center">
            <script async src="https://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="horizontal"
                     data-full-width-responsive="true"></ins>
            <script>
                     (adsbygoogle = window.adsbygoogle || []).push({});
            </script>
        </div>
		
</header>

 

 

+ data-ad-format = "auto" 를 horizontal 로 바꿔주세요.

 

애드센스홈상단

 

+ 메인 화면 상단에 딱 맞게 들어갔습니다.

 

애드센스홈상단모바일

 

 

+ 반응형 광고로 제작했기 때문에 모바일에서도 딱 맞게 들어가네요.

 

 

 

 

 

 

 

 

 

 

 

관련 포스트

구글애드센스 | 광고의 종류

구글애드센스 | 광고 삽입

구글애드센스 | 광고 꾸미기

구글애드센스 | 티스토리 본문 상단 광고 2개

구글애드센스 | ads.txt 문제

 

 

 

 

 

 

반응형

댓글