티스토리 본문 중간 광고 넣기

STP90 0 174 01.03 10:15

오늘은 다양한 광고를 사용할 수 있는 AdSense 광고를

티스토리 본문 중간에 넣는 방법을 알아보겠습니다.

티스토리 본문 중간 광고 넣기를 시작하겠습니다.


506af34ea76fb2c8972a2accee848472_1578013777_2441.jpg


 


티스토리 본문 중간 광고 넣기 위해서는 기본적으로 AdSense에 가입되어 있어야 합니다.


506af34ea76fb2c8972a2accee848472_1578013777_3145.jpg


티스토리 본문 중간 광고 넣기 Google AdSense 기본 설정은 2020년 1월 2일 기준으로 작성했습니다.

Google AdSense 좌측 메뉴에서 "개요" 메뉴를 선택해주세요.


506af34ea76fb2c8972a2accee848472_1578013777_4031.jpg


"개요" 메뉴를 선택하면 우측에 "사이트기준", "광고 단위 기준" 탭 메뉴가 활성화됩니다.

티스토리 본문 중간 광고 넣기를 위해서 먼저 광고를 한 개 만들어야 합니다.

그래야 다양한 광고가 페이지에 노출됩니다.

"광고 단위 기준" 메뉴를 클릭해주세요.

506af34ea76fb2c8972a2accee848472_1578013777_4851.jpg

4개의 이미지 중에서 "디스플레이 광고"를 클랙 해주세요.

506af34ea76fb2c8972a2accee848472_1578013833_9217.jpg





"디스플레이 광고"를 클릭하면 어떤 광고인지 중앙에 나타나고, 좌측 상단에 광고 이름을 입력해주십시오.

티스토리 본문 중간 광고 넣기 위해서 광고 개수는 다양하게 만들어주셔도 됩니다.


506af34ea76fb2c8972a2accee848472_1578013833_9897.jpg

이름 입력 후 중앙에 있는 광고 형태를 "수평형"으로 선택해주세요.

티스토리 본문 중간 광고 넣기 위해서는 "수평형"이 보기 좋습니다.

"수평형"은 추천이고 블로그 스킨에 따라서 선택하시면 됩니다.



506af34ea76fb2c8972a2accee848472_1578013834_0546.jpg


티스토리 본문 중간 광고 넣기 위해서 만들어지는 광고는 반응형으로 선택해야 특정 페이지 레이아웃에 맞춰 광고가 게재됩니다.


506af34ea76fb2c8972a2accee848472_1578013834_1252.jpg


하단 "만들기"를 클릭하면 광고를 넣을 수 있는 코드가 생성됩니다.

생성된 코드를 복사해주세요.


506af34ea76fb2c8972a2accee848472_1578013834_2092.jpg

이제 티스토리 본문 중간 광고 넣기 위해서 티스토리로 이동합니다.

편집을 클릭해서 "꾸미기" -> "스킨 편집"을 클릭해주세요.


506af34ea76fb2c8972a2accee848472_1578013931_4745.jpg
506af34ea76fb2c8972a2accee848472_1578013931_5429.jpg




"스킨 편집" 클릭 후 우측에 있는 "html 편집" 버튼을 클릭해주십시오.


우측에 html 코드를 확인할 수 있습니다.

여기 Ctrl + F를 클릭해서 "##_article_rep_desc_##"을 검색해주세요.

소스 길이기 길지 않아서 스크롤로 중간쯤 위치해있습니다.


<div id="xyz">
<!-- 티스토리 본문 중간 광고 삽입 -->
중간 광고 코드를 넣어주세요.
</div>
<script>
document.getElementById('abc').appendChild(document.getElementById('xyz'));
</script>

상위 코드에 조금 전에 복사한 광고 코드를 넣어서 "article" DIV 안에 넣어주세요.



<div class="article">
[##_article_rep_desc_##]
<div id="xyz">
<!-- 티스토리 본문 중간 광고 삽입 -->
중간 광고 코드를 넣어주세요.
</div> <script> document.getElementById('abc').appendChild(document.getElementById('xyz'));
</script>
</div>

상기 코드처럼 넣어 주시면 됩니다.

document.getElementById는 원하는 내용으로 변경 가능하고

광고 div id도 원하는 내용으로 변경하면 됩니다.

내용을 복사했다면 "적용"을 클릭하고 새 글이나, 본문 편집을 클릭해서 글쓰기로 들어갑니다.



506af34ea76fb2c8972a2accee848472_1578013931_6213.jpg


티스토리 본문 중간 광고 넣기 위해서는 HTML 편집 형태로 변경해야 하기 때문에 먼저 본문을 등록하고

우측 상단에 있는 HTML 모드로 변경 후 아래와 같이 코드를 입력해주세요.


506af34ea76fb2c8972a2accee848472_1578013931_7037.jpg

원하는 위치에 아래 코드를 입력합니다.


<p><br/></p><div id="abc"></div><p><br/></p>

위 코드에서 "abc"는 소스 편집에서 등록한 document ID로 생성 내용에 따라서 변경하면 됩니다.


506af34ea76fb2c8972a2accee848472_1578013931_8072.jpg

티스토리 본문 중간 광고 넣기 완료 사진입니다.

복문에 중간 광고를 확인할 수 있습니다.

위 방법 말고 그냥 HTML 편집에서 광고를 직접 등록해도 동일한 효과를 확인할 수 있습니다.

이상으로 티스토리 본문 중간 광고 넣기를 마치겠습니다.

감사합니다.

#구글, #에드센스, #티스토리, #중간광고, #광고넣기, #Google, #AdSense


Comments


Category
굿인포
State
  • 현재 접속자 4 명
  • 오늘 방문자 22 명
  • 어제 방문자 50 명
  • 최대 방문자 546 명
  • 전체 방문자 56,543 명
  • 전체 게시물 226 개
  • 전체 댓글수 10 개
  • 전체 회원수 5 명
Facebook Twitter GooglePlus KakaoStory NaverBand