본문오른쪽에 애드센스광고 1개 배치하기(데스크탑+모바일)
애드센스광고배치 어렵지 않아요~
오늘은 본문포스팅에서 상단오른쪽에 애드센스광고 1개를배치하는 방법에 대해서
포스팅해보도록 하겠습니다.
이 방법은 반응형스킨을 사용하는 블로그에만 사용가능한 방법이며,
데스크탑과 모바일에서 동일하게 오른쪽상단에 배치가 되어 보여집니다.
저도 반응형스킨을 사용하고있지만, 구글 애드센스의 반응형광고를 데스크탑상에서
보여질때 오른쪽상단에 위치시키는것은 그리 어렵지 않았으나,
모바일에서도 똑같이 적용시키기가 어려워 상당히 고전했던 적이 있었습니다.
하지만 오늘 제가 알려드릴 이 스크립트를 사용하면 모바일이든 데스크탑이든'
동일하게 적용이되어 보여집니다.
데스크탑상에서 336*280 광고를 보여지게 할건데 모바일에서는 이 크기로 적용되면
모바일화면에서는 본문글이 보이지않게되어, 구글애드센스정책위반사항이 됨으로, 모바일화면에서는 자동으로 광고의크기가 줄어들게 할 것입니다.
블로그 오른쪽광고배치 스크립트태그
아래 스크립트가 오늘 적용할 스크립트입니다.
제 블로그에서 복사가 금지되어있어 복사할 수가 없으니 하단에 해당소스를 파일첨부해놨으니 다운받으시면 됩니다.
<style>
.abc { width: 336px; height: 280px;}
@media(max-width: 499px) { .abc { width: 200px; height: 200px; } }
@media(min-width: 500px) { .abc { width: 250px; height: 250px; } }
@media(min-width: 800px) { .abc { width: 336px; height: 280px; } }
</style>
<div style="float: right; margin: 0px 0px 10px 20px;">
<!-- abc -->
<ins class="adsbygoogle abc"
style="display:inline-block"
data-ad-client="본인구글광고 client 코드를 붙여넣으세요"
data-ad-slot="본인구글광고 slot 코드를 붙여넣으세요"></ins>
</div>
다운받은 소스에서, 본인구글광고 client 코드를 붙여넣고 본인구글광고 slot 코드를 붙여넣으세요. 위 설명이 입력된곳만 본인의 구글광고 코드로
수정해주시면 됩니다.
그리고 .abc로 표시된 부분은 광고의 이름칸이라 임시로 abc로 입력했으니, 본인이 원하시는 이름으로 바꾸셔도 됩니다. 안바꾸셔도 상관없습니다.
수정한 뒤 HTML편집에서 [##_article_rep_desc_##] 바로위에 붙여넣기 하세요.
그리고 이걸로 끝이지만, 한가지 더 하셔야 할 작업이 있습니다. 마찬가지로 HTML편집에서 맨끝에
-본인구글광고스크립트삽입-
</s_t3></body>
에서 </s_t3></body>바로 위에 본인의 애드센스광고스크립트(반응형광고)를 붙여넣으시는데, 위에서 입력한 본인의 구글광고 slot 코드와 동일한
애드센스 광고를 붙여넣으시면 됩니다.
이 작업을 하는 이유는 본인의 애드센스광고스크립트를 아래로 빼놓지않으면, 인터넷익스플로러 8에서 에러가 나기 때문입니다.
자! 이제 확인을 해보도록 할까요?
PC화면으로 봤을때 오른쪽상단에 광고가 배치되었습니다.
모바일화면에서도 오른쪽에 광고가 생성된게 보이시죠? 혹시나 모바일 화면에서의 광고크기를 조절하시려면 아래빨간부분을 변경해주시면 됩니다.
<style>
.abc { width: 336px; height: 280px;}
@media(max-width: 499px) { .abc { width: 200px; height: 200px; } }
@media(min-width: 500px) { .abc { width: 250px; height: 250px; } }
@media(min-width: 800px) { .abc { width: 336px; height: 280px; } }
</style>
<div style="float: right; margin: 0px 0px 10px 20px;">
<!-- abc -->
<ins class="adsbygoogle abc"
style="display:inline-block"
data-ad-client="본인구글광고 client 코드를 붙여넣으세요"
data-ad-slot="본인구글광고 slot 코드를 붙여넣으세요"></ins>
</div>
크기를 200*200 으로 변경했을때의 모바일화면입니다.
크기를 250*250 으로 변경했을때의 모바일화면입니다.
제가 사용하고있는 핸드폰은 갤럭시4 입니다. 수익면으로봤을때는 애드센스정책을 위반하지않고 250*250 으로 변경했을때가 클릭율이 제일 높을것으로
예상이됩니다만, 저는 미관상 200*200이 제일 보기가 좋아 그렇게 설정을 했습니다. 여러분도 200*200 으로 하시는게 좋을겁니다.
왜냐하면, 250*250 으로 변경했을때 화면이 작은 아이폰에서는 본문글이 보이지않고 화면을 다 가릴 수 있기때문에,
애드센스정책위반으로 구글계정이 정지가 될 수 있습니다. 흐아..이렇게 쉽게 공개해도 되나 모르겠네요. ㅎㅎ
▶ 관련포스팅 : 블로그에 애드센스광고달기(광고생성 및 블로그에적용하기)
▶ 관련포스팅 : 티스토리 글목록 사진으로 변경하기(썸네일 변경이라고 하죠)
▶ 관련포스팅 : 키워드추출 분석프로그램을 사용하여 순식간에 "돈버는 블로그" 만드는 방법!
▶ 관련포스팅 : 블로그로 돈을 벌려면 먼저 SEO최적화 방법을 배워라!
그런데 이렇게 달아놓으니 애드센스 배너 하나가 첫 화면을 가리네요.. 어떻게 수정할수 있는건가요?
이걸 중간으로 가리지않게 보내고싶은데..
만약 모바일에서 첫화면을 가린다면 위 포스팅자세히 보시면 광고크기 줄일 수 있는 방법이 나와있구요, 중간으로 가리지 않게 보내고 싶은데? 음..이게 무슨 말인지 모르겠습니다. 본문중간?
여기 포스팅을 참조해보시면 될것 같습니다.
상단엔 오른쪽 광고가 잘 나오지만
바로 그 밑에 가로로 긴 광고가 본문 내용을 가리는것 같아요.
모바일도 마찬가지구요
밑의 코드들을 지웠는데도 그대로인거같네요..
스킨문제일까요?
광고가 하나 더 추가된것밖에로는 설명할 길이 없는것 같습니다.
본인의 애드센스 광고코드를 복사해서 html수정에서 콘트롤+f 로 찾기해서 혹여 중복된 광고가있나 한번 찾아보세요.
그런데 문의사항이..ㅠ
리디즈님의 페스트부트 설치하고 반응형 광고(플러그인)를 하단, 그리고 우측사이드바(사이드바옵션사용)에 먼저 배치했습니다.,
그리고 위의 방법으로 광고를 글에 적용했더니.. 갑자기 사이드 바와 하단 광고송출이 중지되네요..
꼭 광고승인 대기중인것처럼 공간은 표기되는데 광고는 백지..
뭔가 싶어 광고 코드부분을 빼니 다시 사이드바 및 하단광고 송출 재시작..
혹시 알고계시는 부분 있으실까요?
이것때문에 오늘 하루종일 모니터에 코밖고 지냈네요.ㅠ
저는 저곳에 광고코드를 삽입하지 않고
포스팅 작성 건 마다 본문내에 광고를 삽입합니다. 귀찮더라도말이죠.
모바일에서 우측광고가 뜨지 않는다는 것은 위 플러그인광고가 삽입되어 있어 오류가 나는 것으로 보입니다.
저 소스대로 하시면 모바일에서 100% 우측광고가 보여집니다.
다만, 저처럼 카테고리별로 광고코드를 여러개 생성 후 사용하신다고 하면
광고코드별로 소스에서 .abc 뒤에 숫자 예)1,2......등등을 삽입하여 구분해주셔야합니다. 허나 광고코드가 한개라면 그냥 사용하셔도 무방합니다.
글 한개당 반응형광고 갯수제한은 없습니다. 사실상 구글에서 광고갯수 제한을 없앴습니다.