본문 바로가기

정보 공유/블로그 가이드

티스토리 홈 화면에 구글 애드센스 적용하기

반응형

티스토리 홈 화면에 구글 애드센스를 적용하는 방법!

티스토리에서 기본적으로 제공되는 티에디션 기능을 활용하면 홈 화면의 원하는 위치에 구글 애드센스를 적용할 수 있다. HTML을 수정해서 하는 방법보다 훨씬 쉽게 적용할 수 있으니 아래 방법을 따라해보자. 티에디션은 쉽게 말해서 블로그 홈(메인) 화면을 편집하는 편집프로그램이다. 티에디션을 활용해서 티스토리 홈 화면을 꾸미는 방법에 대한 포스팅은 지난 포스팅에서 다루었다. 궁금하신 분들은 하단에 링크를 첨부하니 참고 부탁드린다.




티스토리 홈 화면에 구글 애드센스 적용하기




먼저 반응형 스킨 fastboot 1.6.2을 쓰고 있으시다면 티에디션을 사용하기 위해서 약간의 HTML 수정이 필요하다. 반응형 스킨을 사용하는 경우 티에디션이 비활성화 되어있기 때문이다.





관리자 페이지에 [꾸미기 - HTML/CSS편집]으로 들어간다.




HTML 창에서 Ctrl + F를 누르고 enableTedition이라고검색하면 티에디션에 대한 코드가 나오는데, 해당 내용을 False에서 True로 변경하면 적용이된다.


var f_enableTedition = false를 true로 변경;


티에디션이 활성화 되었으니 이제 관리자 페이지에서 티에디션 설정을 사용으로 바꾸고 본격적으로 애드센스를 적용해보도록 하자.



2. 티에디션으로 홈화면에 애드센스 적용하기



관리자 페이지에서 [꾸미기 - 설정]으로 들어간다.





하단에 티에디션을 사용하지 않습니다를 사용합니다로 변경하고 변경사항 저장을 누른다. 그러고 나면 티에디션 설정하기 버튼이 활성화 되는데 버튼을 누르면 홈 화면과 함께 티에디션 설정창이 나온다.






티에디션에서 광고를 넣고 싶은 부분을 선택하고 [디자인 - HTML]에 들어간다.






HTML 창에 있는 모든 코드를 지우고 구글 애드센스 광고 코드를 붙여넣은 후 적을 누르면 되는데, 이때 텍스트/이미지 반응형 애드센스 소스를 넣게되면 하단 이미지와 같은 사이즈로 노출이 된다.





필자의 경우에는 홈화면 중간과 맨 끝에는 해당 사이즈의 광고를 넣었지만 맨 위 상단에는 좀 더 높이 폭이 넓은 광고를 게재하고 싶어서 약간의 변경을 했다. (정책 위반인지 모르겠다. 위반이면 댓글좀 남겨주세요.)


기존에 애드센스에 있는 336x280 사이즈 광고 코드에서 사이즈 부분을 원하는 규격으로 변경해주면 반영이 되는데, 가로 833 세로 280 사이즈 정도면 적당하다.




<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<--광고 코드 예시-->

<ins class="adsbygoogle"

     style="display:inline-block;width:336px;height:280px" 이부분을 width 833으로 변경

     data-ad-client="ca-pub-코드번호"

     data-ad-slot="슬롯번호"></ins>

<script>

(adsbygoogle = window.adsbygoogle || []).push({});

</script>






수정한 티에디션을 저장하고 적용하기를 누르면 홈 화면에 반영 된 것을 확인 할 수 있다.

반응형