반응형웹 티스토리 블로그 스킨(fastboot)에 애드센스 코드 삽입하기

 반응형웹 티스토리 블로그 스킨(fastboot)에 애드센스 코드 삽입하기

패스트부트 반응형스킨이 적용된 티스토리 블로그에 애드센스 코드 삽입하는 방법

fastboot 반응형 웹 스킨을 티스토리 블로그에 적용하면, skin.html에 스킨 제작자가 친절하게도 광고코드를 삽입할 위치를 주석으로 처리해두었기 때문에, 원하는 자리에 애드센스나 기타 광고 코드를 삽입하면 된다.

하지만 그렇게 흔한 위치에 광고 코드를 삽입할 것이라면 굳이 이런 포스팅은 필요없겠지 훗훗.

스킨이 반응형웹을 따른다면, 애드센스 광고도 반응을 해주어야 인지 상정.

애드센스 광고도 반응형 광고가 있기는 하지만...

애드센스의 반응형 광고 형태의 제약사항도 많은 편이다.

일단 가장 많이 사용되는 본문 상단에 2개의 애드센스 광고를 배치하는 형태로 애드센스 광고를 배치해보았다.

하지만 반응형 웹 스킨에서는 가로폭이 줄어들게 되면, 상단 2개의 광고는 아래위로 연이어 2개가 나오게 되어 애드센스 광고정책 위반이 될 수 있다.

따라서 "@media 쿼리"를 써서 반응형으로 모바일 상태에서는 상단,하단 각각 1개의 광고만이 가운데 정렬로 배치되도록 구현한 방식이다.

그렇다 하더라도 상단에 남는 배너가 368*280의 사이즈를 갖는 것 자체도 요새 애드센스의 정책위반 해석에 당할 수 있다.

이 문제는 해상도에 따라 모바일일 경우 상단의 애드센스 광고를 모바일용 배너가 출력되고, PC일때는 PC용 배너가 출력되도록 구성해 줄 필요가 있다. 

이부분에 대한 포스팅은 추후에 하도록 하겠다.

티스토리 관리자 메뉴에서 "꾸미기-HTML/CSS편집"에서 "HTML/CSS"탭을 선택한다.

FASTBOOT 반응형웹 티스토리 블로그 스킨은 3군데의 기본적인 광고위치를 추천하고 있다.

그 중 한 군데는 본문제목 위쪽으로 광고를 표시하는 영역이다.

필자가 선호하지 않는 위치지만 그 위치의 장점은 코드를 한 군데만 삽입하면, 검색,카테고리,공지,방명록 등등 모든 곳에서 코드 한 개로 출력 가능하다는 장점이 있다.

그러나 나는 그런 방식을 선호하지 않기 때문에 본문바로 윗쪽과, 검색/카테고리 영역에서만 광고가 표시되는 위치에 광고 코드를 삽입했다.

포스트 글 본문의 상단에 표시되는 광고위치 영역에서 

<!--F 포스트 본문 내용 바로위 광고위치 -->

라는 주석을 검색한다. 주석의 뒤에 아래와 같은 코드를 삽입한다.

이렇게 삽입하는 이유는 각 div에 id값을 이용해서 CSS를 이용해서 위치를 조정하기 위함이다. 

위 코드에서 주석으로 처리되어 있는 <!--광고상단좌측-->,<!--광고상단우측-->에는 본인의 애드센스 광고 코드를 삽입하면 된다.

하지만, 애드센스의 광고정책에 따르면 모바일에서는 최상단의 애드센스 배너광고는 320*50혹은 320*100의 모바일용 광고가 노출되야 한다.

그렇기 때문에 애드센스 광고 정책위반의 소지가 있다.

물론 이 부분에 대해서도 해결할 수 있는 방법은 있다. 

스크립트에서 가로폭을 감지해서 반응형으로 조건 분기를 해서 모바일용과 데스크탑용 애드센스 광고를 표시 해주면 된다.

본문의 하단에는 다음과 같은 코드를 삽입한다.

이라는 치환자를 찾아서 그 앞에는 상단광고 그 뒤에는 하단 광고라는 것이 중요할 뿐이다.

<!--광고하단좌측-->에는 애드센스 광고코드를 삽입하거나, 애드센스 광고코드 대신에 타사의 광고코드를 삽입해도 무방하다. 

style.css에 추가해야 하는 부분을 살펴보자.

반응형 웹페이지는 @media screen and (min-width:~)로 가로폭의 해상도에 따라 분기해주는 것이 핵심이다. 

패스트부트 반응형 웹 스킨은 1400px해상도일때와 992px해상도 그리고 991px보다 작은 해상도에 따라서 반응하도록 나뉘어 있다.

동일하게 미디어쿼리를 나눠주고, 각 해상도 시나리오에 맞게 CSS를 적용해주었다.

#top_ad,#bottom_Ad{display:none}은 필자가 본문에 삽입했던 애드센스 광고 코드들의 선택자이다. 

필자가 본문에 삽입했던 애드센스 광고코드를 무력화 하기 위해서 입력한 CSS이니 다른 분들은 신경쓰지 말도록~

해상도가 991px 이하가 되면 {display:none}으로 표시된 id의 div는 사라지고, 나머지 div는 전체 폭의 중앙에 위치하여 1개의 광고만 남게 된다.

@media screen and (min-width: 1400px) {
        #rtop_ad { overflow:hidden}
        #rtop_lt { width:50%; float:left}
        #rtop_rt { width:50%; float:right}
        #rbottom_Ad { overflow:hidden}
        #rbottom_lt { width:50%; float:left}
        #rbottom_rt { width:50%; float:right}
}
@media screen and (min-width: 992px) {
        #rtop_ad { overflow:hidden}
        #rtop_lt { width:50%; float:left}
        #rtop_rt { width:50%; float:right}
        #rbottom_Ad { overflow:hidden}
        #rbottom_lt { width:50%; float:left}
        #rbottom_rt { width:50%; float:right}
}
@media screen and (max-width: 991px) {
        #rtop_rt { display:block; float:none; text-align:center;}
        #rtop_lt{ display:none}
        #rbottom_lt { display:block; float:none; text-align:center;}
        #rbottom_rt{ display:none}
}
@media screen and (min-width: 768px) {
}
@media screen and (max-width: 767px) {
}
#rtop_ad,#rbottom_Ad { margin:15px 0;}

실제 패스트부트 반응형웹스킨에 적용된 애드센스 광고의 모습이다.

해상도의 가로폭이 줄어 들면 위의 이미지와 같이 광고가 한 개만 남으면서 광고가 가운데 정렬이 된다.

앞에서도 언급했지만, 굳이 1개만 남기는게 싫고 수익을 위해서 2개를 아래위로 가운데 정렬을 시키고 싶다면, display:none대신에 남겨지도록 설정된 div의 css를 복사해서 써주면 된다.

하단은 이렇게 표시된다.

해상도 가로폭이 늘어나면 다시 위와 같이 2개의 애드센스 광고가 표시된다.

검색결과/카테고리의 목록 상단과 하단에 애드센스 광고를 삽입하는 것은 상단은 <!--F 추천 광고위치2 : 검색결과 상단 부분 --> 바로 아랫줄에 위에서 사용한 코드를 그대로 삽입하면 된다.

검색결과 하단 부분에 대해서는 패스트부트 반응형 스킨에서 주석처리가 되어 있지 않으므로, <div class="clearfix"></div>를 찾아야 한다.

<div class="clearfix"></div>는 유일한 위치에 존재하는 것이 아니므로 </s_list> 위에 있는 <div class="clearfix"></div>를 찾아서 그 윗쪽으로 하단에 표시할 애드센스 광고코드를 삽입해야 한다.

검색결과 화면에 표시된 애드센스 광고코드의 모습이다.

역시 마찬가지로 가로해상도가 줄어든 모바일 기기에서는 위와 같이 광고가 한개만 가운데 정렬로 뜬다. 애드센스 광고를 두개를 띄우고 싶다면 앞서 지적한 데로 하면된다.

     

원본 위치 <http://myblogwhat.tistory.com/189>