=======================
=======================
=======================
출처: http://mapletree8.tistory.com/89
이번에는 티스토리 본문 중간에 애드센스 광고를 넣는 방법을 알아보겠습니다.
본문 상단이나 하단, 또는 메뉴바에 광고를 삽입하는 방법은
이전에 알아봤던 것과 같이
그냥 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> 이 코드를 지워주시지 않아도 본문 중간 광고가 삭제됩니다.
=======================
=======================
=======================
출처: http://nubiz.tistory.com/424
본문 내 광고 삽입을 할 경우 수익률이 좋아서 꽤 많은 분들이 본문 내에 광고를 삽입하고 있습니다.
가장 초보적인 방법으로 글을 쓸 때 마다 광고 코드를 붙여넣는 방법이 있고,
서식에 광고코드를 등록해두어서 불러오시는 분들도 있습니다.
그러나 이런 방법들의 단점은 나중에 광고 코드를 수정해야 할 때, 모든 게시물을 일일히 수정해주어야 한다는 점 입니다.
그래서 이전에 생각했던 방법이 다음 글이었습니다.
[COMPUTER TIP] - 티스토리 본문 중간에 광고 넣기
서식에 자바스크립트 문서를 불러오도록 해놓고, 자바스크립트 문서에 광고코드를 삽입해놓는 방식이었습니다.
나중에 수정을 할 때는 글마다 일일히 수정할 필요 없이 자바스크립트 문서만 수정해서 다시 업로드하면 모든 게시물에 적용이 되었습니다.
그러나 글에는 정책위반이 아니라고 우겼지만.. 이 방법은 애드센스 정책위반으로 부터 완전히 안전하다고 할 수는 없습니다. 소스보기를 했을때 ie에서는 삽입된 광고코드가 안보였거든요.(ie도 개발자모드로는 보입니다.)
물론 이 방법을 1년 넘게 사용했지만 따로 경고나 제재를 받지는 않았습니다. 그러나 애드센스 정책관리팀은 이용 목적에 따라 다르다는 애매한 태도를 보이고 있어서 언제든지 정책위반이라고 하면 할말이 없습니다..
그래서 오늘 소개해드릴 방법은 스크립트 문서를 불러오는 것이 아닌 애초에 skin.html에 광고를 삽입해놓고
나중에 본문 중간으로 광고의 위치를 바꾸는 방법입니다.
(skin.html을 이용하기 때문에 모바일에서도 적용하려면 반응형 스킨을 사용해야합니다.)
아이디어는 http://blog.readiz.com/65 여기서 차용했습니다.
이 방법의 장점
본문 내에는 광고의 위치만 지정하므로 삽입해야하는 코드가 짧고,
나중에 글마다 일일히 수정할 필요 없이 skin.html에서 일괄적으로 수정이 가능합니다.
(처음에 한번은 글마다 광고삽입위치를 지정해주기위해 불가피하게 글마다 일일히 한번은 수정이 필요합니다.)
간단히 원리를 소개하자면, 본문에는 <div id="adhere"></div>라는 간단한 태그만 들어가고, skin.html에 포함시킨 광고코드를 본문 내로 이동시키는 것입니다.
추후 광고 코드 수정시에는 skin.html만 수정하면 되므로 자바스크립트 문서를 수정하는 것 보다 훨씬 편리합니다.
그리고 광고 코드 수정이 없어 정책위반 위험이 거의 없습니다.
위치를 옮기는 것에 대한 정책 위반여부 문의에 이런 답변을 받았습니다.
현재로서는 알려주신 방법에서 특별히 문제가 될 부분이 보이지는 않습니다.
하지만 정책 팀의 의견은 다를 수 있으며, 잠재적으로 애드센스 상에서 어떠한 변화가 있을 때는 위반의 우려가 있을 수도 있으므로 정책 팀으로부터의 안내 이메일을 놓치지 않도록 항상 유념해 주시기 바랍니다.
애드센스측에선 아무래도 확언을 하게되면 정책상 문제가 발생할 수 있기 때문에 애매한 답변을 해줄 수 밖에 없습니다.
그러나 이처럼 따로 규정되지 않은 행위에 대해서는 광고주에게 피해가 가지 않는 선에서 따로 적발하지 않는 것 같습니다.
이 방법을 악용을 하지 않는 이상 정책위반 경고를 받을 일은 없을 것 입니다.
행여나 경고를 받게되더라도 일괄적으로 광고를 제거하기 또한 간단하기 때문에 안심하셔도 됩니다.
적용법
@이 방법을 모바일에서도 적용하기 위해서는 반응형 스킨을 사용해야합니다.
(티스토리 모바일웹 사용을 하지 않아야 합니다.)
1.먼저 다음과 같은 html 내용으로 본문삽입용 구글애드센스 서식을 만들어둡니다.
나중에 본문에서 광고가 표시될 위치만 지정해주는 역할을 하게됩니다.
.<div id="adhere"></div>
(앞에 점을 찍은 이유는 점을 찍지 않고 저장하면 티스토리 편집기가 아무것도 없다고 인식해서 div태그까지 지워버리기 때문입니다.. 꼭 점이 아니더라도 원하시는 글자 넣으시면 광고 위치 확인하는데도 편할겁니다)
저장을 눌러 서식을 완성합니다.
2. HTML/CSS수정에 들어가서 skin.html에 아래 코드 전체를 복사헤서 </body>바로 윗줄에 붙여넣습니다.
(※아래는 예시입니다. 파란색 부분에 본인의 애드센스 광고 코드를 통째로 넣어주세요.)
<!-- 본문으로 이동할 광고 -->
<div id="movead" style="width:100%;text-align:center;">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 본문에 삽입될 광고 -->
<ins class="adsbygoogle life-is-an-egg"
style="display:inline-block"
data-ad-client="클라이언트id"
data-ad-slot="광고번호"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});//취소선 부분은 삭제해주세요.
</script>
</div>
<!-- 본문으로 광고 옮기기 -->
<script type="text/javascript">
function adLocate() {
if($("#adhere").length=="1"){
$("#adhere").append($("#movead"))
} else{
$("#movead").remove()
};
}
$('document').ready(adLocate());
(adsbygoogle = window.adsbygoogle || []).push({});//위에서 삭제한 부분이 여기 들어있습니다.
</script>
3. 시도해보고 되면 이대로 끝, 안되면 2.번에서 추가한 스크립트 윗줄에 다음을 삽입합니다.
(대부분의 반응형 스킨에서 불필요한 작업입니다.)
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
앞으로 본문 중간에 광고를 삽입할 때는
(혹은 이미 작성한 포스트에 광고가 삽입될 위치를 지정할 때)
이제 포스팅을 할 때, 광고를 삽입하고 싶은 위치에 커서를 이동시킨 후
오른쪽 메뉴에서 서식을 클릭해 1에서 작성해둔 서식을 한번 클릭만하면 됩니다.
삽입될 위치에 아까 표시해둔 .이 표시될 것이고 포스트를 발행한 뒤 광고가 제대로 이동하는지 확인해보시면 됩니다.
이미 자바스트립트 문서를 불러오는 방법을 사용중이시던 분들은
위 방법도 문제 없지만,아래 글을 참조하여 좀 더 세련된 방법으로 바꿔보세요!
- 유동성있는 광고 구현을 위한 애드센스 코드 삽입 방법
=======================
=======================
=======================
'WEB > 블로그' 카테고리의 다른 글
| 티스토리 코드 넣기(새 에디터) "코드블럭" (0) | 2020.09.13 |
|---|---|
| 티스토리 모바일 애드센스 광고 넣기 관련 (1) | 2016.01.12 |
| 구글 검색용 애드센스 한글 깨짐 현상 해결 (0) | 2013.12.11 |
| 블로그 구글 번역기 달아보기 관련 (0) | 2013.12.06 |
| 애드센스 광고 3개 이상 달기 관련 (0) | 2013.10.24 |