이러쿵저러쿵


본 포스팅은 애드센스를 이미 활용하고 있고, 티스토리 블로그를 운영하고 있는 사람을 대상으로 포스팅합니다.

 

애드센스에 대한 활용 및 코드 가져오기 기능에 대해 모르신다면 먼저 관련 내용을 숙지하시고 봐주세요.^^

 

애드센스에 대한 포스팅은 차 후, 기회가 되면 포스팅하도록 하겠습니다.

 

-------------------------------------------------------------------------------------------------------------------------------

 

티스토리 사이드바 등에는 쉽게 구글 광고를 모듈로 만들어서 달 수 있는 기능을 제공합니다.

 

하지만 본문에 구글 애드센스 광고를 달려면 HTML 코드를 수정할 필요가 있습니다.

 

이번 포스팅에서는 구글 애드센스 광고를 본문의 상단(상단 우측)과 하단(하단 중앙)에 달아보도록 하겠습니다.

 

먼저 300X250의 텍스트/이미지 광고 1개, 728X90의 텍스트/이미지 광고 1개의 구글 애드센스 코드를 준비합니다.

 

광고 코드는 아래와 같은 형태입니다.

 

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 오즈의순위왕(본문1) -->
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-0000000000000000"
     data-ad-slot="0000000000"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

 

위는 300 x 250 사이즈이며, 하단에 붙일 729x90 사이즈도 준비합니다.

보통 애드센스의 광고 사이즈는 권장 사이즈가 있지만, 사용자가 직접 사이즈를 지정할 수도 있습니다.

단 권장 사이즈를 사용해야 더 다양하고, 많은 광고가 노출될 확률이 높아집니다.

 

 

1. 광고 코드가 준비가 되었다면 티스토리 블로그 관리 페이지로 이동합니다.

 좌측 메뉴에서 [꾸미기 - HTML/CSS 편집] 메뉴를 선택합니다.

 

 

 

 

2. 본문 내용이 표시되는 HTML코드 영역을 찾습니다.

 * 소스 코드가 보이니, 어려워 하시는 분들도 있으실 테고, 이를 어떻게 수정해야 하나 걱정하시는 분들도 계실텐데, 어렵지 않습니다. 소스 코드를 수정할 일은 없고, 단지 본문 내용의 영역을 찾아서 구글 애드센스 코드를 삽입만 해주면 됩니다.

  해당 화면에서 Ctrl+F 단축키를 누릅니다. (찾기)

 

 

그러면 위와 같이 웹 브라우저 상단에 찾기 바(Bar)가 나타납니다. 검색어 입력란에 artcle_rep_desc 를 입력합니다.

 티스토리라면 무조건 1개의 일치되는 텍스트를 소스 코드에서 찾아냅니다. (자동으로 찾은 소스 코드로 화면이 이동합니다.)

 

 

 

 

 

3. [##_article_rep_desc_##] 를 찾았습니다!

 어떤 스킨을 사용하는지에 따라서 소스 코드가 조금씩 차이가 있지만, [##_article_rep_desc_##]는 티스토리에서 정의한 키워드로 어떤 스킨을 사용하든지 간에 동일합니다.

 실제 블로거가 내용을 포스팅하면 [##_article_rep_desc_##] 이 부분에 실제 포스팅 내용이 들어가게 됩니다.

 

 

 

 

 

그러면 위의 <div class="article"></div> 사이에 광고를 배치시키면 되겠군요.

네 맞습니다.!!

 

<div class="article">

... (상단 광고)

[##_article_rep_desc_##] 

... (하단 광고)

</div>

 

 위의 소스 코드에서 (상단 광고), (하단 광고) 부분에 구글 애드센스 코드를 삽입하면 됩니다.

 

 

 

 4. 맨 처음 준비한 구글 애드센스 코드 2개를 각각  <div class="article"></div> 사이에 삽입합니다.

 빨간색 박스로 되어 있는 것이 순수 구글 애드센스 코드입니다. 상단은 300px X 250px 광고, 하단은 728px X 90px 광고입니다.

 

 

 각가가 하나는 [##_article_rep_desc_##] 상단에, 다른 하나는 [##_article_rep_desc_##]에 삽입하였습니다.

 사실 빨간색 박스의 코드만 그대로 삽입하면 정상적으로 동작합니다만, 왜 굳이 상단은 300 x 250 사이즈를 택했고, 파란색 박스는 또 어떤 코드일까요?

 

 위의 파란색 코드는 본문 내용과 함께 광고가 배치되도록 한, div 코드입니다. 구글 애드센스 코드를 파란색 박스의 div 로 감싸게 되면 상단의 본문 내용이 표시되고, 그 본문 내용 우측에 광고가 함께 표시되도록 한 것입니다.

 

<div class="googleAd"  style="float:right; width:300px; height:250px;
    border:1px solid; margin-left:15px; margin-bottom:15px;">

 

.. 구글 애드센스 광고 ..

 

</div>

 

 

좀 더 광고 효과를 높이기 위한 전략이라고 할 수 있습니다.

 

상단 광고는 바로 아래와 같이 상단 내용 우측에 구글 애드센스 광고(300 x 250)가 노출됩니다.

 

 

 하단 광고는 아래처럼 노출됩니다. (728 x 90 사이즈 광고)

 

 

위의 상단 광고를 꼭 파란 박스 코드에 있는 div 로 감싸지 않고, 하단 광고와 동일한 사이즈로 내용 최상단에 배치하실 수도 있습니다.

단순히 광고를 어떻게 배치할 수 있는지에 대한 한가지 방법을 제시해 드린 것이므로 실제 블로거 분의 취향대로 광고를 만들어 배치하시면 됩니다.

 

기억하실 것은

[##_article_rep_desc_##] 

이 코드만 찾아서 광고를 상단, 하단에 배치하시면 된다는 점입니다!!!^^

 

 

참고로 본문 중간 중간에 구글 애드센스 광고를 달고 싶으신 경우도 있으실 텐데, 그러한 경우는 위의 템플릿 형태의 HTML 코드 삽입 방식으로는 다실 수 없으며, 실제 게시물을 작성하실 떄, 게시물 중간 중간에 구글 애드센스 코드를 삽입하셔야 합니다.

 

실제 본문 중간에 노출되는 광고가 가장 효과가 좋기는 합니다.

단지, 그러한 본문 중간에 노출되는 광고를 다시려면 매번 포스팅 하실 때마다 광고 코드를 삽입해주셔야 합니다.

그런데 본문 중간에 노출되는 광고는 실제 대부분이 본문의 내용과 상관없이 광고가 표시되어, 실제 게시물을 열람하는 사용자에게 불편을 주고, 포스팅 내용에 대한 집중도를 떨어뜨리기 때문에 개인적으로는 추천하지 않습니다.

 

 

 

 

 

 

저작자 표시 비영리 변경 금지
신고


Comment +3

  • 감사합니다.^^ 덕분에 광고 달 수 있었어요.

    • 안녕하세요. 꼬북아내님!

      도움이 되셨다니, 감사합니다.

      꼬북아내님의 블로그를 방문해 보았는데, 네덜란드에서 사시나요? ㅎㅎ 네덜란드 글들이 많은 것 같아요~ 유럽은 한 번도 가본적이 없는데, 언젠가는 한 번 놀러가보고 싶네요. ㅎㅎㅎ

      좋은 주말되세요~

  • 핑크아몬드 2017.12.11 11:22

    관리자의 승인을 기다리고 있는 댓글입니다

티스토리 툴바