본문 우측 상단은 실적이 우수한 포지션입니다.
광고를 상단에 게재하는 것이 실적에 좋기때문에 336x280 사이즈의 광고들 두 개씩 달고 있는 블로그들도 많이 봤지만, 광고가 너무 밀집해 있으면 산만한 느낌을 줄 수 있으니 우측에 한 개만 달아보도록 할게요.

* 이 방법은 구글의 애드센스 도움말에서 안내한 방법으로, 허용되는 변경사항입니다!
* css가 처음이거나 다루기 어려우신 분들은 그대로 따라 해주세요! 따로 그림설명이 필요없을 정도로 간단합니다! :)

PC에서는 본문 우측 상단에 336x280 사이즈의 광고를,
태블릿과 모바일에서는 가로가 긴 직사각 광고가 나타나도록 하려고 합니다.

# 디스플레이 반응형 광고 만들기

반응형 광고 단위를 생성합니다.

• 애드센스 >  광고 >  개요 >  광고 단위 >  디스플레이 광고를 클릭합니다.
• 광고 크기는 반응형, 광고 단위 이름은 영어로 작성 (예: read )하고 광고 코드를 메모장에 복사하고 저장해 둡니다.

# 반응형 광고 코드 변경하기

사용 환경에 광고 크기가 변할 수 있도록 스타일을 정해 줄 것입니다.
메모장을 새로 열어 아래 코드를 붙여 넣기 합니다.
가로 (width) 세로 (height) 를 예시와 다르게 하려면 값을 수정하세요!

<style>
/* 모바일에서 가로 100% 높이 50px; */
.read { width:100%; height: 50px; }
/* 태블릿에서 가로 100% 세로 100px; */
@media(min-width: 500px) { .read { width: 100%; height: 100px; } } 
/* pc에서 가로 336px 세로 280px 오른쪽 정렬 */
@media(min-width: 800px) { .read { width:336px; height: 280px; float: right; } }
</style>

다음, 위에서 read라는 이름으로 만들었던 디스플레이 광고 코드를 </style> 아래에 붙여 넣습니다. 아래와 같은 구조가 되겠죠?

<style>
/* 모바일에서 가로 100% 높이 50px; */
.read { width:100%; height: 50px; }
/* 태블릿에서 가로 100% 세로 100px; */
@media(min-width: 500px) { .read { width: 100%; height: 100px; } } 
/* pc에서 가로 336px 세로 280px 오른쪽 정렬 */
@media(min-width: 800px) { .read { width:336px; height: 280px; float: right; } }
</style>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- read -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-XXXXXXX11XXX9"
     data-ad-slot="8XXXXX1"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

여기까지 순서대로 했다면 위 코드 중에 표시된 네 군데를 수정해야 합니다. 
다음을 찾아 변경합니다.

• <ins class="adsbygoogle" 을  <ins class="adsbygoogle read" 로 변경합니다.
• style="display:block" 을  style="display:inline-block" 로 변경합니다.
• 아래 두 줄을 찾아 삭제합니다. 

data-ad-format="auto"
data-full-width-responsive="true"

# 완성된 코드 예시

<style>
.read { width:100%; height: 50px; }
@media(min-width: 500px) { .read { width: 100%; height: 100px; } }
@media(min-width: 800px) { .read { width:336px; height: 280px; float: right; } }
</style>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- read -->
<ins class="adsbygoogle read"
     style="display:inline-block"
     data-ad-client="ca-pub-XXXXXXX11XXX9"
     data-ad-slot="8XXXXX1"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

이제 사이트에 본문이 시작하는 곳 바로 아래에 지금 작성한 코드를 붙여 넣기 하고 광고 크기가 적용됐는지 확인합니다.

끝!