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

2019. 8. 13. 00:59·예전 게시글/공부 관련

[티스토리 스킨 만들기] 반응형 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> 위에 붙혀넣습니다.

 

 

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

 

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

 

 

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

 

 

 

 

 

 

 

저작자표시

'예전 게시글 > 공부 관련' 카테고리의 다른 글

[티스토리 스킨만들기] 유튜브 재생목록을 블로그 배경음악으로 넣고 자동재생에 연속 재생까지 하는 법  (1) 2019.08.21
[티스토리 스킨 만들기] 반응형2 스킨 사이드 배너 광고 만들기  (0) 2019.08.14
[C, C++ 기초 강좌] #3. C언어 완전 초보를 위한 - 조건문과 반복문  (0) 2019.07.31
[티스토리 스킨 만들기] 티스토리 sns 공유 버튼 만들기(텀블러, 네이버, 트위터, 페이스북)  (0) 2019.07.30
[C, C++ 기초 강좌] #2. C언어 완전 초보를 위한 - 자료형과 형식 지정자, 변수 그리고 문자를 입력하여 계산기 만들기  (0) 2019.07.30
'예전 게시글/공부 관련' 카테고리의 다른 글
  • [티스토리 스킨만들기] 유튜브 재생목록을 블로그 배경음악으로 넣고 자동재생에 연속 재생까지 하는 법
  • [티스토리 스킨 만들기] 반응형2 스킨 사이드 배너 광고 만들기
  • [C, C++ 기초 강좌] #3. C언어 완전 초보를 위한 - 조건문과 반복문
  • [티스토리 스킨 만들기] 티스토리 sns 공유 버튼 만들기(텀블러, 네이버, 트위터, 페이스북)
aptenia
aptenia
공부하면서 배운 것들
  • aptenia
    새벽의 아이디어
    aptenia
  • 전체
    오늘
    어제
    • 분류 전체보기 (275) N
      • f1tenth (1) N
      • 예전 게시글 (268)
        • 개발 관련 (25)
        • 정보 관련 (19)
        • 공부 관련 (224)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
    • 네이버 블로그
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    이것이자바다
    마크
    캡스톤디자인
    안드로이드
    프로그래머스PCCE
    스크롤바CSS
    마인크래프트스크립트
    자바
    티스토리스킨편집
    마크스크립트
    티스토리HTML
    백준
    반복하지않는수
    이것이자바다연습문제
    빅데이터공모전
    C언어
    파이어베이스
    일본규슈공업대학교
    프로그래머스
    공개SW개발자대회
    파이썬
    컨텍스트스위칭
    c언어초보
    마인크래프트
    티스토리반응형2스킨편집
    C언어강좌
    이것이자바다확인문제
    C++강좌
    마인크래프트강화스크립트
    콜라츠추측
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
aptenia
[티스토리 스킨 만들기] 반응형 2 스킨 인피드 광고 5분만에 만들기
상단으로

티스토리툴바