본문 바로가기

프로그래밍/티스토리

[티스토리 스킨 만들기] 반응형 2 스킨 인피드 광고 5분만에 만들기

728x90
반응형

[티스토리 스킨 만들기] 반응형 2 스킨 인피드 광고 5분 만에 만들기 


 

 

안녕하세욥! 최근에 여러가지 일들이 생겨서 블로그를 전혀 하지 않았었는데

 

갑자기 구글애드센스 합격 메일이 왔더라구요 ㅋㅋㅋ;;

 

처음에 블로그 만들고 아무것도없었을 때 혹시나 하고 신청했으나 역시나 탈락

 

그리고 10개 정도 글을 올리고 신청 했으나 탈락이었는데

 

아니 ㅋㅋ 탈락하고 바로 신청했는데 갑자기 합격이래 ㅋㅋㅋㅋ

 

여튼 그래서 구글 광고를 달아보겠습니다.

 

먼저 제가 달아볼건 인피드 광고라는건데 저도 오늘 처음해봅니다!

 

블로그 홈에 글 속에 광고가 들어있는걸 보셨을겁니다.

 

 

위 사진처럼 글 속에 광고가 들어있는

 

이런 광고를 같이 달아보겠습니다!

 

 

 


 

1. 인피드 광고 단위 만들기

 

먼저 구글 애드센스에 접속을 하시고

 

 

광고 단위를 클릭하면 화면 중앙에 인피드 광고가 있습니다.

 

이걸 클릭합니다.

 

 

 

URL자신의 블로그 주소를 넣고 페이지 스캔하기 버튼 왼쪽에 모바일을 데스크탑으로 바꿔줍니다.

 

그리고 페이지 스캔하기 버튼을 클릭합니다.

 

 

 

페이지가 스캔되고 자동으로 광고 UI를 만들어줍니다.

 

따로 설정 하실게 있다면 설정 후 저장 및 코드 생성 버튼을 클릭합니다.

 

 

다음 사이트에서 나오는 코드를 전부 복사하여 메모장이나 어딘가에 붙혀넣기 합니다.

 

그리고 완료를 누릅니다.

 

여기까지가 광고 코드를 만드는건데 정말 쉽더라구요 ㄷㄷ

 

블로그 통과만 되면 하는건데...

 

네이버 블로그도 구글 광고 됬으면 좋겠습니다 ㅠㅠ

 

 

 


 

1. 코드 수정하고 붙혀넣기

 

코드를 직접 짜는게 아니고 그냥 복사 붙혀넣기만 하시면 됩니다.

 

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="fluid"
     data-ad-layout-key="★"
     data-ad-client="■"
     data-ad-slot="♥"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

 

애드센스에서 복사한 코드는 위와같은 형태로 이루어져있을겁니다.

 

이제 몇개의 글이 나오고 광고가 나오도록 코드를수정해줄겁니다.

 

수정하는 코드는 아래 블로그에서 가져왔습니다.

 

https://yh-shine-kim.tistory.com/86

 

<!--구글 인피드 광고-->
 <script>
InfeedCount ++;
  if ( InfeedCount % 2 == 0 ) {
       document.write('<ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="★" data-ad-client="■" data-ad-slot="♥"></ins>');
(adsbygoogle = window.adsbygoogle || []).push({});
}
</script>

 

*ps. InfeedCount % 2 == 0의 숫자를 바꾸면 글과 광고의 수와 위치를 바꿀 수 있습니다.

 

여튼 위 코드그대로 복사하여

 

</s_index_article_rep> 위에 붙혀넣습니다.

 

그리고 ★ ■ ♥에 각각 자신의 데이터를 넣으시면 됩니다.

 

예를 들면 data-ad-layout-key="--dd+asd+asd" 이런식이면 --dd+asd+asd를 ■ 대신에 넣으시면 됩니다.

 

음... 위 블로그는 <s_index_article_rep> 밑에 넣으라고 하지만

 

그러면 글 맨 위와 아래가 보여주고자 하는 글 갯수의 -1 만큼

 

보여주고 광고가 들어가기 때문에 뭐 광고가 글 안으로 들어간다는 장점은 있지만

 

저는 정확한걸 좋아해서 </s_index_article_rep> 위에 둡니다.

 

 

 

그리고 또 하나 코드를 복사 해야합니다.

 

<!--구글 인피드 광고-->	
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
	var InfeedCount = 0;
</script>

 

위 코드를 복사하여 이번에는 그냥 그대로 수정할 일 없이 </head> 위에 붙혀넣습니다.

 

 

그리고 적용하면 블로그 홈에 광고가 적용되신걸 볼 수 있습니다!

 

좀 전에 다음 광고도 신청했는데 될런지 모르겠네요~

 

 

그럼 여기까지 여기서 마치겠습니다!

 

 

 

 

 

 

 

728x90
반응형