티스토리를 운영하면서 구글애드센스로 수익을 얻는 방법을 모두가 생각하고 계실겁니다.
그런데 막상 광고를 적용하려니 다른 것보다 본문중간에 광고를 넣는 방법이 조금 까다로워 보이기도 하는 것 같습니다. 그 중에서 가장 쉽게 할 수 있는 방법이 뭐가 있을까를 생각하면서 아래의 방법으로 적용을 해 보았습니다.
간단히 순서를 말씀드리겠습니다.
첫째, 작성하는 본문의 HTML모드에 들어가 <div id="abc"></div> 코드를 붙여넣기 합니다.
둘째, 구글애드센스에서 광고를 생성합니다. 여기서는 728x90 크기로 하였습니다.
셋째, HTML/CSS수정의 skin.html레 들어가서 아래의 스크립트를 추가합니다.
<div id="xyz">
본문광고코드 가 들어가야 할 곳입니다.
여기서 광고의 크기는 728x90 으로 하였습니다.
</div>
<script>
document.getElementByid('abc'),appendChild(document.getElementByld('xyz'));
</script>
▲ <광고코드 삽입전>
<div id="xyz">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 블로그 중간 광고 --> --- 해당 내용은 광고코드에 따라 바뀝니다. 참고만 해주세요.---
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-000000000000000"
data-ad-slot="00000000"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script> --- 해당 내용은 광고코드에 따라 바뀝니다. 참고만 해주세요.---
</div>
<script>
document.getElementByid('abc'),appendChild(document.getElementByld('xyz'));
</script>
▲ <실제광고코드 삽입모습>
위에서 보시는 것처럼 알기 쉽도록 순서를 나열하여 말씀드렸습니다.
그럼, 지금부터는 실제적용하는 모습을 함께 보여드리도록 하겠습니다.
현재 글을 기준으로 작성하면서 함께 말씀드리겠습니다.
1) 첫번째로 HTML모드를 클릭하세요*^^*
"<div id="abc"></div> 코드를 본문의 원하는 위치에 붙여넣기 하였습니다."
2) 두번째로 구글애드센스에서 광고를 생성하여 코드를 가져옵니다. (이부분은 생략하겠습니다.)
3) 세번째로 HTML/CSS수정의 skin.html로 들어가서 광고코드를 붙여넣기 합니다.
- 해당내용은 아무곳에나 넣으셔도 상관없습니다.
- 헷갈리신다면 </body>위에 넣으시면 됩니다.
<div id="xyz">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> ---여기서 부터 ---
<!-- 블로그 중간 광고 -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-000000000000000"
data-ad-slot="00000000"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script> --- 여기까지가 광고코드 부분입니다.---
</div>
<script>
document.getElementByid('abc'),appendChild(document.getElementByld('xyz'));
</script>
애드센스광고를 본문중간에 넣는 방법을 간단하게 적어보았습니다.
'IT 및 정보 > Blog Tips' 카테고리의 다른 글
[TIP]초보블로거가 포스팅을 잘 하는 법은 부담없이 쓰기 시작하는 것이다. (2) | 2015.03.28 |
---|---|
[TIP] 다양한 주제로 포스팅하면서 방문자 늘려나가기. (0) | 2015.03.19 |
[블로그팁] 내 티스토리 블로그 폰트 변경하기 - 나눔고딕[Easy] (4) | 2014.12.19 |
저작권에서 자유로운 Flickr 공유이미지 사용하기 (0) | 2014.11.29 |
저작권 걱정없이 블로그에 이미지를 사용하는 방법 7가지 (1) | 2014.07.31 |
댓글