티스토리 본문 하단 인피드 광고 넣기, 공감 버튼 이동, 이전 발행 글

01

of 07

공감 버튼 이동, 인피드 광고 넣기

본 내용은 티스토리 북클럽 스킨을 기본으로 한다.

보통 블로그에 글을 작성하고 마무리 할때, 작성한 글과 유사한 글이나 참고 될 만한 기존 글을 이전 발행 글 넣기로 몇 개 정도 넣고 마무리 한다. 물론 모든 글에서 이렇게 하고 싶지만 이게 습관이 잘 안되서 안하는 경우가 많다.

이렇게 글을 마무리하고 하단에 광고를 넣는다면 그냥 디스플레이 광고나 콘텐츠 내 자동 삽입 광고 보다는 인피드 광고가 더욱 잘 어울린다.

〈결과물〉

함께 보기 좋은 글 (이전 발행 글) 바로 아래 인피드 광고를 넣었다.

위 이미지 처럼 인피드 광고를 이전 발행 글과 거의 비슷하게 삽입할 수 있다. 또한 그 아래 쪽에 관련글과 멀티플렉스 광고를 조합하여 마치 하나의 관련글로 보이도록 만들었다.

※ 예전 썸네일이라 텍스트 위주지만 현재는 썸네일 자체를 이미지 위주로 만들기 때문에 인피드 광고와 더욱더 비슷해 보인다.

인피드 광고를 글 맨 하단에 넣기 위해선 몇 가지 준비 작업이 필요하다. 우선 공감 버튼위에 광고를 넣기 위해서 공감 버튼을 아래로 내려야하고, 인피드 광고를 넣기 위해서 PC용과 모바일용 인피드 광고 2개를 만들어야 한다.

02

of 07

공감 버튼 이동 시키기

1. ##_article_rep_desc_##를 찾는다.

북클럽 스킨 기준으로 Ctrl+F로 찾으면 2개를 찾을 수 있는데, 이 중에서 두 번째가 해당된다.

2. 자바 스크립 삽입

두 번째 ##_article_rep_desc_## 바로 하단 부분에 아래 코드를 넣어준다.

##_article_rep_desc_##
<!-- 공감 이동 시작-->
<script>
( function( $ ) {
$( document ).ready( function() {
$( ".container_postbtn" ).before( $( ".adpositioning" ) );
} ) } )( tjQuery );
</script>
<div class="adpositioning">
<!-- 이곳에 인피드 광고 코드를 삽입한다 -->
</div>
<!-- 공감 이동 끝-->
</div>
Code language: HTML, XML (xml)

03

of 07

PC용 인피드 광고 만들기

우선 애드센스 인피드 광고 ➜ 광고 스타일 직접 만들기 ➜ 측면 이미지를 선택한다.

1. 전체 옵션

① 선택한 디스플레이 광고 허용 : 꺼놓는다. 켜놓으면 종종 일반 디스플레이 광고가 표시된다.

② Font : Open Sans. 딱히 똑같은 폰트가 없다면 이걸 선택한다.

③ 텍스트 묶기 : 꺼놓는다. 켜 놓으면 종종 이미지 아래 쪽으로 텍스트가 표시된다.

④ 배경색상 : 기본값 그대로 둔다.

⑤ 경계선 : 1px, 색상은 #d9d9d9

⑥ 패딩 : 모두 0

2. 이미지

아래 이미지처럼 설정한다. 왼쪽 정렬, 1:1, 200px, 패딩은 오른쪽 45px

3. 광고 제목

아래 이미지처럼 설정한다. 오래걸림, 22px, 왼쪽정렬, 글자색 #212121, 패딩 위쪽 30

4. 설명

PC용은 설명 표시 켜 놓는다. 14px, 왼쪽 정렬, 글자색은 #909090, 패딩은 위쪽 20

5. URL

8px, 왼쪽 정렬, 글자색은 #8c8c8c, 패딩 위쪽 20

6. 버튼

기본값 그대로 둔다.

7. 기타

본인의 블로그에 맞게 조금씩 수정해서 사용한다.

04

of 07

모바일 인피드 광고 만들기

우선 애드센스 인피드 광고 ➜ 광고 스타일 직접 만들기 ➜ 측면 이미지를 선택한다.

1.전체 옵션

꺼놓는다, Open Sans, 꺼놓는다, 배경색은 기본값, 1px, 색상은 #d9d9d9, 패딩은 모두 0

2. 이미지

왼쪽 정렬, 1:1, 88px, 패딩 오른쪽 20

3. 광고 제목

짧음, 16px, 왼쪽 정렬, 글자색 #212121

4. 설명

설명 표시는 꺼 놓는다.

5. URL

8px, 왼쪽 정렬, 글자색 #8c8c8c, 패딩 위쪽 10

6. 버튼

기본값 그대로 둔다.

7. 기타

본인의 블로그에 맞게 조금씩 수정해서 사용한다.

05

of 07

인피드 광고 코드

인피드 광고 두 개를 만들었다면 아래 코드를 HTML에 삽입한다.

<!--인피드 본문 하단 자동 광고 -->
<script>
if(window.innerWidth<660) {
// 인피드 모바일 광고
{document.write('<ins class="adsbygoogle"
style="display:block"
data-ad-format="fluid"
data-ad-layout-key="본인코드"
data-ad-client="본인코드"
data-ad-slot="본인코드"
data-language="ko"></ins>');
(adsbygoogle = window.adsbygoogle || []).push({}); }
}
else {
// 인피드 PC 광고
{document.write('<ins class="adsbygoogle"
style="display:block"
data-ad-format="fluid"
data-ad-layout-key="본인코드"
data-ad-client="본인코드"
data-ad-slot="본인코드"
data-language="ko"></ins>');
(adsbygoogle = window.adsbygoogle || []).push({}); }
}
</script>
Code language: HTML, XML (xml)

인피드 광고와 멀티플렉스 광고의 경우 난 항상 PC용과 모바일용 두 가지를 따로 만들어서 사용하고 있다. 위 인피드 광고코드는 단독 사용가능한 코드로 필요한곳에 적절히 사용하면 된다.

06

of 07

최종 적용하기

공감 버튼 이동과 인피드 광고를 결합해서 최종 적용하면 된다.

##_article_rep_desc_##
<!-- 공감 이동 시작-->
<script>
( function( $ ) {
$( document ).ready( function() {
$( ".container_postbtn" ).before( $( ".adpositioning" ) );
} ) } )( tjQuery );
</script>
<div class="adpositioning">
<!--인피드 본문 하단 자동 광고 -->
<script>
if(window.innerWidth<660) {
// 인피드 모바일 광고
{document.write('<ins class="adsbygoogle"
style="display:block"
data-ad-format="fluid"
data-ad-layout-key="본인코드"
data-ad-client="본인코드"
data-ad-slot="본인코드"
data-language="ko"></ins>');
(adsbygoogle = window.adsbygoogle || []).push({}); }
}
else {
// 인피드 PC 광고
{document.write('<ins class="adsbygoogle"
style="display:block"
data-ad-format="fluid"
data-ad-layout-key="본인코드"
data-ad-client="본인코드"
data-ad-slot="본인코드"
data-language="ko"></ins>');
(adsbygoogle = window.adsbygoogle || []).push({}); }
}
</script>
</div>
<!-- 공감 이동 끝-->
</div>
Code language: HTML, XML (xml)

07

of 07

최종 확인

1. 모바일

2. PC

PC와 모바일 두 가지 모두 확인하면서 최대한 비슷하게 인피드 광고 스타일을 조금씩 변경하면 된다. 글자 폰트는 다르지만 글자 크기, 색상, 이미지 크기 등등 최대한 비슷하게 맞춰나가면 된다.