[블로그 꾸미기] 4. 구글 애드센스(구글 광고) 애드센스 본문과 글목록에 광고 넣기

[블로그 꾸미기] 1. 구글 애드센스(구글 광고) 신청하기

[블로그 꾸미기] 2. 구글 애드센스(구글 광고) 탈락과 성공

[블로그 꾸미기] 3. 구글 애드센스(구글 광고) 애드센스 승인 후 적용하기

[블로그 꾸미기] 4. 구글 애드센스(구글 광고) 애드센스 글 목록에 광고 넣기

[블로그 꾸미기] 5. 구글 애드센스(구글 광고) 모바일에 광고 넣기

안녕하세요, David Park입니다.

오늘은 지금까지 구글 애드센스를 흔히 볼 수 있는 본문과 글목록에 넣은 방법에 대해서 알아보도록 하겠습니다.

사이드 바에 광고를 넣는 것은 

[블로그 꾸미기] 3. 구글 애드센스(구글 광고) 애드센스 승인 후 적용하기

에서 확인하실 수 있어요.

본인계정의 애드센스로 이동해서 이번엔 가로로 긴 사이즈의 광고를 선택하고 해당 코드를 가지고 옵니다.

본인 취향에 따라서 크기는 정해도 되긴 하기만, 아무래도 전 개인적으로 가로로 긴 광고가 나은 것 같더라구요.

꼭 가로로 긴 광고를 하실 필요는 없으니, 사이즈는 본인의 취향대로 선택하시면 되겠습니다.

위와 같이 광고코드를 얻어왔구요, 해당 내용들도 모두 복사를 해 둡니다.

그리고 이제 본인의 티스토리 블로그의 관리->꾸미기->HTML/CSS편집 으로 갑니다.

우리는 이제 skin.html 을 약간 손봐서 광고를 넣어줄 겁니다.

(1)글 목록에 넣기

skin.html에서 글 목록에 관련된 태그는 <s_list>입니다.

<s_list>를 찾아볼까요?

<s_list>

<div id="searchList" class="nonEntry">

<h3>''에 해당되는 글 건</h3>

<ol>

<s_list_rep>

<li>

<span class="date"></span>

<a href=""></a>

<span class="cnt"></span>

</li>

</s_list_rep>

</ol>

</div>

</s_list>

에서 빨간색으로 표시된 부분이 글 목록입니다.

이제 광고코드 삽입 위치에 따른 광고위치를 알려드리겠습니다.

말풍선으로 지정된 위치에 복사해 두신 광고코드를 넣으시면 적용이 됩니다.

적용된 모습은 아래와 같습니다.

목록의 위와 아래에 잘 적용이 되었네요^^

이제 본문에 넣는 방법을 알아 볼까요?

(2)본문에 넣기

skin.html에서 본문에 관련된 태그는 article_rep_desc입니다.

[블로그 꾸미기] 1. 구글 애드센스(구글 광고) 신청하기

[블로그 꾸미기] 2. 구글 애드센스(구글 광고) 탈락과 성공

[블로그 꾸미기] 3. 구글 애드센스(구글 광고) 애드센스 승인 후 적용하기

[블로그 꾸미기] 4. 구글 애드센스(구글 광고) 애드센스 글 목록에 광고 넣기

[블로그 꾸미기] 5. 구글 애드센스(구글 광고) 모바일에 광고 넣기

안녕하세요, David Park입니다.

오늘은 지금까지 구글 애드센스를 흔히 볼 수 있는 본문과 글목록에 넣은 방법에 대해서 알아보도록 하겠습니다.

사이드 바에 광고를 넣는 것은 

[블로그 꾸미기] 3. 구글 애드센스(구글 광고) 애드센스 승인 후 적용하기

에서 확인하실 수 있어요.

본인계정의 애드센스로 이동해서 이번엔 가로로 긴 사이즈의 광고를 선택하고 해당 코드를 가지고 옵니다.

본인 취향에 따라서 크기는 정해도 되긴 하기만, 아무래도 전 개인적으로 가로로 긴 광고가 나은 것 같더라구요.

꼭 가로로 긴 광고를 하실 필요는 없으니, 사이즈는 본인의 취향대로 선택하시면 되겠습니다.

위와 같이 광고코드를 얻어왔구요, 해당 내용들도 모두 복사를 해 둡니다.

그리고 이제 본인의 티스토리 블로그의 관리->꾸미기->HTML/CSS편집 으로 갑니다.

우리는 이제 skin.html 을 약간 손봐서 광고를 넣어줄 겁니다.

(1)글 목록에 넣기

skin.html에서 글 목록에 관련된 태그는 <s_list>입니다.

<s_list>를 찾아볼까요?

<s_list>

<div id="searchList" class="nonEntry">

<h3>''에 해당되는 글 건</h3>

<ol>

<s_list_rep>

<li>

<span class="date"></span>

<a href=""></a>

<span class="cnt"></span>

</li>

</s_list_rep>

</ol>

</div>

</s_list>

에서 빨간색으로 표시된 부분이 글 목록입니다.

이제 광고코드 삽입 위치에 따른 광고위치를 알려드리겠습니다.

말풍선으로 지정된 위치에 복사해 두신 광고코드를 넣으시면 적용이 됩니다.

적용된 모습은 아래와 같습니다.

목록의 위와 아래에 잘 적용이 되었네요^^

이제 본문에 넣는 방법을 알아 볼까요?

(2)본문에 넣기

skin.html에서 본문에 관련된 태그는 article_rep_desc입니다.

를 찾으셨다면 해당 태그를 기준으로 

위쪽에 광고코드를 넣으시면 본문 상단, 아래쪽에 넣으시면 본문 하단에 광고가 들어갑니다.

그리고 광고들을 본문이나 목록의 중앙에 위치시키고 싶으시면

<center>라는 태그를 써 주시면 됩니다.

가지고 오신 광고코드의 전후로 써 주시면 됩니다.

<center>

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

<!-- 목록에넣을 애드센스 -->

<ins class="adsbygoogle"

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

     data-ad-client="ca-pub-3219572050242654"

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

<script>

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

</script>

</center>

이렇게 말이죠!^^

참 쉽죠~?

를 찾으셨다면 해당 태그를 기준으로 

위쪽에 광고코드를 넣으시면 본문 상단, 아래쪽에 넣으시면 본문 하단에 광고가 들어갑니다.

그리고 광고들을 본문이나 목록의 중앙에 위치시키고 싶으시면

<center>라는 태그를 써 주시면 됩니다.

가지고 오신 광고코드의 전후로 써 주시면 됩니다.

<center>

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

<!-- 목록에넣을 애드센스 -->

<ins class="adsbygoogle"

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

     data-ad-client="ca-pub-3219572050242654"

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

<script>

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

</script>

</center>

이렇게 말이죠!^^

참 쉽죠~?