▶본래 블로그는 Web 과 Log 의 줄임말로, 자신의 관심사를 자유롭게 서술하는 1인 미디어로 시작했습니다. 전문지식 없이 누구나 쉽게 시작할 수 있고, 평범하지만 필요한 정보들을 손쉽고 압축적으로 공유할수 있죠. 제 블로그는 이러한 본래 블로그의 목적에 맞게 양질의 정보를 공유하는데 목적이 있습니다 :)
# 글, 사진 및 이미지 위용준#
#일부 이미지는 퍼왔음을 밝힙니다.#◀
본문에 같이 삽입되는 에드센스 광고는 블로그를 사용하는 사용자의 플랫폼 ( 데스크탑, 스마트폰, 태블릿 ) 의 종류에 따라 다르게 보인다.
따라서 자칫 잘못 설정하면 이쁘게 잘 써둔 내 콘텐츠의 전체적인 모양이 나도 모르는 사이 망가져서 출력 될 수 있기 때문에 확실하게 알고 적용해야 한다.
고 수익형 에드센스 모델인 우측 상단 에드센스는 보통 크기가 336x280이다. 하지만 모바일 환경으로 웹을 들어가면 336X280 광고는 지나치게 크다.
따라서 단순하게 <table>태그를 사용해서 코드를 그냥 때려 넣으면 모바일에서 콘텐츠가 뭉개질 확률이 높다.
즉 웹 사용자들의 다양성을 고려하여 우측 상단 광고를 넣어야 한다. 천천히 하나씩 설명해 보겠다. 필자는 총 3가지를 소개할까 한다.
단순히 사용하는 걸 원한다면. 요약 라인을 가장 하단에 따로 적어 넣을 테니 본인이 원하는 바에 따라 골라서 읽으면 되겠다.
하지만 웬만하면 한번 정독하여 이해하려고 노력해보는 것을 권장한다.
첫번째 플러그인 사용하기
가장 쉽지만 자유로운 커스터마이징 하기에는 안 좋은 방법이다. 티스토리 관리자 모드로 들어가 보자
플러그인 ▶ 플러그 인 ▶ 설정 ▶ 수익 ▶ Google Adsense (데스크탑 웹용)
들어가서 코드만 넣으면 손쉽게 우측 상단 광고를 배치할 수 있다.
이 방법은 간편하지만 유연성이 떨어진다. 데스크톱 웹 ( 사용자 화면이 776px 이상 ) 이 아니면 작은 형태의 광고가 출력 되는 게 아니라 광고가 아예 출력되지 않는다.
따라서 200x200 크기의 광고가 아닌 336x280 크기 광고 코드를 단순히 복사해 붙여 넣으면 된다.
두번째 반응 형 코드 1개로 태그 걸기
여기서부터 처음 접하는 사람은 어려울 수 있다. 하지만 지금 확실하게 알아두면 연관되는 부분이 많아 나중에 큰 도움이 된다. 자신의 블로그에 치명적인 뭉개짐이 발생되는 것을 예방할 수 있기 때문에 꼭 천천히 정독해 보자.
2번째 방법과 3번째 방법은 둘 다 "코드 만들기", "코드 게시하기" 두 단계로 나뉜다.
코드 만들기
두 번째 방법은 구글에서 권장하는 방법이다. 반응형 코드는 게시 환경에 따라 스스로 크기가 바뀌는데 이에 조건을 걸어 776 >= ( 이상 ) 이면 데스크톱 환경이라 판정하고 큰 336X280 광고를 출력한다.
776< (미만)이라면 다른 플랫폼 ( 스마트폰, 테블렛 ) 이라 판정하여 200x200 혹은 150x150 등 사용자가 원하는 다른 크기의 광고 형태가 나오도록 하는 방법이다.
먼저 에드센스 홈페이지에 들어가 "반응형 에드센스" 코드를 복사한다. 그리고 이것을 "메모장에 붙여 넣자", 이 광고 코드는 출력하는 광고 크기, 유저 ID, 광고 ID 의 정보가 담겨 있는 코드이다. 광고 코드를 복사해 메모장에 붙여 넣어서 살펴보면 아래와 같이 되어 있을 것이다.
[반응형 광고 코드 예제]
1 2 3 4 5 6 7 8 9 10 | <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- 반응형 광고 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-유저ID" data-ad-slot="광고ID" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> | csㅇ |
먼저 여기서 유저ID와 광고ID를 따로 복사해 메모장 밑에다가 붙여 넣자. 그 후 천천히 살펴보자. 포맷이 auto로 설정 되어있다. 무슨 뜻일까? 잠깐 생각한뒤 충분히 살펴 봤다면 다음 코드와 비교해 보자
구글 우측 상단 예제 모음.txt[실질적으로 사용할 광고 코드 예제]
1 2 3 4 5 6 7 8 9 10 11 12 13 | <style> .Adname { width: 200px; height: 200px; } @media(min-width: 767px) { .Adname { width: 336px; height:280px; } } </style> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- Adname --> <ins class="adsbygoogle Adname" style="display:inline-block" data-ad-client="유저ID" data-ad-slot="광고ID"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> | cs |
위 코드와 다르게 스타일 태그가 붙어있다. <style> 와 </style> 사이에 쓰여있는 건 뭘까? 천천히 말해보겠다. 먼저 .Adname { } 이건 뒤에 나올 Adname의 스타일을 가로 안 {}으로 정한다는 문구이다. 즉 뒤에 Adname이 화면에 출력 된다면 200X200 크기의 스타일로 표현하라고 정하는 문구이다.
그다음에 있는 @media(min-width: 767xp)는 뭘까? @media는 반응형 웹 소스 태그에 핵심이라 할 수 있다. min-width는 최소 가로 길이 즉 넓이라 할 수 있는데 min-width :767 은 다시 말해서 767px< 즉 넓이가 767px을 초과하면 이란 뜻이다.
전체적으로 다시 말하면 "Adname이 나오면 200X200 크기로 출력 시킨다. 만약 넓이가 767을 초과하면 336X280 크기로 출력 시킨다"를 표현한 것이다. 최대한 자세하게 설명했는데 이해가 됐는지 모르겠다. ㅠ_ㅠ.
자 다시 원래 하려던 일로 돌아가자. 이 코드를 사용하려면 먼저 "본인 ID" 와 "광고 ID"에 아까 복사해 넣은 ID 값들을 붙여 넣어야 한다.
여기서 Adname은 자기가 관리하기 편한 임의의 이름을 붙이면 된다. 영문으로 간단하게 rightad 이런 식으로 정하는 게 좋다. 만약 rightad 라 정했다면 최종적으로 코드가 이렇게 나오면 된다.
.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <style> .rightad { width: 200px; height: 200px; } @media(min-width: 767px) { .rightad { width: 336px; height:280px; } } </style> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- rightad --> <ins class="adsbygoogle rightad" style="display:inline-block" data-ad-client="ca-pub:123124124(본인ID)" data-ad-slot="16234234(광고ID)"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> | cs |
자 인제 광고 코드 준비가 끝났다. 자 인제 코드를 게시해 보자
코드 게시하기
코드를 게시하는 유형에 따라 2가지로 나눌수 있으며 또 이를 본문에 그때 그때 마다 게시하는 방법과 포스트를 작성할때 자동으로 본문에 적용이 되는 방법 두가지가 있다.
어렵지 않다 거의다 왔으니 조금만 힘내자!
먼저 코드를 게시하는 유형이다.
HTML 태그만을 사용하는 방법이 있고 CSS 태그를 같이 사용하는 방법이 있다. HTMl만 사용하는 방법부터 해보자. 위에 내가 만든 광고 코드를 ▣ 라 한다면
<div style="float:right; margin:0px 0px 15px 20px;"> ▣ </div>
이런식으로 쓰면 된다. margin은 여백을 정하는 태그로 각각 "상, 우, 하, 좌" 를 뜻한다. 즉 좌로 20픽셀 밑으로 15픽셀 여백을 주겠다는 의미이다.
HTML 태그만 사용한다면 이 광고 코드를 사용할때 마다 <div style> 태그로 묶어줘야 한다. 즉 번거롭다. 이를 조금 더 간편하게 사용하기 위한 방법이 두번째 방법이다.
CSS 편집으로 들어가 본문 마크업 즉 본문 디자인을 결정하는 CSS 문구를 찾자.
스킨마다 다른데 보통 대부분 desk 혹은 본문에 관련된 CSS라 써 있다. 여기서 정한 광고 이름이 rightad 이니 여기선 right_ad로 하겠다.
1 | .right_ad {float:right;margin-left:20px;margin-bottom:15px} | cs |
간단하게 이 문구를 써 넣어주면 된다. 이후 본문 HTML 태그에 적용할때는 다음 처럼 적으면 된다. div 이름이 right_ad 면 자동적으로 저 여백 스타일을 따른다는 태그이다. 즉 html 태그를 사용할때 마다 마진 값 (여백)을 써넣는게 불편할 때 쓰는 방법이다.
1 | <div class=right_ad> 광고 코드 </div> | cs |
만약에 상황에 따라 우측 상단 광고를 넣거나 빼는게 아니라 그냥 포스트 작성시 자동으로 적용이 되도록 하겠다면 굳이 두번째 방법인 CSS 태그를 안 써도 된다.
자 인제 광고 코드를 게시 하자. 완전히 완성된 태그인 <div style="float:right; margin:0px 0px 15px 20px;"> ▣ </div> 를 [##article_rep_desc##] 바로 위에 써주면 포스트 작성시 자동으로 우측 상단에 광고가 적용이 된다.
만약 데스트탑 플랫폼이 아니라면 자동으로 200X200 크기의 광고가 출력된다.
만약 상황에 따라 광고를 넣고 싶다면 <div 태그 부터 /div> 태그까지 전부 본문에 넣으면 된다. 이때 HTML을 꼭 체크하고 넣어주자. 한가지 팁을 주자면 굳이 할때 마다 코드를 써 넣지 말고 "서식"으로 글을 써서 저장 시킨후 필요할때 마다 꺼내서 쓰는것이 편하다.
"서식"을 사용하는 방법은 후에 포스팅 하면 이 글 밑에 연관글로 링크를 넣겠다.
세번째 고정형 코드 2개 조건 걸기
2번째를 확실하게 이해 했다는 가정하에 이야기 하겠다. 스킨에 따라 반응형 광고 코드 자체가 문제를 일으킬 때가 있다. 그럴때 이와 같은 방법을 사용한다
2번째 방법이 한 가지 반응형 코드를 크기에 따라 다르게 출력하는 방법이라면 이번 방법은 고정된 크기를 가진 광고 코드 2개를 조건에 따라 출력하는 방법이다. 바로 가보자
336X280 광고 코드와 200X200 광고 코드 각각의 유저ID와 광고ID를 복사해서 메모장에 붙여 넣자. ( 총 4개 ) 후에 이 코드를 살펴 보자
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <div style="float:right; margin:20px;"> <!-- 데탑용 우측 상단 코드 --> <script> if(window.getWindowCleintWidth()>=768){ document.write('<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script><ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="유저ID" data-ad-slot="광고ID"></ins>'); (adsbygoogle = window.adsbygoogle || []).push({}); } </script> </div> <div style="text-align:center;width:100%;"> <!-- 모바일용 상단 중앙 코드 --> <script> if(window.getWindowCleintWidth()<768){ document.write('<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script><ins class="adsbygoogle" style="display:inline-block;width:200px;height:200px;margin:auto;margin-bottom:10px;" data-ad-client="유저ID" data-ad-slot="광고ID"></ins>'); (adsbygoogle = window.adsbygoogle || []).push({}); } </script></div> | cs |
먼저 데탑은 우측 상단에 두고 모바일은 상단 중앙에 배열하는 코드다. 모바일 환경에서 우측 상단 배열 시 문제가 생기는 사람은 이 코드를 사용하면 된다.
물론 여기서 유저ID 와 광고ID는 각 크기 광고 유형에 맞는 (아까 복사한) 값으로 바꿔줘야 한다.
만약 모바일에서도 우측 상단에 광고를 배치하고 싶다면 다음 코드를 사용하면 된다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <div style="float:right; margin:20px;"> <!-- 데탑용 우측 상단 코드 --> <script> if(window.getWindowCleintWidth()>=768){ document.write('<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script><ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="유저ID" data-ad-slot="광고ID"></ins>'); (adsbygoogle = window.adsbygoogle || []).push({}); } </script> </div> <div style="float:right; margin:10px;"> <!-- 모바일용 우측 상단 코드 --> <script> if(window.getWindowCleintWidth()<768){ document.write('<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script><ins class="adsbygoogle" style="display:inline-block;width:200px;height:200px;margin:auto;margin-bottom:10px;" data-ad-client="유저ID" data-ad-slot="광고ID"></ins>'); (adsbygoogle = window.adsbygoogle || []).push({}); } </script></div> | cs |
이 태그는 if 문을 넣어 만약 창 크기가 768 이상이면 336X280 고정 광고 코드를, 768 미만이면 200X200 광고 코드를 게시하는 태그 이다.
조건에 만족하지 않으면 실행이 되지 않는다. 즉 위에 2번째 방법은 일단 실행 후 크기에 따라 스타일이 바뀐다면 이 방법은 조건이 만족하지 않으면 아예 실행이 되지 않는다는 차이점이 있다.
2번째 방법 요약
1. 반응형 코드에서 유저ID, 광고ID 메모장에 복사 ▶▶ 원하는 광고명 정하기 (Ad_r 이라 가정)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <div style="float:right; margin:0px 0px 15px 20px;"><style> .Ad_r { width: 200px; height: 200px; } @media(min-width: 767px) { .Ad_r { width: 336px; height:280px; } } </style> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- Ad_r --> <ins class="adsbygoogle Ad_r" style="display:inline-block" data-ad-client="ca-pub:123124124(본인ID)" data-ad-slot="16234234(광고ID)"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> | cs |
2. 유저ID, 광고ID 자신의 ID로 적용.
3.
▶본래 블로그는 Web 과 Log 의 줄임말로, 자신의 관심사를 자유롭게 서술하는 1인 미디어로 시작했습니다. 전문지식 없이 누구나 쉽게 시작할 수 있고, 평범하지만 필요한 정보들을 손쉽고 압축적으로 공유할수 있죠. 제 블로그는 이러한 본래 블로그의 목적에 맞게 양질의 정보를 공유하는데 목적이 있습니다 :)
# 글, 사진 및 이미지 위용준#
#일부 이미지는 퍼왔음을 밝힙니다.#◀
본문에 같이 삽입되는 에드센스 광고는 블로그를 사용하는 사용자의 플랫폼 ( 데스크탑, 스마트폰, 태블릿 ) 의 종류에 따라 다르게 보인다.
따라서 자칫 잘못 설정하면 이쁘게 잘 써둔 내 콘텐츠의 전체적인 모양이 나도 모르는 사이 망가져서 출력 될 수 있기 때문에 확실하게 알고 적용해야 한다.
고 수익형 에드센스 모델인 우측 상단 에드센스는 보통 크기가 336x280이다. 하지만 모바일 환경으로 웹을 들어가면 336X280 광고는 지나치게 크다.
따라서 단순하게 <table>태그를 사용해서 코드를 그냥 때려 넣으면 모바일에서 콘텐츠가 뭉개질 확률이 높다.
즉 웹 사용자들의 다양성을 고려하여 우측 상단 광고를 넣어야 한다. 천천히 하나씩 설명해 보겠다. 필자는 총 3가지를 소개할까 한다.
단순히 사용하는 걸 원한다면. 요약 라인을 가장 하단에 따로 적어 넣을 테니 본인이 원하는 바에 따라 골라서 읽으면 되겠다.
하지만 웬만하면 한번 정독하여 이해하려고 노력해보는 것을 권장한다.
첫번째 플러그인 사용하기
가장 쉽지만 자유로운 커스터마이징 하기에는 안 좋은 방법이다. 티스토리 관리자 모드로 들어가 보자
플러그인 ▶ 플러그 인 ▶ 설정 ▶ 수익 ▶ Google Adsense (데스크탑 웹용)
들어가서 코드만 넣으면 손쉽게 우측 상단 광고를 배치할 수 있다.
이 방법은 간편하지만 유연성이 떨어진다. 데스크톱 웹 ( 사용자 화면이 776px 이상 ) 이 아니면 작은 형태의 광고가 출력 되는 게 아니라 광고가 아예 출력되지 않는다.
따라서 200x200 크기의 광고가 아닌 336x280 크기 광고 코드를 단순히 복사해 붙여 넣으면 된다.
두번째 반응 형 코드 1개로 태그 걸기
여기서부터 처음 접하는 사람은 어려울 수 있다. 하지만 지금 확실하게 알아두면 연관되는 부분이 많아 나중에 큰 도움이 된다. 자신의 블로그에 치명적인 뭉개짐이 발생되는 것을 예방할 수 있기 때문에 꼭 천천히 정독해 보자.
2번째 방법과 3번째 방법은 둘 다 "코드 만들기", "코드 게시하기" 두 단계로 나뉜다.
코드 만들기
두 번째 방법은 구글에서 권장하는 방법이다. 반응형 코드는 게시 환경에 따라 스스로 크기가 바뀌는데 이에 조건을 걸어 776 >= ( 이상 ) 이면 데스크톱 환경이라 판정하고 큰 336X280 광고를 출력한다.
776< (미만)이라면 다른 플랫폼 ( 스마트폰, 테블렛 ) 이라 판정하여 200x200 혹은 150x150 등 사용자가 원하는 다른 크기의 광고 형태가 나오도록 하는 방법이다.
먼저 에드센스 홈페이지에 들어가 "반응형 에드센스" 코드를 복사한다. 그리고 이것을 "메모장에 붙여 넣자", 이 광고 코드는 출력하는 광고 크기, 유저 ID, 광고 ID 의 정보가 담겨 있는 코드이다. 광고 코드를 복사해 메모장에 붙여 넣어서 살펴보면 아래와 같이 되어 있을 것이다.
[반응형 광고 코드 예제]
1 2 3 4 5 6 7 8 9 10 | <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- 반응형 광고 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-유저ID" data-ad-slot="광고ID" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> | csㅇ |
먼저 여기서 유저ID와 광고ID를 따로 복사해 메모장 밑에다가 붙여 넣자. 그 후 천천히 살펴보자. 포맷이 auto로 설정 되어있다. 무슨 뜻일까? 잠깐 생각한뒤 충분히 살펴 봤다면 다음 코드와 비교해 보자
[실질적으로 사용할 광고 코드 예제]
1 2 3 4 5 6 7 8 9 10 11 12 13 | <style> .Adname { width: 200px; height: 200px; } @media(min-width: 767px) { .Adname { width: 336px; height:280px; } } </style> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- Adname --> <ins class="adsbygoogle Adname" style="display:inline-block" data-ad-client="유저ID" data-ad-slot="광고ID"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> | cs |
위 코드와 다르게 스타일 태그가 붙어있다. <style> 와 </style> 사이에 쓰여있는 건 뭘까? 천천히 말해보겠다. 먼저 .Adname { } 이건 뒤에 나올 Adname의 스타일을 가로 안 {}으로 정한다는 문구이다. 즉 뒤에 Adname이 화면에 출력 된다면 200X200 크기의 스타일로 표현하라고 정하는 문구이다.
그다음에 있는 @media(min-width: 767xp)는 뭘까? @media는 반응형 웹 소스 태그에 핵심이라 할 수 있다. min-width는 최소 가로 길이 즉 넓이라 할 수 있는데 min-width :767 은 다시 말해서 767px< 즉 넓이가 767px을 초과하면 이란 뜻이다.
전체적으로 다시 말하면 "Adname이 나오면 200X200 크기로 출력 시킨다. 만약 넓이가 767을 초과하면 336X280 크기로 출력 시킨다"를 표현한 것이다. 최대한 자세하게 설명했는데 이해가 됐는지 모르겠다. ㅠ_ㅠ.
자 다시 원래 하려던 일로 돌아가자. 이 코드를 사용하려면 먼저 "본인 ID" 와 "광고 ID"에 아까 복사해 넣은 ID 값들을 붙여 넣어야 한다.
여기서 Adname은 자기가 관리하기 편한 임의의 이름을 붙이면 된다. 영문으로 간단하게 rightad 이런 식으로 정하는 게 좋다. 만약 rightad 라 정했다면 최종적으로 코드가 이렇게 나오면 된다.
.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <style> .rightad { width: 200px; height: 200px; } @media(min-width: 767px) { .rightad { width: 336px; height:280px; } } </style> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- rightad --> <ins class="adsbygoogle rightad" style="display:inline-block" data-ad-client="ca-pub:123124124(본인ID)" data-ad-slot="16234234(광고ID)"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> | cs |
자 인제 광고 코드 준비가 끝났다. 자 인제 코드를 게시해 보자
코드 게시하기
코드를 게시하는 유형에 따라 2가지로 나눌수 있으며 또 이를 본문에 그때 그때 마다 게시하는 방법과 포스트를 작성할때 자동으로 본문에 적용이 되는 방법 두가지가 있다.
어렵지 않다 거의다 왔으니 조금만 힘내자!
먼저 코드를 게시하는 유형이다.
HTML 태그만을 사용하는 방법이 있고 CSS 태그를 같이 사용하는 방법이 있다. HTMl만 사용하는 방법부터 해보자. 위에 내가 만든 광고 코드를 ▣ 라 한다면
<div style="float:right; margin:0px 0px 15px 20px;"> ▣ </div>
이런식으로 쓰면 된다. margin은 여백을 정하는 태그로 각각 "상, 우, 하, 좌" 를 뜻한다. 즉 좌로 20픽셀 밑으로 15픽셀 여백을 주겠다는 의미이다.
HTML 태그만 사용한다면 이 광고 코드를 사용할때 마다 <div style> 태그로 묶어줘야 한다. 즉 번거롭다. 이를 조금 더 간편하게 사용하기 위한 방법이 두번째 방법이다.
CSS 편집으로 들어가 본문 마크업 즉 본문 디자인을 결정하는 CSS 문구를 찾자.
스킨마다 다른데 보통 대부분 desk 혹은 본문에 관련된 CSS라 써 있다. 여기서 정한 광고 이름이 rightad 이니 여기선 right_ad로 하겠다.
1 | .right_ad {float:right;margin-left:20px;margin-bottom:15px} | cs |
간단하게 이 문구를 써 넣어주면 된다. 이후 본문 HTML 태그에 적용할때는 다음 처럼 적으면 된다. div 이름이 right_ad 면 자동적으로 저 여백 스타일을 따른다는 태그이다. 즉 html 태그를 사용할때 마다 마진 값 (여백)을 써넣는게 불편할 때 쓰는 방법이다.
1 | <div class=right_ad> 광고 코드 </div> | cs |
만약에 상황에 따라 우측 상단 광고를 넣거나 빼는게 아니라 그냥 포스트 작성시 자동으로 적용이 되도록 하겠다면 굳이 두번째 방법인 CSS 태그를 안 써도 된다.
자 인제 광고 코드를 게시 하자. 완전히 완성된 태그인 <div style="float:right; margin:0px 0px 15px 20px;"> ▣ </div> 를 [##article_rep_desc##] 바로 위에 써주면 포스트 작성시 자동으로 우측 상단에 광고가 적용이 된다.
만약 데스트탑 플랫폼이 아니라면 자동으로 200X200 크기의 광고가 출력된다.
만약 상황에 따라 광고를 넣고 싶다면 <div 태그 부터 /div> 태그까지 전부 본문에 넣으면 된다. 이때 HTML을 꼭 체크하고 넣어주자. 한가지 팁을 주자면 굳이 할때 마다 코드를 써 넣지 말고 "서식"으로 글을 써서 저장 시킨후 필요할때 마다 꺼내서 쓰는것이 편하다.
"서식"을 사용하는 방법은 후에 포스팅 하면 이 글 밑에 연관글로 링크를 넣겠다.
세번째 고정형 코드 2개 조건 걸기
2번째를 확실하게 이해 했다는 가정하에 이야기 하겠다. 스킨에 따라 반응형 광고 코드 자체가 문제를 일으킬 때가 있다. 그럴때 이와 같은 방법을 사용한다
2번째 방법이 한 가지 반응형 코드를 크기에 따라 다르게 출력하는 방법이라면 이번 방법은 고정된 크기를 가진 광고 코드 2개를 조건에 따라 출력하는 방법이다. 바로 가보자
336X280 광고 코드와 200X200 광고 코드 각각의 유저ID와 광고ID를 복사해서 메모장에 붙여 넣자. ( 총 4개 ) 후에 이 코드를 살펴 보자
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <div style="float:right; margin:20px;"> <!-- 데탑용 우측 상단 코드 --> <script> if(window.getWindowCleintWidth()>=768){ document.write('<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script><ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="유저ID" data-ad-slot="광고ID"></ins>'); (adsbygoogle = window.adsbygoogle || []).push({}); } </script> </div> <div style="text-align:center;width:100%;"> <!-- 모바일용 상단 중앙 코드 --> <script> if(window.getWindowCleintWidth()<768){ document.write('<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script><ins class="adsbygoogle" style="display:inline-block;width:200px;height:200px;margin:auto;margin-bottom:10px;" data-ad-client="유저ID" data-ad-slot="광고ID"></ins>'); (adsbygoogle = window.adsbygoogle || []).push({}); } </script></div> | cs |
먼저 데탑은 우측 상단에 두고 모바일은 상단 중앙에 배열하는 코드다. 모바일 환경에서 우측 상단 배열 시 문제가 생기는 사람은 이 코드를 사용하면 된다.
물론 여기서 유저ID 와 광고ID는 각 크기 광고 유형에 맞는 (아까 복사한) 값으로 바꿔줘야 한다.
만약 모바일에서도 우측 상단에 광고를 배치하고 싶다면 다음 코드를 사용하면 된다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <div style="float:right; margin:20px;"> <!-- 데탑용 우측 상단 코드 --> <script> if(window.getWindowCleintWidth()>=768){ document.write('<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script><ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="유저ID" data-ad-slot="광고ID"></ins>'); (adsbygoogle = window.adsbygoogle || []).push({}); } </script> </div> <div style="float:right; margin:10px;"> <!-- 모바일용 우측 상단 코드 --> <script> if(window.getWindowCleintWidth()<768){ document.write('<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script><ins class="adsbygoogle" style="display:inline-block;width:200px;height:200px;margin:auto;margin-bottom:10px;" data-ad-client="유저ID" data-ad-slot="광고ID"></ins>'); (adsbygoogle = window.adsbygoogle || []).push({}); } </script></div> | cs |
이 태그는 if 문을 넣어 만약 창 크기가 768 이상이면 336X280 고정 광고 코드를, 768 미만이면 200X200 광고 코드를 게시하는 태그 이다.
조건에 만족하지 않으면 실행이 되지 않는다. 즉 위에 2번째 방법은 일단 실행 후 크기에 따라 스타일이 바뀐다면 이 방법은 조건이 만족하지 않으면 아예 실행이 되지 않는다는 차이점이 있다.
2번째 방법 요약
1. 반응형 코드에서 유저ID, 광고ID 메모장에 복사 ▶▶ 원하는 광고명 정하기 (Ad_r 이라 가정)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <div style="float:right; margin:0px 0px 15px 20px;"><style> .Ad_r { width: 200px; height: 200px; } @media(min-width: 767px) { .Ad_r { width: 336px; height:280px; } } </style> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- Ad_r --> <ins class="adsbygoogle Ad_r" style="display:inline-block" data-ad-client="ca-pub:123124124(본인ID)" data-ad-slot="16234234(광고ID)"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> | cs |
2. 유저ID, 광고ID 자신의 ID로 적용.
3. 앞에 게시 혹은 본문에서 HTML 활성 체크 후 위 코드 작성으로 게시
3번째 방법 요약
1. 336X280 고정 광고 코드, 200X200 고정 광고 코드 유저ID, 광고ID 메모장에 각각 복사
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <div style="float:right; margin:20px;"> <!-- 데탑용 우측 상단 코드 --> <script> if(window.getWindowCleintWidth()>=768){ document.write('<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script><ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="유저ID" data-ad-slot="광고ID"></ins>'); (adsbygoogle = window.adsbygoogle || []).push({}); } </script> </div> <div style="text-align:center;width:100%;"> <!-- 모바일용 상단 중앙 코드 --> <script> if(window.getWindowCleintWidth()<768){ document.write('<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script><ins class="adsbygoogle" style="display:inline-block;width:200px;height:200px;margin:auto;margin-bottom:10px;" data-ad-client="유저ID" data-ad-slot="광고ID"></ins>'); (adsbygoogle = window.adsbygoogle || []).push({}); } </script></div> | cs |
2. 각 고정형 크기에 맞는 유저ID, 광고ID 각각 적용.
3. 2번째 방법과 동일하게 게시.
3번째 방법 요약
1. 336X280 고정 광고 코드, 200X200 고정 광고 코드 유저ID, 광고ID 메모장에 각각 복사
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <div style="float:right; margin:20px;"> <!-- 데탑용 우측 상단 코드 --> <script> if(window.getWindowCleintWidth()>=768){ document.write('<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script><ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="유저ID" data-ad-slot="광고ID"></ins>'); (adsbygoogle = window.adsbygoogle || []).push({}); } </script> </div> <div style="text-align:center;width:100%;"> <!-- 모바일용 상단 중앙 코드 --> <script> if(window.getWindowCleintWidth()<768){ document.write('<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script><ins class="adsbygoogle" style="display:inline-block;width:200px;height:200px;margin:auto;margin-bottom:10px;" data-ad-client="유저ID" data-ad-slot="광고ID"></ins>'); (adsbygoogle = window.adsbygoogle || []).push({}); } </script></div> | cs |
2. 각 고정형 크기에 맞는 유저ID, 광고ID 각각 적용.
3. 2번째 방법과 동일하게 게시.
'여러가지 정보 > 블로그 수익' 카테고리의 다른 글
| 티스토리 사이드바 우측 공간 에드센스 넣는 방법 (1) | 2017.03.29 |
|---|---|
| 티스토리 구글 에드센스 가입, 적용 하기 (6) | 2017.02.06 |
| 유튜브로 가입한 구글 에드센스 블로그 연결하기 (1) | 2017.01.24 |
