신스킨에 구스킨 인피드 애드센스 적용 방식으로 글목록 애드센스를 붙이는 방법
구스킨때 목록 중간 중간 건너뛰면서 애드센스 광고를 자동으로 넣어주는 코드가 사용되었는데
작년 가을 신스킨으로 티스토리 스킨 구조가 달라지면서 해당 애드센스 적용 자바스크립트 코드가 전혀 동작하지 않습니다.
애드센스 광고가 글 내용과 겹치거나 깨져 보이게 되는데
스크립트 코드를 신스킨, 또는 해당 스킨의 글목록 구조에 맞춰 변경을 해줘야 애드센스 인피드가 정상적으로 붙게 됩니다.
코드의 구조를 조금 이해한다면 수정해서 붙이는 데 별 무리가 없겠지만
코드 구조를 전혀 이해못하고 일단 코드만 붙여넣으면 동작할줄 알았는데 사용하는 스킨에 따라서 조금씩 손을 봐줘야 합니다.
티스토리 스킨 skin.html 파일 기준입니다.
<head> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <script> var i = 0; </script></head>
이렇게 먼저 <head></head> 태그 사이에 애드센스 라이브러리를 링크를 걸고
보통 아래와 같은 자바스크립트 코드로 인피드 목록 애드센스를 넣습니다.
<script> i++; if(i%3 == 0){//건너뛰는 숫자 글 3개당 1개씩 애드센스 추가//아래 두줄은 애드센스 코드를 자바스크립트로 뿌리는 기본 코드 document.write( '<div class="list_content" style="display:block" data-ad-format="fluid" data-ad-layout="image-middle" data-ad-layout-key="-eu+r-3v-9g+wc" data-ad-client="ca-pub-1234567890" data-ad-slot="1234567890"></div>'); (adsbygoogle = window.adsbygoogle || []).push({}); } </script>
이 코드는 skin.html 의
<s_index_article_rep></s_index_article_rep>
이 치환자 태그 안에 위치해야 합니다.
중요한 것은 5번째줄 "document.write" 안에 있는 태그와 클래스입니다.
해당 스킨의 글 목록을 뿌리는 글 목록 아이템의 최상단 태그와 클래스를 맞춰줘야 합니다.
구스킨의 경우
글목록을 뿌리는 구조가
<s_index_article_rep> <div class="list_content"> <s_article_rep_thumbnail> <a href="[##_article_rep_link_##]" class="thumbnail_post"><img src="//i1.daumcdn.net/thumb/C150x150/?fname=[##_article_rep_thumbnail_raw_url_##]"></a> </s_article_rep_thumbnail> <a href="[##_article_rep_link_##]" class="link_post"> <strong class="tit_post ">[##_article_rep_title_##]</strong> <p class="txt_post">[##_article_rep_summary_##]</p> </a> <div class="detail_info"> <a href="[##_article_rep_category_link_##]" class="link_cate">[##_article_rep_category_##]</a> <span class="txt_bar"></span> <span class="txt_date">[##_article_rep_date_##]</span> </div> </div> </s_index_article_rep>
이런 구조로 보통 글목록이 뿌려지게 되어 있습니다. ( 치환자는 <s_index_article_rep> 입니다.)
<div class="list_content"></div>
가 글목록 아이템 하나가 되게 되고 위의 인피드 애드센스 코드가 중간 중간 건너뛰면서 애드센스 광고를 반복적으로 붙이게 됩니다.
따라서 인피드 자바스크립트 코드에도
document.write( '<div class="list_content"> ... </div>');
이런 식으로
뿌리는 태그를 맞춰줘야 합니다.
<ins class="list-item">...</ins>
이런 식으로 목록 아이템이 되어있다면
위의 자바스크립트 코드는
document.write( '<ins class="list_item"> ... </ins>');
가 되어야 합니다.
신스킨의 경우 대부분 레퍼런스 스킨 디자인에서 파생된 디자인은
아래와 같은 구조를 가집니다.
제 블로그에 올라간 스킨은 작년 11월부터 올라간 대부분의 스킨이 해당됩니다.
글목록에 붙일 경우
기본적으로 <div class="post-item"> ... </dv> 태그와 그 안의 내용이 글 목록 아이템 1개가 되고
이것이 반복되는 구조입니다.
즉, 아래 코드 기준으로 반복되는 최상단 태그의 클래스로 class="post-item" 이 반드시 있어야 합니다.
그래야 레이아웃이 깨지지 않고 스킨 레이아웃에 맞춰져 애드센스 광고가 끼워넣어지게 됩니다.
또는 다른 방식으로 커스터마이징을 한 스킨인 경우 목록 아이템의 최상단 클래스로 정의한 클래스 명을 반드시 인피드 애드센스 코드로 정의를 해줘야 합니다.
<s_index_article_rep> <div class="post-item"> <a href="[##_article_rep_link_##]"> <span class="thum"> <s_article_rep_thumbnail> <img src="//i1.daumcdn.net/thumb/C360x240/?fname=[##_article_rep_thumbnail_raw_url_##]" alt=""> </s_article_rep_thumbnail> </span> <div class="article-info"> <span class="title">[##_article_rep_title_##]</span> <s_if_var_view-thumbnail-date> <span class="date"> <s_if_var_short-date>[##_article_rep_simple_date_##]</s_if_var_short-date> <s_not_var_short-date>[##_article_rep_date_##]</s_not_var_short-date> </span> </s_if_var_view-thumbnail-date> <s_if_var_view-thumbnail-excerpt> <span class="excerpt">[##_article_rep_summary_##]</span> </s_if_var_view-thumbnail-excerpt> </div> </a> </div> </s_index_article_rep>
따라서 인피드 애드센스 자바스크립트 코드는
<script> i++; if(i%3 == 0){//건너뛰는 숫자계산 document.write( '<div class="post-item" style="display:block" data-ad-format="fluid" data-ad-layout="image-middle" data-ad-layout-key="-eu+r-3v-9g+wc" data-ad-client="ca-pub-1234567890" data-ad-slot="1234567890"></div>'); (adsbygoogle = window.adsbygoogle || []).push({}); } </script>
와 같이 됩니다.
커버리스트에 붙일 경우
커버리스트 외곽은 ".cover-list" 가 되고 커버 아이템 한개는 ".cover-list ul li" 가 됩니다.
예를 들어
<s_cover_group> <s_cover_rep>
<s_cover name='cover-list'> <div class="cover-wrap cover-list"> <div class="inner"> <ul> <s_cover_item> <li> <a href="[##_cover_item_url_##]"> <div class="article-info"> <span class="thum"> <s_cover_item_thumbnail><img src="//i1.daumcdn.net/thumb/C400x400/?fname=[##_cover_item_thumbnail_##]" alt=""></s_cover_item_thumbnail> </span> </div> <div class="article-info"> <s_cover_item_article_info> <span class="category">[##_cover_item_category_##]</span> </s_cover_item_article_info> <span class="title">[##_cover_item_title_##]</span> <span class="excerpt">[##_cover_item_summary_##]</span> </div> </a> </li> </s_cover_item> </ul> </div> </div> </s_cover>
</s_cover_rep> </s_cover_group>
<s_cover_item> 안의 "<li></li>" 태그 하나가 목록 아이템 1개가 됩니다.
따라서 자바스크립트 코드는 "<s_cover_item>" 바로 밑에 추가를 해야 하고 코드는
<script>i++;if(i%3 == 0){//건너뛰는 숫자계산 document.write( '<li style="display:block" data-ad-format="fluid" data-ad-layout="image-middle" data-ad-layout-key="-eu+r-3v-9g+wc" data-ad-client="ca-pub-1234567890" data-ad-slot="1234567890"></li>'); (adsbygoogle = window.adsbygoogle || []).push({});}</script>
와 같은 식으로 태그를 맞춰줘야 합니다.
코드를 붙일 때 알아둘 중요한 사항 3가지!
1. 항상 글목록 반복 아이템의 최상의 태그와 클래스를 맞춰주면 됩니다;
2. 클래스중 구글 샘플 코드에 기본 클래스로 적용된 "adsbygoogle" 클래스 명은 없어도 무방합니다.
3. 블로그에 따라서는 공지사항, 보호된 글, 커버리스트에도 붙여야 할 수 있습니다. 블로그에 적용한 스킨에 따라 <s_index_article_rep></s_index_article_rep> 태그를 적용한 다른 위치에도 인피드 코드를 적용해줘야 할 수 있습니다.