본문 하단 다른글 보기 좌측에 애드센스 넣는 법

Posted by Readiz
2014.04.22 23:07 반응형 티스토리/Tistory

본문 하단 좌측 애드센스 삽입



  벌써 세번째네요. 애드센스 관련 질문이 많아 이번에 정리하고 가려고 아예 작정하고 세번째 포스팅을 합니다. 이번에는 많은 분들이 물어보시는 다른글 더보기 좌측에 광고를 삽입하는 방법인데요, 이것이야말로 JS를 사용하지 않으면 답이 없습니다. CSS를 쓰거나 기타 반응형 광고단위를 사용하신다 하더라도, 티스토리에서 애드센스 광고를 넣을 수 있는 방법은 [$$_article_rep_desc_$$]의 상단이나 하단에 넣는 것이기 때문이죠. 본문 사이에 일반적인 방법으로 광고를 삽입하는 것은 자바스크립트를 제외하면 불가능합니다. 그래서 특히 이 부분에 대해 궁금해하시는 분들이 많은 것 같습니다. 일단 시작하기 전에, 이 방법은 Bootstrap 기반 스킨에서만 유효합니다. class에 col-md-6속성을 사용하기 때문인데요, 물론 조금 손을 보시면 일반 스킨에서도 사용가능하실 것 같습니다만 제가 일일히 커스텀할수는 없어서.. 바로 적용하는 것은 Bootstrap기반 스킨을 사용하셔야만 가능합니다. 




  이것이 문제의 광고배치인데요, 티스토리 소스를 많이 보신 분들이면 아시겠지만 [$$_article_rep_desc_$$]라는 것이 본문부터 시작해서 통째로 다른글 더보기까지 한꺼번에 출력이 되는 부분이라서, 그 사이에 광고를 넣기가 참으로 애매합니다. 이 부분에 광고를 배치하기 위해서는 Javascript로 강제삽입을 해야합니다. 역시 이전 강의를 한번 참고해보시는게 다음 코드 이해에 도움이 되실 것입니다.




  서론이 길었으나 코드를 그냥 알려드리기만 하면 작동방식을 모르고서는 커스텀하기 쉽지 않으실 것이라 판단해서 그런 것이니 잡설이 좀 길어도 양해 부탁드립니다. 일단 아래 코드를 [$$_article_rep_desc_$$] 하단에 넣으시면 됩니다.


	
<script>
	if(window.getWindowCleintWidth()>=768){
		var adTmp = '<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script><ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px;margin:auto" data-ad-client="" data-ad-slot=""></ins>';
		document.getElementsByClassName('another_category')[0].className+=" col-md-6";
		document.getElementsByClassName('another_category')[0].style.clear="none";
		document.getElementsByClassName('another_category')[0].outerHTML='<div style="margin:0 auto;"><div class="col-md-6" style="margin-top:20px; padding:0; text-align:center;">'+adTmp+'</div>'+document.getElementsByClassName('another_category')[0].outerHTML+'<div class="clearfix"></div></div>';
		(adsbygoogle = window.adsbygoogle || []).push({});
	}
</script>
	



  동작원리는 알고보면 간단합니다. 다른글 보기라는 티스토리 요소의 Class가 another_category임을 이용하는 것이죠. 이것(another_category class)을 Javascript로 찾은 후 이 앞부분에 adTmp라는 변수에 들어있는 코드(광고)를 삽입하는 것입니다. 구조 자체는 저번 코드와 비슷해서, window.getWindowCleintWidth()함수도 볼 수 있습니다. 이것이 클라이언트 창 크기를 감지하여 특정 창 크기에서만 광고를 넣게 됩니다. 제가 세팅해놓은 값은 모바일과 PC를 구분짓는 값인 768px입니다. 즉, 해당 코드를 적용하시면 해당 블로그에 접속하는 방문자의 브라우저 창 크기가 768px 이상이여야 광고가 출력되게 됩니다. (반응형 스킨에 맞추어 제작한 것이고, 그대로 모바일에 출력되면 광고 크기 문제 등이 발생하기 때문에 안뜨도록 하였습니다)



  오히려 코드가 복잡해서 설명드릴 것이 더 없는 것 같네요. 적용하기 위해 수정할 점은 아래와 같습니다.




수정하셔야 할 부분


1. var adTmp 우측에 본인의 광고 코드를 넣으시면 됩니다. 

  광고코드 중 <script async 부터 </ins>까지 넣으시면 됩니다.


2. </script>는 <\/script>로 바꿔서 넣으세요!

  이 부분을 지키지 않으시면 스크립트 에러로 제대로 광고가 출력되지 않습니다.


저작자 표시 비영리 변경 금지
신고
이 댓글을 비밀 댓글로
  1. 이전 댓글 더보기
  2. Fast boot 스킨에서 한줄을 길게 쓸경우 사이드바가 밑으로 내려가는데 어떻게 해야할까요?
    • 한줄을 길게 써서 문제가 일어나는 것이 아니라 </div>태그를 한번 더 쓰신건지 태그가 꼬여있는데요?;;
      확인해보니 글 본문 내용에 </div>가 한번 더 들어가 있습니다. 그래서 해당 글에서만 문제가 발생합니다.
    • 엌....;
    • 찾았습니다 감사합니다 ㅠㅠ;;;;
  3. 전 안되네요.. ㅎㅎ 왜 안되는지 거참.. ㅋㅋ 아예 아무변화도 없는건 왜 그런건가요??
    \/[역슬래시] 이건 넣어줬는데.. 이거 안될때 오류코드가 뜨는거 보면 제대로 쓴거 같긴한데.. 적용이 안된다는게 ㅋㅋ
    • 음.. 리얼클릭인가요?
      리얼클릭은 적용 방식이 달라서.. ^^;
    • 원래 리얼클릭을 올려뒀다가 애드센스로 바꿨는데도 그래요^^..

      리얼클릭은 맨 아래랑 위에만 뒀고.. 애드센스는 지금 2차 승인기다리는중이라서 적용을 해봤는데.. 안되고 있거든요..
    • 하나만 역슬래시 붙이세요.. 두개 다 붙이셔서 안되고 있네요..
      맨 마지막에 있는건 역슬래쉬 넣으시면 안됩니다..
      본문 샘플 코드 참조하세요..
    • 앗 되네요.. 아직 광고승인이 안되어서 그런건가보네요.. 그냥 고대로 readiz님이 올리신거 올리니까 구현이 되네요..
      이번 바보같이 한참 버벅였네요.. ㅎ 감사합니다~~..
    • 2014.05.08 14:01
    비밀댓글입니다
    • 일단 광고 승인이 되어야 출력이 됩니다~
  4. 모처럼 여유있는(?) 주말을 맞아 그동안 틈틈히 살펴두었던 fastboot 스킨을 적용했습니다
    그래도 역시 제손이 필요한 부분이 한둘이 아니군요..ㅠ.ㅠ 스킨 잘사용하겠습니다 그리고 방명록에서 말씀드렸던 푸터부분을
    살펴봐주세요 미리 말씀드리고 허락(?)도 받은거지만 손대지 말라는 문구가 있어 꺼림칙한건 여전하네요
    그런데 하나 궁금한게 저도 리드이지님 블로그처럼 다음뷰를 카테고리 다른글보기와 애드센스 좌측 하단 앞에 두고싶은데 다음뷰 추천박스가 항상 뒤에 나오네요.. 애드디스와 다음뷰추천박스를 앞에두려면 어찌해야할까요?
    • 티스토리 플러그인 적용 순서에 따른 것일겁니다. 다른글 더보기와 다음뷰 플러그인을 해제했다가, 적용하는 순서를 바꿔보세요. 먼저 적용하는게 먼저 나오는지 나중에 나오는지는 모르겠습니다만 아마 이문제일겁니다.
    • 헐 이리 간단한 문제였다니..다른글 더보기 위치를 이동해야 하나해서 자바스크립트로 위치이동시키는 소스를 적용하니 다른글 더보기 좌측 애드센스가 날아가고.. 삽질중이었는데..이문제였군요..
      감사드립니다~
  5. 이번에 블로그를 하나 새로파면서 여기서 스킨도 받고 애드센스 적용법도 알고 가게 됩니다. 정말 감사합니다.
    • 네 도움되는 제언도 많이 해주세요~ 방문 감사합니다.
  6. 오옷!! 잘 적용이 되엇습니다!!!
    PC에서는 잘 나옵니다.
    그런데 모바일에서도 나오게 하려면.. 어떻게 해야 하는지요 ㅋ
    • 저도 안되서 확인해보니까 300 250으로 하니까 가장 작은 사이즈에서 잘 출력되는군요
  7. 제가 Readiz님 글 보면서 스킨을 더듬더듬 좀 바꿔서 사이드바가 왼쪽에 있고 본문과비율이 4:8 입니다.
    애드센스를 다른글 보기 좌측에 넣는 방법을 시도해봤는데 잘 되지 않네요..
    혹시 제가 사이드바 위치나 폭 수정을 해서 그런걸까요...?
  8. 모바일에서는 노출이안되는거 같은데 어떻게 해야 될까요``?ㅎ
  9. 아.. 이거 여쭤볼려고 했었는데 마침 있었군요.
    잘 적용했습니다. 감사합니다. ㅎㅎㅎ
  10. 사이드바 애드센스, 본문 상단 오른쪽, 하단 왼쪽에 광고를 삽입했는데 사이드바만 광고가 나오고 본문의 2개는 광고가 나오지 않는데 무슨 이유인지 알 수 있을까요?
  11. 안녕하세요. 좋은 스킨을 알게 되어 만족스럽게 사용하고 있습니다.
    컴맹이지만 리디즈님의 포스팅들을 참고하면서 얼추 비슷하게는 흉내를 낼 수 있었습니다. 감사합니다. ^^
    그러나 바로 이 부분만 며칠째 해결을 못하고 있습니다.
    제 현상은 카테고리 다른 글 보기가 반으로 나눠지지 않고. 그 아래로 광고가 구현이 됩니다.
    알고나면 정말 쉬울 거 같은데 이틀째 온갖 방법을 다 썼지만 이제는 해볼 방법이 없네요.ㅠㅠ

  12. '카테고리의 다른글 보기' 좌측에
    'Recommended For You' 추천글보기가 뜨는데요.
    이부분 없애려면 어떻게 해야하나요!! ?
  13. 본문 한 개만 볼 때는 문제가 없는데요...
    우측 메뉴에서 카테고리를 선택하면 첫번째 글에만 광고가 모두 붙어서 보이고, 나머지 글은 광고가 옆에 안 붙어서 나옵니다.
    블로그 화면 출력에서 목록만 봐야 하는 건가요... 목록+내용으로 하면 쓰면 안되는 건가요?
  14. 모바일에서는 노출이 안되네요 PC에선 노출이잘되는데 ㅜㅜ 어떻게하면좋을까요
  15. 정말 좋네요 ^^ 감사하게 썼습니다. 항상 좋은 소스코드 보고 갑니다. 초보도 잘 이해가 가네요
    • 2014.10.18 12:58
    비밀댓글입니다
  16. 항상 너무 많은 도움 받습니다.ㅋ
    감사해요.
    저같은 개초보들에겐 구세주십니다요 ㅋ
  17. fast boot 1.6.1 설치하고.. 위의 코드대로 했는데 어째서 안되는걸까요,,ㅠㅠ?
    그냥 애드센스 코드를 적용하면 광고가 잘 나오긴 하는데... 다른 글 밑에요.

    위 코드를 적용하면 다른 글 부분이 이 글처럼 영역이 줄어들고 광고 자리가 나오긴 하는데 광고는 나오질 않습니다
    대체 왜 그런걸까요..? 버전업 되면서 뭐가 바뀐걸까요??
  18. 의의 강좌대로 했는데 변경이 되질않네요 ㅠ.ㅠ 항상 스킨 도움많이 받고 있습니다. 앞으로도 잘부탁드리겠습니다.
    • 2017.03.20 18:41
    비밀댓글입니다

티스토리 툴바