티스토리 본문 상단에 광고 2개 넣기

이번에 티스토리 블로그를 반응형으로 변경하면서

광고도 반응형으로 변경했는데

상단광고가 2개인개 더 괜찮은거 같아 변경 했습니다. 

플러그인에서는 상단광고 2개를 넣을수 없기에

HTML을 수정해 줘야 합니다.

반응형 블로그이기에

 창 너비가 작거나, 모바일의 경우 1개만 노출되고

창너비가 넓은 PC의 경우 2개 노출 되는 방식으로 설정했습니다.

상단광고 2개를 넣는 방식은 스킨에 따라 약간씩 달라지는데

저는 2015년 공모전 대상을 받은 Square 

스킨을 사용하였습니다.

설정 방법은 아래와 같습니다.

꾸미기 -> HTML/CSS 편집에서

html 부분에

반응형

이번에 티스토리 블로그를 반응형으로 변경하면서

광고도 반응형으로 변경했는데

상단광고가 2개인개 더 괜찮은거 같아 변경 했습니다. 

플러그인에서는 상단광고 2개를 넣을수 없기에

HTML을 수정해 줘야 합니다.

반응형 블로그이기에

 창 너비가 작거나, 모바일의 경우 1개만 노출되고

창너비가 넓은 PC의 경우 2개 노출 되는 방식으로 설정했습니다.

상단광고 2개를 넣는 방식은 스킨에 따라 약간씩 달라지는데

저는 2015년 공모전 대상을 받은 Square 

스킨을 사용하였습니다.

설정 방법은 아래와 같습니다.

꾸미기 -> HTML/CSS 편집에서

html 부분에

<-- 이거 윗부분에 아래 내용을 붙여 넣기 하면됩니다.

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

<div style="text-align: center;">

<span>

<style type="text/css">

.ad1 {width: 320px; height: 100px; }

.ad2 {width: 0px; height: 0px; }

@media (min-width: 400px) { .ad1 { width: 300px; height: 250px; } }

@media (min-width:1040px) { .ad1 { width: 300px; height: 250px; } }

@media (min-width:1080px) { .ad1 { width: 336px; height: 280px; } .ad2 { width: 336px; height: 280px; margin-left8%; } }

</style>

<div class="adstyle1" style="text-align:center, margin-bottom:30px,">

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

<!-- 상단왼쪽1 -->

<ins class="adsbygoogle ad1"

     style="display:inline-block"

     data-ad-client="ca-pub-클라이언트 코드"

     data-ad-slot="광고코드"></ins>

<script>

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

</script>

<!-- 상단 오른쪽2 -->

<ins class="adsbygoogle ad2"

     style="display:inline-block"

     data-ad-client="ca-pub-클라이언트 코드"

     data-ad-slot="광고코드"></ins>

<script>

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

</script>

</div>

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

클라이언트, 광고코드는 구글애드센스에서 광고 생성후 

코드가져오기에서 복사해서 붙여 넣으면 됩니다.

모자이크 된부분을 복사해서 붙여 넣으면 됩니다.

이렇게 하면 상단2개 반응형으로 완성이 됩니다.

하단의 경우 보통 1개만 넣기에

플러그인 메뉴에서

구글애드센스 반응형에서 하나만 체크 하여 반영해줍니다.

이렇게 하면 완료 입니다.

 

하지만 뭐가 문제인지 400픽셀 미만에서는 노출이 안되더라구요

다른 블로그를 다 살펴봤는데도 방법을 찾을수가 없더군요

그래서 해결한 방법은

플러그인에서 구글애드센스 모바일용에서 

상단만 체크후 320*100 광고를 넣었습니다.

"본문에 삽입된 애드센스 광고 감추기" 를 체크 하여

모바일에서는 320*100 광고만 노출되게 하였습니다.

이렇게 하였더니 큰문제 없이 잘 확인되었습니다.

다만 블로그 중간에 삽입한 광고가 

모바일에서는 다 감춰지고

상, 하단 광고만 노출되게 됩니다.

제 블로그는 중간광고를 많이 넣지 않는 편이라서 

크게 상관은 안하기에 만족은 하는데

무슨 문제여서 이 코드가 적용이 안되는지 확인해봐야겠네요

어쨋든 본문상단 광고 2개 넣기 성공~!!

반응형

<-- 이거 윗부분에 아래 내용을 붙여 넣기 하면됩니다.

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

<div style="text-align: center;">

<span>

<style type="text/css">

.ad1 {width: 320px; height: 100px; }

.ad2 {width: 0px; height: 0px; }

@media (min-width: 400px) { .ad1 { width: 300px; height: 250px; } }

@media (min-width:1040px) { .ad1 { width: 300px; height: 250px; } }

@media (min-width:1080px) { .ad1 { width: 336px; height: 280px; } .ad2 { width: 336px; height: 280px; margin-left8%; } }

</style>

<div class="adstyle1" style="text-align:center, margin-bottom:30px,">

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

<!-- 상단왼쪽1 -->

<ins class="adsbygoogle ad1"

     style="display:inline-block"

     data-ad-client="ca-pub-클라이언트 코드"

     data-ad-slot="광고코드"></ins>

<script>

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

</script>

<!-- 상단 오른쪽2 -->

<ins class="adsbygoogle ad2"

     style="display:inline-block"

     data-ad-client="ca-pub-클라이언트 코드"

     data-ad-slot="광고코드"></ins>

<script>

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

</script>

</div>

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

클라이언트, 광고코드는 구글애드센스에서 광고 생성후 

코드가져오기에서 복사해서 붙여 넣으면 됩니다.

모자이크 된부분을 복사해서 붙여 넣으면 됩니다.

이렇게 하면 상단2개 반응형으로 완성이 됩니다.

하단의 경우 보통 1개만 넣기에

플러그인 메뉴에서

구글애드센스 반응형에서 하나만 체크 하여 반영해줍니다.

이렇게 하면 완료 입니다.

 

하지만 뭐가 문제인지 400픽셀 미만에서는 노출이 안되더라구요

다른 블로그를 다 살펴봤는데도 방법을 찾을수가 없더군요

그래서 해결한 방법은

플러그인에서 구글애드센스 모바일용에서 

상단만 체크후 320*100 광고를 넣었습니다.

"본문에 삽입된 애드센스 광고 감추기" 를 체크 하여

모바일에서는 320*100 광고만 노출되게 하였습니다.

이렇게 하였더니 큰문제 없이 잘 확인되었습니다.

다만 블로그 중간에 삽입한 광고가 

모바일에서는 다 감춰지고

상, 하단 광고만 노출되게 됩니다.

제 블로그는 중간광고를 많이 넣지 않는 편이라서 

크게 상관은 안하기에 만족은 하는데

무슨 문제여서 이 코드가 적용이 안되는지 확인해봐야겠네요

어쨋든 본문상단 광고 2개 넣기 성공~!!