티스토리 뷰
티스토리 반응형 스킨이 배포되면서 구글 애드센스 반응형 배너를 어떻게 적용해야 효율적으로 적용할 수 있는지 알아봅시다.
블로그 특성에 맞게 구글 애드센스 반응형 배너를 넣으면 되겠지만, 어떻게 배너를 넣어야 유지 및 관리가 편할 수 있을까요?
제가 설정한 방법을 참고하셔서 본인 스타일에 맞게 배너를 넣어보세요.
우선 제 블로그에 적용한 화면을 보시죠.
상단 배너는 해상도에 따라 아래와 같이 배너가 보입니다. 가로폭 100%에 따른 자동 반응형 배너로 설정했습니다.
1. 850px 이상 해상도 : 850px * 80px 배너
2. 470px~849px 해상도 : (440px~819px) * (60px~80px) 배너
3. 320px~469px 해상도 : (290px~439px) * (45px~80px) 배너
중간 배너는 오른쪽에 치우쳐서 보이며, 모바일 화면에 꽉차게 보일 경우에 클릭 유도로 인한 제제를 받을수 있으므로 해상도에 따라 아래와 같이 크기를 설정했습니다.
1. 850px 이상 해상도 : 336px * 280px 배너
2. 470px~849px 해상도 : 250px * 250px 배너
3. 320px~469px 해상도 : 200px * 200px 배너
하단 배너는 글 내용에 방해를 받지 않으므로 아래와 같이 크게 보이도록 설정했습니다.
1. 470px 이상 해상도 : 336px * 280px 배너
2. 320px ~ 469px 해상도 : 300px * 250px 배너
우선 구글 애드센스( https://www.google.com/adsense/ ) 광고 단위는 아래와 같이 반응형 3개를 기본 옵션으로 생성했습니다.
1. 상단 배너 넣는 방법
관리 -> 꾸미기 -> HTML/CSS편집 -> HTML 에서 찾기(CTRL + F)를 누르셔서 [##_article_rep_desc_##] 를 찾으세요.
그리고 그 바로 앞에 아래처럼 애드센스 광고단위 [반응형 글상단] 코드를 넣으세요.
<div class="area_view"> <div> <!-- 애드센스 [반응형 글상단] 코드를 복사해서 여기부터 --> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- 반응형 글상단 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-xxxxxxxxxxxxxxxxxxxxx" data-ad-slot="xxxxxxxxxxxxx" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <!-- 여기까지 본인 코드를 붙여넣으세요. --> </div> [##_article_rep_desc_##] </div>
2. 중간 배너 넣는 방법
관리 -> 꾸미기 -> HTML/CSS편집 -> HTML 에서 맨 끝에 </body> 태그앞에 아래 코드를 넣으세요.
<div id="adsense336x280middle" class="whadsense" style="display:none"> <!-- 애드센스 [반응형 글중간] 코드를 복사해서 여기부터 --> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- 반응형 글중간 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-xxxxxxxxxxxxxxxxx" data-ad-slot="xxxxxxxxxxxxxxxx" data-ad-format="auto"></ins> <!-- 여기까지 본인 코드를 붙여넣으시되, <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> 위 코드는 빼고 넣으세요. --> </div> <script type="text/javascript"> $(function(){ if($("#adsensemiddle").length=="1"){ $("#adsense336x280middle").css("display","inline-block") $("#adsensemiddle").append($("#adsense336x280middle")); (adsbygoogle = window.adsbygoogle || []).push({}); }else{ $("#adsense336x280middle").remove(); $("#adsensemiddle").remove(); } }); </script> </body> </html>
관리 -> 꾸미기 -> HTML/CSS편집 -> CSS 에서 맨 끝에 아래 소스를 넣으세요.
/* adsense */ #adsense336x280middle { float:right; margin:10px 0 10px 10px;} .whadsense{width:346px; height:300px;} .whadsensebottom{width:336px; height:280px;} #adsense336x280bottom { margin:0 auto;} @media (min-width: 320px) { .whadsensebottom{width:300px; height:250px;} .whadsense {width: 210px; height: 220px; } } @media (min-width: 470px) { .whadsensebottom{width:336px; height:280px;} .whadsense {width: 260px; height: 270px; } } @media (min-width: 850px) { .whadsensebottom{width:336px; height:280px;} .whadsense {width: 346px; height: 300px; } }
그런 다음에 블로그 글을 작성할때 넣고 싶은 위치에 <div id="adsensemiddle"></div> 만 넣으면 됩니다.
아래 스크린샷을 참고하세요.
그러면 위 스크린샷처럼 해당 위치에 자동으로 [반응형 글중간]가 들어갑니다. 넣고 싶지 않으면 안넣어도 해당 배너는 출력되지 않으므로 문제없습니다.
이렇게 글 작성할때 넣어두면, 나중에 빼고 싶을때 HTML 소스에서 위 코드만 제거하면 전체 글에서 뺄수도 있고, 아니면 다른 광고 단위를 한꺼번에 넣을 수도 있어서 애드센스 유지 및 관리가 편리합니다.
3. 하단 배너 넣는 방법
관리 -> 플러그인 -> 플러그인 설정으로 들어가셔서 코드 넣는부분에 애드센스 광고단위 [반응형 글하단] 코드를 넣으시면 되는데 아래소스처럼 넣어야 합니다.
<div style="padding:15px 0 15px 0"> <div id="adsense336x280bottom" class="whadsensebottom"> <!-- 애드센스 [반응형 글하단] 코드를 복사해서 여기부터 --> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- 반응형 글하단 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-xxxxxxxxxxxxxxxxxx" data-ad-slot="xxxxxxxxxxxxxxx" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <!-- 여기까지 본인 코드를 붙여넣으세요. --> </div> </div>
[반응형 글상단]처럼 HTML소스에 안넣고 이렇게 플로그인 설정에서 [반응형 글하단] 배너를 넣은이유는, HTML 소스에서 글하단 배너를 넣으면 애매한 위치(공유하기 아이콘 위)에 들어가기 때문에 플러그인 설정에서 넣었습니다.
이제 모바일 환경에서 테스트해 볼까요? ( 다음 트로이 랩 http://troy.labs.daum.net/ )
[삼성 갤럭시 노트4] - 상단배너
[삼성 갤럭시 노트4] - 중간배너
[삼성 갤럭시 노트4] - 하단배너
[삼성 갤럭시 S5, 노트3] - 상단배너
[삼성 갤럭시 S5, 노트3] - 중간배너
[삼성 갤럭시 S5, 노트3] - 하단배너
[아이폰6 가로화면] - 상단배너
[아이폰6 가로화면] - 중간배너
[아이폰6 가로화면] - 하단배너
LG는 제가 쓰는 G4가 없네요. ㅠㅠ
[엘지 G3] - 상단배너
[엘지 G3] - 중간배너
[엘지 G3] - 하단배너
[PC 1024 * 768 해상도] - 상단배너
[PC 1024 * 768 해상도] - 중간배너
[PC 1024 * 768 해상도] - 하단배너
모바일 페이지에서 위와 같이 보이면 제대로 설정된것입니다.
잘 안되시거나 문의사항이 있으시면 언제든지 댓글 남겨주세요. 성심성의껏 답변드리겠습니다.
감사합니다. ^^
'IT > 블로그,티스토리' 카테고리의 다른 글
카테고리의 다른 글 목록에 이전, 다음 버튼(페이징) 만들기 (2) | 2016.04.23 |
---|---|
유튜브 동영상 반응형 웹에 삽입하는 방법 (13) | 2016.04.18 |
티스토리 블로그 모든 본문 중간에 글 수정없이 구글 애드센스 반응형 링크 광고 달기 (50) | 2016.04.03 |
티스토리 최신글(최근에 올라온 글) 본문에 추가하기 (27) | 2016.04.02 |
티스토리 반응형 스킨에 PC버전 보기, 모바일버전 보기 버튼 만들기 (4) | 2016.03.24 |
티스토리 블로그에 탑(Top) 버튼 넣는 방법 (15) | 2016.03.23 |
티스토리 반응형 스킨에 구글 애드센스(google adsense) 반응형 배너 적용 방법 (50) | 2016.03.21 |
티스토리(Tistory) 블로그 원본 사진 이미지 보기 (10) | 2016.03.14 |
코드 소스 하이라이트 SyntaxHighlighter 를 수정하여 예쁘게 꾸며봅시다. (0) | 2016.03.11 |
티스토리(Tistory) 블로그에 코드 소스 하이라이트 SyntaxHighlighter 설정 및 활용, 버그 수정 (21) | 2016.03.08 |
티스토리의 새 반응형 웹스킨 '#1' 카테고리 스크롤바와 글갯수 보이기 (29) | 2016.03.07 |
- TAG
- 구글 애드센스 반응형, 반응형 애드센스, 반응형 애드센스 모바일, 반응형 애드센스 상단2개, 반응형 웹 배너, 애드센스 반응형, 애드센스 오른쪽, 애드센스 오른쪽에 넣기, 타스토리 애드센스 반응형, 티스토리 반응형 모바일 애드센스 삽입, 티스토리 반응형 배너, 티스토리 반응형 스킨, 티스토리 반응형 스킨 애드센스, 티스토리 반응형 애드센스, 티스토리 반응형 애드센스 넣는 방법, 티스토리 반응형 애드센스 배너, 티스토리 반응형 웹, 티스토리 애드센스, 티스토리 애드센스 넣기, 티스토리 애드센스 반응형, 티스토리 애드센스 반응형 넣기, 티스토리 애드센스 배너, 티스토리 애드센스 추가
- 이전 댓글 더보기
-
5oulife
안녕하세요 좋은 방법 알려주셔서 감사합니다.
현재 웹에서는 상단 하단 노출이 되는데 모바일에서는 상단이 노출이 안되고 있네요 ㅠ 2016.06.07 18:16 신고 -
토마토..
제 스마트폰에서는 님의 블로그의 상단, 하단 배너 모두 노출되네요..
LG G4입니다. 2016.06.09 03:27 신고 -
토마토..
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
이 코드는 빼고 넣으셔야 해요..
확인해보시고 안되시면 다시 댓글 남겨주세요
좋은 하루 되세요 ^^ 2016.06.12 09:28 신고 -
토마토..
잘된다니 다행이네요 ^^
모바일이, 혹시 티스토리 앱에서 안뜬다는 말씀이신가요?
티스토리 앱은 본문 내용이외에 스크립트는 적용이 되지 않기 때문에 위 방법으로는 배너가 정상적으로 뜨지 않습니다.
좋은 하루 되세요 ^^ 2016.06.16 13:08 신고 - 아빈느블랑 정말 속시원하게 해결해주셨네요. 감사합니다. 2016.06.17 13:59 신고
- 토마토.. 감사합니다. 좋은 하루 되세요 ^^ 2016.06.18 07:57 신고
- 춘사뽕 감사합니다 감사합니다 감사합니다 ㅠㅠ 너무 많은 도움이 되었어요~ 진짜 진짜 능력자 짱짱!!! 짱짱맨!! 감사해요! 2016.07.02 02:44 신고
- 스워니 상하단은 플러그인으로 달고 중간만 따라했는데 엄청 잘되네요. 일찍 봤으면 몇시간동안 인터넷 안뒤져도 금방했을텐데..감사합니다. 도움 많이되었습니다. 2016.07.13 20:50 신고
- 태터데스크 좋은 정보 감사합니다. 중간 광고가 잘 나옵니다. 큰 도움 되었습니다. 그런데 이상하게도 플러그인 '태터데스크'를 사용하면 중간 광고가 나오지 않습니다. 태터데스크를 사용중단하면 다시 중간광고가 잘 나옵니다. 혹시 해결방법이 있을까요? 티스토리 아이디로 댓글 다려 했는데 차단된 이름이라 나와서 비회원으로 댓글 답니다. 2016.07.17 21:06
- 뚜띠김 궁금한게 있어서 문의 드립니다. 플러그인을 보면 애드센스 반응형 플로그인 보이는데, 이곳에서 상단과 하단 광고를 두개 넣을 수 있는 곳이 있음에도 불구하고 상단은 왜 따로 html/css를 이용해서 넣어주고 하단부분만 이용하시는거죠? 전 현재 플러그인으로 상단 하단 광고를 출력시키고 있는데 중간부분 광고를 넣고 싶어서 포스팅을 찾다가 보게 되어 질문드려 봅니다! 2016.08.04 14:56 신고
- 슈나우저 안녕하세요. 혹시 상단 애드센스도 네모낳게 하고 싶으면 어떻게 해야하죠? 2016.08.05 00:34 신고
- 소피스트 지니 좋은 정보 너무 감사합니다. 덕분에 많은 것을 배우고 갑니다. 2016.09.25 12:29 신고
- 질문 Css편집부분에서 하단 bottom에 대한 소스는 작성하지 않아도 되는것 아닌가영??? 잘 몰라서 여쭈어봅니당 2016.11.09 20:05
- 臥龍 플러그인에 반응형배너 입력해도 이상하게 구현이 안되네요; 2016.12.16 17:26 신고
-
줄반장
토마토님..줄간격 조절하려고 하는데
css 에서 어느 부분에 있는 line-height를 조정해야 하나요?
2017.01.05 19:45 신고 - 나나형 정말 깔끔하게 잘 정리해주셔서 도움 잘 받았습니다. 감사합니다. :D 2017.01.22 21:54 신고
- 리나정 애드센스 상태가 계속 신규로 되어있으면 안되는건지요? 2주정도 되었는데 계속 신규라고 되어있어서요~ 2017.02.22 15:45 신고
-
ZENEZ
최고의 팁입니다. 정말 감사해요. (__)
중간 삽입하는 광고 코드를 2개 만들때 어떤 것을 더 만들면 될까요? 상단도 중간 삽입하는 것 처럼 하고 싶은데요. 2017.04.11 23:03 신고
- Total
- 922,128
- Today
- 201
- Yesterday
- 308
- 세차
- 티스토리 반응형 스킨 #1
- 타이어 드레싱
- 디테일링
- 티스토리
- 타이어 광택제
- 티스토리 반응형 스킨
- 데피니티브 율리시스
- 자동차 디테일링
- 티스토리 새 반응형 웹스킨 #1
- 블로그
- 티스토리 스킨
- 타이어 광택제 비교
- 퓨리스 A34 왁스
- 셀프세차
- 퓨리스 A34
- TDG 블루베리 휠클리너
- 해운대
- 퓨리스 타이어 광택제
- 포스타 upp