본문 바로가기
블로그.스마트 정보

티스토리 반응형 스킨에서 광고 잘림현상 해결법

블로그로 돈벌기 위해서는 인터넷이 되는 컴퓨터만 있다면 충분히 가능합니다.

저는 티스토리로 돈벌기 위해서 즉 애드센스로 수익을 내기 위해서 지난 3년 넘게 제가 터득한 노하우들을 공개하려고 합니다.

하지만 애드센스 승인을 받았다고해서 당장에 수익이 발생하는 구조는 아니라는 것입니다.

매일 꾸준하게 1포씩 해나가다 보면 시간이 지나게 되면 유입=광고클릭=수익으로 이어지는 구조가 발생하게 되는 것입니다.

제가 포스팅한 글들을 제대로 읽으신다면 월 300만원의 수익은 아니더라도 꾸준하게 부업으로 수익이 발생하게 될 것입니다.

반응형 스킨이 좋다는 말에 기존에 사용하던 심플형 스킨이 질려서 광고를 어떻게 넣지 상단,하단,사이드바,일치광고의 배치를 html/css를 거의 몰랐기에 바꿔야하나 말아야하나하고 어제 드디어 스킨 변경을 감행했습니다.

2시간에 걸친 작업 끝에 드디어 반응형 스킨에 상단,하단광고와, 사이드바 광고, 사이드바 일치광고, 홈화면 상단 하단광고를 적용시키기에는 성공을했었고 이때까지만해도 광고정책위반의 문제점을 발견하지 못한 상태였습니다.

그런데... 그런데 일이 터지고야 말았습니다.

완벽하리라 믿었던 광고배치가 데스크탑(PC)에서는 다 잘나오는데, 모바일로 접속을 하니 링크광고가 약간 잘리기도 하고, 어떤때는 반토막나서 보이는 것이었어요.

보이시나요?

저 원끝이 잘려보이는 것으로 인해 자칫하면 광고 정책위반으로 제제를 당하는것은 아닐까하고 일하는 내내 불안햇습니다.

위의 잘림 화면이 보이시나요?

첫번째는 광고의 둥근 타원이 잘리는가하면, 두번째 사진에서는 저렇게 광고가 반토막이 나서 무슨 광고인지도 잘 모르게 되어서 보이는것입니다.

다른 광고(상단광고, 하단광고, 사이드광고, 사이드일치광고, 홈화면 상단 하단광고-티에디션으로 적용한 부분)들은 다 제대로 노출이 되는데 유독 링크광고만 이상하게 나와서 내가 멀 잘못했나?하고 몇시간 가량을 고민을 했습니다.

일도 손에 잡히질않고, 아시죠? 제제를 당하게 되면 기분이 썩 좋지 않다는것을 ....

네이버와 다음에 들어가서 별에 별 키워드로 검색을 했지만, 이것은 극소수이기에 어떻게해야한다는 것을 가르쳐주는 곳이 없었습니다.

첨에는 스킨편집에서 문제가 있었던것은 아닐까하고 열시미 찾아봤어요.

그런데, 스킨편집에서는 html부분과 css부분은 문제가 없었습니다.

아~ 제가 사용하는 반응형 스킨은 css부분을 건드릴 필요가 없는 스킨이더라구요.

그래서 html쪽만 폰트 크기와 광고 위치를 선택하는 것만 해뒀었지만, 우연히 발견한 반응형 스킨에서의 광고 잘림현상이라는 글을 발견하게 되고, 240개가 넘는 글들의 광고를 일일이 전면 수정하면서, 몇몇개 반응형 링크광고가 포함되어 있는 포스트를 확인해가면서 노가다를 했습니다.

사설이 길었나요?

구글 애드센스에서 링크광고를 만든후에 메모장에 붙여서 넣어서 사용하게 되면, 심플형의 스킨에서는 잘 적용이 되던 광고가 위의 사진을 보시면 'data'full-width-responsive'의 갑이 true 참으로 설정되어 있습니다.

기존의 링크광고에서는 없었을수도 있고, 제가 그동안 반응형 스킨을 사용하지 않다보니 발견하지 못한 부분일수 있습니다.

true의 뜻이 뭘까 일단 네이버에 들어가서 검색을 해보니 '참'이라고 나왔더군요.

으흠, 이거 이거 어떻하지 라는 생각과, 또 거짓이라는 영어를 검색 'false'라는 값을 true대신에 넣어봤습니다.

전 솔직히 본문의 너비가 잘못되어서 광고가 잘림현상이 생긴지 알고서는, 본문의 너비를 1000에서 1200으로 해봣다가, 또 html에서 col이라는 것을 Ctrl+F로 검색후에 본분 너비와 사이드바의 너비를 수정해도 안되는 것입니다.

그런데 저 true의 값만 false로 바꿔주자 그동안 오늘 하루종일 광고정책 위반으로 인해서 갈등하던 것이 한방에 해결되었습니다.


<INS class=adsbygoogle style="DISPLAY: block" data-ad-slot="xxxxxxxxxx" data-ad-client="ca-pub-xxxxxxxxxxxxxxxx" 
data-full-width-responsive="false" data-ad-format="link"></INS>
<SCRIPT>
(adsbygoogle = window.adsbygoogle || []).push({}); </SCRIPT>

여기서 다 제대로 된 것중에서 빨갛게 표시된 부분 data-full-width-responsive의 값을 false로만 변경 후 적용, 그리고 새로고침을 하고 모바일에서 보면 제대로 광고가 노출이 되는것을 보실수가 있습니다.

width는 폭,너비 값이고, 폭을 가득 채우는 full이라면 명령어의 갑이 true 참으로 되어 있는것을 거짓인 false로 변경하고 저장을 하시면 됩니다.

제가 사용해 본 스킨들 중에서 data-full-width-responsive="true" 값을 주었을 때 광고가 잘리거나 이상하게 출력되는 스킨들은 #1 반응형 스킨,fastboot 1.6.2 스킨이 있었네요.


Please Enable JavaScript!
Mohon Aktifkan Javascript![ Enable JavaScript ]