애드센스 강좌 / 티스토리 / 본문 상단 오른쪽에 넣는 방법

본문 상단에 있는 애드센스 광고가 제일 효과가 좋다고 알려져있습니다. 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%의 광고 (가로폭에 딱 맞게 나오거나 조금 작게 나옵니다.)
상호 : 제이비 팩토리 사업자등록번호 : 189-03-00944 E-MAIL : jb@jbfactory.net 주소 : 경기도 안양시 동안구 시민대로 230, D동 874호 통신판매업신고번호 : 제2017-안양동안-0574호 호스팅서비스 : Amazon Web Services 구매안전서비스 : (주)케이지이니시스 이용약관 개인정보처리방침