티스토리 애드센스 상단 광고 2개 넣는 방법
티스토리 블로그에 넣는 애드센스 상단 광고는 보통 블로그 본문의 넓이에 맞게 1개를 넣는다.
하지만 코드를 약간 수정하면 정사각형으로 된 2개의 광고를 넣을 수도 있는데 이렇게 광고를 2개 넣게 되면 각각 다른 광고가 나타날 수 있어 효과가 좋은 경우가 있다고 한다.
(물론 블로그의 레이아웃이나 주제에 따라서 다를 수는 있다.)
티스토리 애드센스 상단 광고 2개 넣는 방법
1. 애드센스 광고 생성.
사용하는 광고 코드가 겹치면 안 되니 여분의 광고가 2개 있어야 한다.
상단 광고로 사용하던 코드가 있다면 여기서 사용하면 되니 1개만 더 생성하면 되며, 여분의 광고가 없다면 2개를 새로 생성하도록 하자.
(디스플레이 형식 반응형으로 생성하면 무난할 것이다.)
2. 광고 코드 복사.
광고를 생성했다면 코드 가져오기에서 data-ad-client와 data-ad-slot의 코드를 메모장에 복사해두도록 하자.
3. 코드 만들기.
이제 광고를 2개 넣기 위한 코드를 만들어야 하는데 아래의 코드를 가지고 몇 가지만 수정하면 어느 정도 수월하게 만들 수 있지 않을까 한다.
- 샘플 코드 <div style="text-align: center;"> <style> .ad1, .ad2{ width: 336px; height: 280px;} @media(max-width: 725px) {.ad2 { display:none; } } </style> <ins class="adsbygoogle ad1" data-ad-client="xxxxxxxxx" data-ad-slot="xxxxxxx"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <ins class="adsbygoogle ad2" data-ad-client="xxxxxxxxx" data-ad-slot="xxxxxxx"</ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> |
샘플 코드.txt우선 메모장에 복사해둔 data-ad-client와 data-ad-slot의 값을 샘플 코드의 data-ad-client와 data-ad-slot에 덮어 씌우도록 하자.
(광고가 2개니 위,아래 각각 적용해야 한다.)
- data-ad-client와 data-ad-slot 값 변경 <ins class="adsbygoogle ad1" data-ad-client="xxxxxxxxx" data-ad-slot="xxxxxxx"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <ins class="adsbygoogle ad2" data-ad-client="xxxxxxxxx" data-ad-slot="xxxxxxx"</ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> |
그다음 화면이 작아지면 2개의 광고가 세로로 나타나지 않도록 하기 위해 @media부분의 max-width 값을 수정해야 한다.
max-width의 값 보다 웹 브라우저의 화면이 작아지면 광고1은 일반 반응형 광고로 나타나고, 광고2는 보이지 않도록 되니 사용하고 있는 블로그의 스킨에 맞게 max-width값을 조절하면 된다.
(한번에 적용하기는 힘드니 이 부분은 적용 후 확인하면서 수정이 필요하다.)
- max-width 값 변경 <style> .ad1, .ad2{ width: 336px; height: 280px;} @media(max-width: 715px) { .ad2 { display:none; } } </style> |
4. 코드 적용.
수정한 코드는 일반적인 상단 광고를 넣을 때와 같이 플러그인의 구글 애드센스(반응형)에 상단 코드를 넣어 적용시켜도 되고 html 편집에서 위에 코드를 넣어 적용시켜도 된다.
그 외.
위 코드는 간단한 샘플 코드로 광고 간의 여백이나 테두리 등은 나타나지 않는다.
때문에 사용하고 있는 스킨에 맞춰서 수정이 필요할 수도 있는데 기본적으로 @media 부분만 스킨에 맞게 잘 수정한다면 무난하게 사용할 수는 있지 않을까 한다.