본문 중간에 광고를 삽입하는 방법입니다.
1. 광고 생성하기
우선 3. 티스토리 블로그에 구글 애드센스(Google adsense) 광고 생성하고 추가하기 가이드 를 참조하시어 새 광고를 하나 생성해주세요.
저는 인피드 광고를 하나 생성해 보았습니다.
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-format="fluid"
data-ad-layout-key="xxxxxxxxxxxxxx"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>2. 스킨 html 편집 열기
2.1. 블로그 관리 페이지로 이동합니다. 우 상단 아이콘 클릭 후 운영중인 블로그의 설정 메뉴를 선택하시면 됩니다.
2.2. 좌측 메뉴에서 스킨 편집 을 선택합니다.
2.3. 우측의 html 편집 버튼을 선택합니다.
3. 스킨에 광고를 포함시킵니다.
3.1. CTRL + F 로 "article_rep_desc" 를 찾습니다.
3.2. "article_rep_desc"를 감싸고 있는 div 태그 사이에 본인 광고가 포함된 아래 코드를 넣습니다.
<div id="contents-ads">
<!-- 본인 광고 시작 -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-format="fluid"
data-ad-layout-key="xxxxxxxxxxxxxx"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- 본인 광고 끝 -->
</div>
<script>
document.getElementById('ads-here').appendChild(document.getElementById('contents-ads'));
</script>이런 모양새가 됩니다.
적용 후 꼭 상단의 적용 버튼을 눌러주세요.
* 사실 div 태그가 저 위치에 안 들어가도 되긴 합니다만, 추후 스킨 편집 시 검색 및 편집을 용이하게 하기 위해 저 위치에 넣어둡니다.
** "ads-here" id를 갖는 div 태그로 본문에 공간을 확보한 후 해당 공간에 광고 공간 ("contents-ads" id를 갖는 div 태그)을 포함시켜 광고를 띄우는 방식입니다.
4. 실제 글에 광고 넣기
여기까지만 해서는 글 중간에 광고가 삽입되지 않습니다. 글 작성 시 광고 삽입 위치를 직접 지정해야 합니다.
4.1. 작성하는 글의 편집기를 HTML 모드로 돌립니다.
4.2. 광고를 넣기 원하는 위치에 아래 코드를 넣습니다.
<br /><p><div id="ads-here"></div></p><br />
이 위치에 광고가 삽입됩니다.
5. 적용된 모습입니다.
글을 작성해보시면 아래와 같이 빈 공간이 나타나는 것을 보실 수 있는데요, 나중에 광고가 게재됩니다.
이미 많은 글을 작성하신 블로그나 미리 생성한 광고인 경우 바로 표시되기도 합니다.
'티스토리' 카테고리의 다른 글
| 쿠팡 파트너스(Coupang partners) 가입하고 티스토리 블로그에 링크 추가하기! 추천인 코드는 AF1026507 (0) | 2020.10.08 |
|---|---|
| 티스토리 블로그 글에 인터파크(Interpark) 도서에서 가져온 책 정보 입력하여 3% 보너스 혜택 받기 가이드 (0) | 2020.10.06 |
| 11. 티스토리 블로그에 등록한 구글 애드센스 (Google adsense) 수익금을 입금 수령하기 위한 외환 계좌 등록하기 가이드 (0) | 2020.10.06 |
| 10. 티스토리 블로그에 등록한 구글 애드센스 (Google adsense) 계정에 PIN 번호 등록하기 가이드 (0) | 2020.10.06 |
| 9. 티스토리 블로그 노출 및 줌 (ZUM) 검색 최적화를 위한 ZUM 검색 등록 가이드 (0) | 2020.10.04 |
