본문
|
|
이번에는 티스토리 본문 중간에 애드센스 광고를 넣는 방법을 알아보겠습니다.
본문 상단이나 하단, 또는 메뉴바에 광고를 삽입하는 방법은
이전에 알아봤던 것과 같이
그냥 HTML/CSS 편집에 들어가서 광고코드를 적절한 곳에 넣어주면 됬었죠.
그런데 본문 중간에 광고를 삽입할 때에는 조금 방법이 다릅니다.
그 방법을 한번 알아보죠.
일단 광고를 넣어야 하지 애드센스 홈페이지에서 광고 코드를 받읍시다.
그 다음 티스토리 블로그 관리자 페이지에 들어가서 ‘HTML/CSS 편집‘을 클릭합시다.
그 다음 위 사진에서 보이는 바와 같이 Ctrl+F를 눌러서 </body>를 찾읍시다.
그러면 딱 1개 일치하는 것이 나옵니다.
<div id="xyz">
광고코드 삽입 위치
</div>
<script>
document.getElementById('abc').appendChild(document.getElementById('xyz'));
</script>
그리고 나서 위에 보이는 이 코드를 복사해서 </body> 위에 붙여넣기 해줍시다.
이때 위 코드에서 빨간색 글씨로 광고코드 삽입 위치 라고 써져있는 곳이 보이시죠?
이 빨간 글자를 지우고 대신 그곳에 애드센스 홈페이지에서 받은 광고 코드를 붙여넣기 해줍시다.
삽입한 결과입니다.
그리고 저장을 눌러주세요.
그런데 제가 처음에 본문 중간에 광고를 삽입하는 방법은
본문 상단이나 하단, 메뉴바에 삽입하는 방법과 약간 다르다고 했지요?
그 이유가 여기서 나옵니다.
보통 ‘HTML/CSS 편집’에 들어가서 광고코드를 삽입한 후
블로그에 글을 쓰면 자동으로 광고가 나오게 되는데요.
본문 중간에 광고를 넣을 때에는 ‘HTML/CSS 편집’에서 방금 했던 것처럼 광고코드를 넣어주고
한 가지 작업을 더 해야합니다.
만약 블로그에 글을 쓰려면 이렇게 글을 쓰겠죠?
여기서 위 사진의 빨간색 네모 부분에 있는 HTML에 체크 표시를 해줍시다.
그러면 이런 화면이 나올텐데요.
광고를 삽입하고 싶은 곳에 아래의 코드를 삽입해줍시다.
<div id="abc"></div>
전 위 사진의 빨간 네모와 같이 두 번째 줄 아래에 삽입했습니다.
저장을 눌러줍시다.
그리고 이제 블로그로 가서 제대로 됐는지 확인해봅시다.
그러면 위 사진의 파란색 네모 부분처럼
제가 삽입한 대로 두 번째 줄 아래에 광고가 삽입된 것이 보이시죠?
성공입니다.
그런데 여기서 몇 가지 의문점이 생깁니다.
Q1. 그러면 글을 쓸 때 마다 <div id="abc"></div> 이 코드를 삽입해야하는가?
A : 네. 그렇습니다. 본문 중간에 광고를 삽입할 때에는 ‘HTML/CSS 편집‘에 들어가셔서 </body> 위에 광고 코드를 삽입한 후 글에 <div id="abc"></div> 이 코드를 삽입해주셔야 본문 중간에 광고가 나타나게 됩니다.
Q2. 광고를 수정하고 싶다. 어떻게 해야 하는가?
A : ‘HTML/CSS 편집‘에서 </body> 위에 광고코드를 다른 코드 안에 넣어서 넣었었죠. 광고를 수정하시고 싶다면 ‘HTML/CSS 편집‘에 들어가셔서 </body> 위에 삽입한 코드 중 광고코드만 바꿔주시면 <div id="abc"></div> 이 코드를 삽입한 모든 글의 광고가 바뀌게 됩니다.
Q3. 광고를 없애고 싶다. 어떻게 해야 하는가?
A : 만약 모든 글이 아닌 일부의 글에 있는 광고만 빼고 싶으시다면 그 글을 편집하러 가셔서 HTML에 체크를 하신 후 <div id="abc"></div> 이 코드를 지워주시면 됩니다. 그러면 그 글에는 본문 중간에 광고가 나오지 않게 됩니다.
그리고 만약 모든 글에 있는 본문 중간 광고를 없애고 싶으시다면 모든 글에 들어가셔서 <div id="abc"></div> 이 코드를 지워주셔도 되지만 많이 번거롭죠? 따라서 ‘HTML/CSS 편집‘에 들어가셔서 </body> 위에 삽입해주셨던 코드를 지워주시면 모든 글에 들어가서 <div id="abc"></div> 이 코드를 지워주시지 않아도 본문 중간 광고가 삭제됩니다.