티스토리 반응형 스킨에 반응형광고 배치하기

반응형 스킨으로 바꿔놓고 반응형 광고가 아닌 고정 크기형 광고를 배치하고 있었어요..

그러다 보니, 모바일 웹 페이지로 들어가면 광고만 차지하고 있더라구요..

그래서 어렵다고 미루고 미루다가 반응형 광고에 대해 공부를 하고, 드디어 제 블로그에도 반응형광고 배치했답니다. :)

티스토리는 블로그를 하면서 공부를 하게 만드네요.. 어려워요 ㅠㅠㅠㅠ

먼저, 구글 애드센스(http://www.google.com/adsense) 들어가셔서 반응형 광고 하나 만들어주세요~

반응형 광고를 하나 만드셨으면, 관리 페이지에서 [HTML/CSS 편집] 메뉴를 클릭하세요.

이제 여기서부터 중요합니다!! 

반응형 스킨으로 바꿔놓고 반응형 광고가 아닌 고정 크기형 광고를 배치하고 있었어요..

그러다 보니, 모바일 웹 페이지로 들어가면 광고만 차지하고 있더라구요..

그래서 어렵다고 미루고 미루다가 반응형 광고에 대해 공부를 하고, 드디어 제 블로그에도 반응형광고 배치했답니다. :)

티스토리는 블로그를 하면서 공부를 하게 만드네요.. 어려워요 ㅠㅠㅠㅠ

먼저, 구글 애드센스(http://www.google.com/adsense) 들어가셔서 반응형 광고 하나 만들어주세요~

반응형 광고를 하나 만드셨으면, 관리 페이지에서 [HTML/CSS 편집] 메뉴를 클릭하세요.

이제 여기서부터 중요합니다!! 

을 찾아서 앞 뒤에다가 반응형 광고를 넣어주시면 되요. 

참고!! 

은 포스팅한 글 위치를 말하는 코드에요. 

분명히 ##_article_rep_desc_##을 선언한 부분이 있을 것 같은데 지금 저 소스에서는 잘 못찾겠네요 ㅠ

1. 반응형 광고 1개 배치하기

광고를 상단에 배치하시려면 의 앞에 첨부한 반응형광고 소스를 넣어주심 되요.

반응형광고.txt

<style>

.ad-01 {width: 336px; height: 280px;}

@media (min-width: 400px) { .ad-01 { width: 300px; height: 50px; }} // 최소 width가 400px 이하일때 광고사이즈

@media (min-width:1084px) { .ad-01 { width: 336px; height: 280px; }} // 최소 width가 1084px 이하일때 광고사이즈

</style>

<div class="adsense1" style="text-align: center; margin-bottom:90px;">

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

<ins class="adsbygoogle ad-01"

 style="display:inline-block"

 data-ad-client="ca-pub-개별번호"

 data-ad-slot="개별번호"></ins>

<script>

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

</script>

</div>

2. 반응형 광고 2개 나란히 배치하기

구글 애드센스 정책 상 한 페이지에 광고가 3개이상이면 안된다고 알고 있어요.

저는 기존에 플러그인 사용해서 상단에 1개, 하단에 2개 광고를 배치하고 있었는데 반응형광고를 하더라도 

똑같이 배치를 하고 싶었어요.

저처럼 광고를 나란히 배치하고 싶다면, 하기 소스를 참고하세요.

반응형광고2개배치.txt

<style>

.ad-01 {width: 336px; height: 280px;}

.ad-02 {width: 0px; height: 0px;}

@media (min-width: 400px) { .ad-01 { width: 336px; height: 280px; }} // 최소 width가 400px 이하일때 광고사이즈

@media (min-width:1084px) { .ad-01 { width: 336px; height: 280px; } .ad-02 { width: 336px; height: 280px; margin-left: 5%;}}

       // 최소 width가 1084px 이하일때 광고 2개 나란히 배치

</style>

<div class="adsense1" style="text-align: center; margin-bottom:90px;">

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

<!-- 왼쪽 -->

<ins class="adsbygoogle ad-01"

style="display:inline-block"

data-ad-client="ca-pub-개별번호"

data-ad-slot="개별번호"></ins>

<script>

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

</script>

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

<!-- 오른쪽 -->

<ins class="adsbygoogle ad-02"

style="display:inline-block"

data-ad-client="ca-pub-개별번호"

data-ad-slot="개별번호"></ins>

<script>

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

</script>

</div>

저처럼 반응형 광고배치에 애를 먹고 있다면 저처럼 한 번 해보세요!

도움이 많이 되었으면 해요 :)

을 찾아서 앞 뒤에다가 반응형 광고를 넣어주시면 되요. 

참고!! 

반응형 스킨으로 바꿔놓고 반응형 광고가 아닌 고정 크기형 광고를 배치하고 있었어요..

그러다 보니, 모바일 웹 페이지로 들어가면 광고만 차지하고 있더라구요..

그래서 어렵다고 미루고 미루다가 반응형 광고에 대해 공부를 하고, 드디어 제 블로그에도 반응형광고 배치했답니다. :)

티스토리는 블로그를 하면서 공부를 하게 만드네요.. 어려워요 ㅠㅠㅠㅠ

먼저, 구글 애드센스(http://www.google.com/adsense) 들어가셔서 반응형 광고 하나 만들어주세요~

반응형 광고를 하나 만드셨으면, 관리 페이지에서 [HTML/CSS 편집] 메뉴를 클릭하세요.

이제 여기서부터 중요합니다!! 

을 찾아서 앞 뒤에다가 반응형 광고를 넣어주시면 되요. 

참고!! 

은 포스팅한 글 위치를 말하는 코드에요. 

분명히 ##_article_rep_desc_##을 선언한 부분이 있을 것 같은데 지금 저 소스에서는 잘 못찾겠네요 ㅠ

1. 반응형 광고 1개 배치하기

광고를 상단에 배치하시려면 의 앞에 첨부한 반응형광고 소스를 넣어주심 되요.

반응형광고.txt

<style>

.ad-01 {width: 336px; height: 280px;}

@media (min-width: 400px) { .ad-01 { width: 300px; height: 50px; }} // 최소 width가 400px 이하일때 광고사이즈

@media (min-width:1084px) { .ad-01 { width: 336px; height: 280px; }} // 최소 width가 1084px 이하일때 광고사이즈

</style>

<div class="adsense1" style="text-align: center; margin-bottom:90px;">

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

<ins class="adsbygoogle ad-01"

 style="display:inline-block"

 data-ad-client="ca-pub-개별번호"

 data-ad-slot="개별번호"></ins>

<script>

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

</script>

</div>

2. 반응형 광고 2개 나란히 배치하기

구글 애드센스 정책 상 한 페이지에 광고가 3개이상이면 안된다고 알고 있어요.

저는 기존에 플러그인 사용해서 상단에 1개, 하단에 2개 광고를 배치하고 있었는데 반응형광고를 하더라도 

똑같이 배치를 하고 싶었어요.

저처럼 광고를 나란히 배치하고 싶다면, 하기 소스를 참고하세요.

반응형광고2개배치.txt

<style>

.ad-01 {width: 336px; height: 280px;}

.ad-02 {width: 0px; height: 0px;}

@media (min-width: 400px) { .ad-01 { width: 336px; height: 280px; }} // 최소 width가 400px 이하일때 광고사이즈

@media (min-width:1084px) { .ad-01 { width: 336px; height: 280px; } .ad-02 { width: 336px; height: 280px; margin-left: 5%;}}

       // 최소 width가 1084px 이하일때 광고 2개 나란히 배치

</style>

<div class="adsense1" style="text-align: center; margin-bottom:90px;">

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

<!-- 왼쪽 -->

<ins class="adsbygoogle ad-01"

style="display:inline-block"

data-ad-client="ca-pub-개별번호"

data-ad-slot="개별번호"></ins>

<script>

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

</script>

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

<!-- 오른쪽 -->

<ins class="adsbygoogle ad-02"

style="display:inline-block"

data-ad-client="ca-pub-개별번호"

data-ad-slot="개별번호"></ins>

<script>

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

</script>

</div>

저처럼 반응형 광고배치에 애를 먹고 있다면 저처럼 한 번 해보세요!

도움이 많이 되었으면 해요 :)

은 포스팅한 글 위치를 말하는 코드에요. 

분명히 ##_article_rep_desc_##을 선언한 부분이 있을 것 같은데 지금 저 소스에서는 잘 못찾겠네요 ㅠ

1. 반응형 광고 1개 배치하기

광고를 상단에 배치하시려면 

반응형 스킨으로 바꿔놓고 반응형 광고가 아닌 고정 크기형 광고를 배치하고 있었어요..

그러다 보니, 모바일 웹 페이지로 들어가면 광고만 차지하고 있더라구요..

그래서 어렵다고 미루고 미루다가 반응형 광고에 대해 공부를 하고, 드디어 제 블로그에도 반응형광고 배치했답니다. :)

티스토리는 블로그를 하면서 공부를 하게 만드네요.. 어려워요 ㅠㅠㅠㅠ

먼저, 구글 애드센스(http://www.google.com/adsense) 들어가셔서 반응형 광고 하나 만들어주세요~

반응형 광고를 하나 만드셨으면, 관리 페이지에서 [HTML/CSS 편집] 메뉴를 클릭하세요.

이제 여기서부터 중요합니다!! 

을 찾아서 앞 뒤에다가 반응형 광고를 넣어주시면 되요. 

참고!! 

은 포스팅한 글 위치를 말하는 코드에요. 

분명히 ##_article_rep_desc_##을 선언한 부분이 있을 것 같은데 지금 저 소스에서는 잘 못찾겠네요 ㅠ

1. 반응형 광고 1개 배치하기

광고를 상단에 배치하시려면 의 앞에 첨부한 반응형광고 소스를 넣어주심 되요.

반응형광고.txt

<style>

.ad-01 {width: 336px; height: 280px;}

@media (min-width: 400px) { .ad-01 { width: 300px; height: 50px; }} // 최소 width가 400px 이하일때 광고사이즈

@media (min-width:1084px) { .ad-01 { width: 336px; height: 280px; }} // 최소 width가 1084px 이하일때 광고사이즈

</style>

<div class="adsense1" style="text-align: center; margin-bottom:90px;">

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

<ins class="adsbygoogle ad-01"

 style="display:inline-block"

 data-ad-client="ca-pub-개별번호"

 data-ad-slot="개별번호"></ins>

<script>

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

</script>

</div>

2. 반응형 광고 2개 나란히 배치하기

구글 애드센스 정책 상 한 페이지에 광고가 3개이상이면 안된다고 알고 있어요.

저는 기존에 플러그인 사용해서 상단에 1개, 하단에 2개 광고를 배치하고 있었는데 반응형광고를 하더라도 

똑같이 배치를 하고 싶었어요.

저처럼 광고를 나란히 배치하고 싶다면, 하기 소스를 참고하세요.

반응형광고2개배치.txt

<style>

.ad-01 {width: 336px; height: 280px;}

.ad-02 {width: 0px; height: 0px;}

@media (min-width: 400px) { .ad-01 { width: 336px; height: 280px; }} // 최소 width가 400px 이하일때 광고사이즈

@media (min-width:1084px) { .ad-01 { width: 336px; height: 280px; } .ad-02 { width: 336px; height: 280px; margin-left: 5%;}}

       // 최소 width가 1084px 이하일때 광고 2개 나란히 배치

</style>

<div class="adsense1" style="text-align: center; margin-bottom:90px;">

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

<!-- 왼쪽 -->

<ins class="adsbygoogle ad-01"

style="display:inline-block"

data-ad-client="ca-pub-개별번호"

data-ad-slot="개별번호"></ins>

<script>

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

</script>

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

<!-- 오른쪽 -->

<ins class="adsbygoogle ad-02"

style="display:inline-block"

data-ad-client="ca-pub-개별번호"

data-ad-slot="개별번호"></ins>

<script>

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

</script>

</div>

저처럼 반응형 광고배치에 애를 먹고 있다면 저처럼 한 번 해보세요!

도움이 많이 되었으면 해요 :)

의 앞에 첨부한 반응형광고 소스를 넣어주심 되요.

반응형광고.txt

<style>

.ad-01 {width: 336px; height: 280px;}

@media (min-width: 400px) { .ad-01 { width: 300px; height: 50px; }} // 최소 width가 400px 이하일때 광고사이즈

@media (min-width:1084px) { .ad-01 { width: 336px; height: 280px; }} // 최소 width가 1084px 이하일때 광고사이즈

</style>

<div class="adsense1" style="text-align: center; margin-bottom:90px;">

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

<ins class="adsbygoogle ad-01"

 style="display:inline-block"

 data-ad-client="ca-pub-개별번호"

 data-ad-slot="개별번호"></ins>

<script>

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

</script>

</div>

2. 반응형 광고 2개 나란히 배치하기

구글 애드센스 정책 상 한 페이지에 광고가 3개이상이면 안된다고 알고 있어요.

저는 기존에 플러그인 사용해서 상단에 1개, 하단에 2개 광고를 배치하고 있었는데 반응형광고를 하더라도 

똑같이 배치를 하고 싶었어요.

저처럼 광고를 나란히 배치하고 싶다면, 하기 소스를 참고하세요.

반응형광고2개배치.txt

<style>

.ad-01 {width: 336px; height: 280px;}

.ad-02 {width: 0px; height: 0px;}

@media (min-width: 400px) { .ad-01 { width: 336px; height: 280px; }} // 최소 width가 400px 이하일때 광고사이즈

@media (min-width:1084px) { .ad-01 { width: 336px; height: 280px; } .ad-02 { width: 336px; height: 280px; margin-left: 5%;}}

       // 최소 width가 1084px 이하일때 광고 2개 나란히 배치

</style>

<div class="adsense1" style="text-align: center; margin-bottom:90px;">

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

<!-- 왼쪽 -->

<ins class="adsbygoogle ad-01"

style="display:inline-block"

data-ad-client="ca-pub-개별번호"

data-ad-slot="개별번호"></ins>

<script>

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

</script>

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

<!-- 오른쪽 -->

<ins class="adsbygoogle ad-02"

style="display:inline-block"

data-ad-client="ca-pub-개별번호"

data-ad-slot="개별번호"></ins>

<script>

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

</script>

</div>

저처럼 반응형 광고배치에 애를 먹고 있다면 저처럼 한 번 해보세요!

도움이 많이 되었으면 해요 :)