Tistory에 Googld Adsense 광고 생성

|


사실 별 돈 안되는것은 알지만 그래도 광고하는 기분 내고자 달았다.ㅎㅎ

애드센스 계정은 이전 홈페이지 운영할 때 만들어뒀던 것이 있어 그것을 이용하였다.



1. 구글 애드센스 계정 생성


https://www.google.com/adsense  에서 구글 계정으로 생성하면 된다.

페이지의 내용도 어느정도 있어야만 애드센스를 사용할 수 있다고 한다.

나의 경우는 게시글이 어느정도 있었을 때 신청해서 한번에 통과했는데 실패하는 경우도 있다고 한다.





2. 광고 생성


콘텐츠 - 광고단위 에 들어가면 +새 광고단위 버튼을 통해 광고를 만들 수 있다.

아래쪽 옵션들을 선택하여 자신의 블로그에 삽입할 크기대로 만들면 되겠다.


나의 경우 게시글마다 위쪽에 띄우기 위해 728 * 90 사이즈로 설정했다.

광고 유형은 텍스트 및 디스플레이 광고를, 광고 스타일은 단순형 스타일이다.

아래쪽 저장 및 코드 생성하면 코드가 생성되는데 잘 복사해두길 바란다.





3. 코드 삽입


1) HTML 수정


HTML/CSS - skin.html

         <div class="article_post">

<div class="googld_adsense" align="center">

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

<!-- kanziw.tistory.com -->

<ins class="adsbygoogle"

     style="display:inline-block;width:728px;height:90px"

     data-ad-client="xxxxxxxxxx"

     data-ad-slot="xxxxxxxxxx"></ins>

<script>

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

</script></div><br><br>

##_article_rep_desc_##</div>


*

class가 article_post인 div를 찾아 그 안에 생성된 코드를 삽입한다.

광고를 가운데 정렬 하기 위해 div 태그 안에 scsript를 넣었으며 가운데 정렬을 설정했다.

아래쪽 css에서 크기 옵션을 주기 위해 google_adsense class를 만들었다.



2) CSS 수정


HTML/CSS - skin.css

/* 포스트 내부 */

.google_adsense * { width: 728px; height: 90px; } 


*

광고 크기 대로 너비 728px, 높이 90px로 지정했다.




이제 정상적으로 광고가 게시된 것을 확인할 수 있다.




'Tistory' 카테고리의 다른 글

Tistory 에서 Markdown 문법으로 글 쓰기  (1) 2016.12.21
Tistory 에서 코드 예쁘게 출력하기  (1) 2015.09.03
내 도메인을 Tistory 연결  (0) 2015.03.27
Tistory Skin, HTML, CSS 설정  (0) 2015.03.26
And