애드센스 강좌 / 티스토리 / 본문 상단 오른쪽에 넣는 방법
본문 상단에 있는 애드센스 광고가 제일 효과가 좋다고 알려져있습니다. PC에서는 본문 상단 오른쪽에, 모바일에서는 본문 상단에 나오도록 반응형 광고를 넣는 방법을 소개합니다.
코드를 넣을 위치 찾기
HTML에서 <s_article_rep>와 </s_article_rep> 사이에 있는 [##_article_rep_desc_##]를 찾습니다.
[##_article_rep_desc_##]
그 코드 앞에 애드센스 광고 코드를 넣으면 본문 상단에 광고가 나옵니다.
광고 넣기
다음과 같이 코드를 넣습니다. AdSense Code는 반응형 광고 코드로 대체합니다.
<style>
.jb-ad { float: right; margin: 5px 0px 20px 20px; width: 336px; height: 280px; }
@media ( max-width: 1024px) { .jb-ad { width: 300px; height: 250px; } }
@media ( max-width: 767px) { .jb-ad { float: none; margin: 20px 0px; width: 100%; height: auto; } }
</style>
<div class="jb-ad">
AdSense Code
</div>
광고는 다음과 같이 나옵니다.
- 기본 모양 : 본문 상단 오른쪽 / 336x280 크기의 광고
- 1024px 이하 : 본문 상단 오른쪽 / 300x250 크기의 광고
- 767px 이하 : 본문 위 / 가로 크기 100%의 광고 (가로폭에 딱 맞게 나오거나 조금 작게 나옵니다.)