구글 블로그 추천 테마 (EZZY) 상단 광고 넣기

제가 추천한 EZZY 테마를 보면, 헤더 부분 끝나고 본문으로 이어지는 중간에 상단에 광고가 들어갈 수 있는 공간이 하나 있습니다. 이곳은 원래 리더보드라고 해서 세로 사이즈가 100픽셀 남짓 정도 되는 배너형 광고를 주로 넣는 공간입니다.

이 부분에 딱 맞게 광고를 한 번 넣어보러 가실까요?

이 사이트는 마우스로 긁어서 붙여 넣는 것을 금지하는 코드를 따로 삽입하지 않았으니, 아래 코드를 복사해서 필요한 곳에 붙여 넣으시면 됩니다.

EZZY 테마 상단 광고 넣기

해당 공간에 들어가는 광고는 모바일에서는 320×100 정도 사이즈가 들어가면 좋고, 조금 더 넓은 폭 (핸드폰 가로모드 정도?)에서는 468×60 사이즈, 그리고 PC에서는 728×90 정도 크기의 광고가 들어가면 적당한 공간입니다.

무조건 큰 광고가 나온다고 더 많은 클릭이 발생하는 것도 아니잖아요? 과유불급이라 생각합니다.

상단 광고를 넣기 위해서는 우선 코드 부분을 수정해야겠죠? 수정을 위해 연필 아이콘을 누르면 기본적으로 그 공간을 채우기 위해 테마 제작자가 넣어놓은 코드가 있습니다.

또 HTML이야? 하시는 분들. 제발 공부를 좀 하세요. HTML은 어렵지 않습니다. 한글만큼 쉽습니다.

아무튼 그곳을 열면 아래와 같은 코드가 이미 들어가 있습니다.

<a class="sora-ads-full" href="javascript:;">Responsive Advertisement</a>
<style>
.sora-ads-full {
  display: block;
    background-color: #eee;
    text-align: center;
    font-size: 13px;
    color: #aaaaaa;
    font-weight: 400;
    font-style: italic;
    line-height: 90px;
    border: 1px solid #ccc;
}
</style>

저 부분은 전혀 필요가 없으니까, 몽땅 지워주세요. 정식으로 넣을 코드는 저기 적힌 것을 쓸 필요가 전혀 없습니다.

이제 어떤 코드로 채워야 하는지를 정리해 봅니다. 이 부분도 역시 html과 css를 조금 알아야 합니다만, 영어 단어 조금만 알면 쉽게 이해할 수 있습니다.

제가 추후 설정하려는 코드인데, 아래 코드를 복사해서 이용해 주세요. pub 코드와 slot 번호는 본인의 광고 코드를 활용해야 합니다.

<style>
.ad_responsive {
width:320px;height:100px;text-align:center;left-margin:auto;right-margin:auto;}
@media(min-width:500px) {.ad_responsive { width:468px;height:60px;} }
@media(min-width:800px) {.ad_responsive { width:728px;height:90px;} }
</style>
<center>
<ins class="adsbygoogle ad_responsive"
     data-ad-client="ca-pub-펍코드"
     data-ad-slot="슬롯번호"
></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script></center>

위 코드가 의미하는 것은 이렇습니다. 기본값은 가로 320픽셀, 세로 100픽셀의 광고를 송출하되, 미디어 크기(화면 크기)가 가로 500픽셀이 넘으면 가로 468픽셀, 세로 60픽셀의 크기로, 미디어 크기가 800픽셀이 넘으면 가로는 728픽셀, 세로는 90픽셀인 크기로 광고를 송출하라는 스타일을 정의해 줍니다. (이게 css)

그리고 아래 애드센스 광고 코드를 붙이는데, 이때 data-ad-client, data-ad-slot을 제외한 나머지 부분 (3줄입니다, 애드센스에서 기본적으로 제공해 주는 코드로는 펍코드 위에 한 줄, 그리고 슬롯번호 아래에 2줄입니다) 지워줍니다.

그리고 <ins class=”adsbygoogle”>이라고만 되어 있었던 것에 한 칸을 띄우고 ad_responsive라고 앞에서 정의한 스타일도 사용을 하라고 선언을 해 줘야 합니다.

class가 무엇인지는 몰라도 됩니다. 하지만, 정확하게 따라서 해야 합니다. 저렇게 코드를 기입하고 ‘저장’을 누르세요.

그리고 나서 블로그에 접속을 해 보시면, PC에서는 가로로 길고 세로는 짧은 보드 형태의 광고가 송출됩니다. 모바일에서는 가로/세로 비율이 살짝 다른 광고가 나오게 되고요.

애드센스 광고 코드 앞에 <center>가 있고, 광고 코드 끝나는 곳에 </center>가 있는데, 이것은 해당 영역에 광고가 가운데 정렬이 되도록 하는 코드입니다. 요즘은 잘 쓰지 않는 태그라고 하지만, 여러 시도를 해 봤는데 저 태그 외에는 광고가 가운데로 가질 않더군요. 그래서 꼭 넣어주시기 바랍니다.

이 방식으로 코드를 넣어주어야 광고가 해당 영역을 벗어나 다른 곳까지 침범하면서 나오지 않게 됩니다.