블로그 기존 애드센스 광고를 안보이게 하고, 특정 본문에서 보이도록 하기

안녕하세요. 행복을 노래하는 초매입니다.

금요일에는 블로그 광고를 본문 HTML 에 복사하지 않고, 동적 script 를 이용해서 어떻게 해보려고 했는데, 아직 실력이 부족한지 잘 되지 않았어요... OTL... 동적으로 DIV 태그를 만들어서 그 하위 노드에 script 를 추가하는 방식으로 진행하려고 했거든요... 그런데, 동적으로 스크립트를 추가를 하니, 되는 것 같았는데요. 제가 임의로 만든 페이지에서 광고를 계속 호출하니, 어느 순간 광고가 사라져서 더 이상 테스트를 할 수 없었죠...^^ㆀ 

( 계속 고민하란 말이야... ... ... 아... 네... ┌(_ _)┐)

본문에 기존 광고를 삽입하게 되면, 모바일상에서도 보이는데요. 이러한 방식으로 구현하여, 모바일 상에서도 광고를 노출시키게 하시는 분들도 계시더라구요. 저도 본문에 "애드센스 광고 3개 모두를 넣어서 노출시킬까?" 도 생각을 해봤지만, 추후 유지보수시 어려움이 많겠다고 생각을 했고, 절충으로 하나만 넣기로 했습니다... ㅎㅎㅎ 물론 링크 광고는 조금씩 섞어 가면서요...^^

▶ 본문에서 기존 애드센스 광고를 컨트롤 할 수 없을까?

관리모드 - HTML/CSS 에서 광고를 추가하면, 매번 광고를 추가하지 않아도 보이게 되는데요. 현재 구글 애드센스의 경우 한 페이지당 디스플레이 광고 3개, 링크 광고 3개로 제한하고 있고, 그 이상 노출되는 경우 자동으로 광고를 노출시키지 않는 방식으로 운영되고 있죠. 그래서 페이지 당 디스플레이 광고가 3개를 추가했지만, 기존 광고를 지우고, 본문 중간에 꼭 애드센스 광고를 추가해야 한다면 어떻게 해야 할까? 바로 CSS 를 이용하는 것입니다. ^^

▶ 태그에 class 혹은 id를 이용한 정보를 추가하자

광고마다 표현하는 크기가 조금씩 달라서 테두리가 필요했고, 하나로 합치는 것보다 별도로 테두리를 하는게 이뻐보여서, 저는 table 태그를 이용해서 광고를 감싸고 있습니다. 이 광고를 컨트롤 하기 위해서는 table 태그에 id 또는 class 를 지정해주면 됩니다.

광고 스크립트

위 스크립트에서 보시는 것과 같이 광고 스크립트를 감싸고 있는 table 에 class를 추가하는 것입니다. 

CSS의 ID ☞ [바로가기]

CSS의 클래스 ☞ [바로가기]

혹시 id 와 class를 모르시는 분들이라면, 위 링크를 보시면 이해가 조금 편하실 듯 합니다.

▶ 본문의 HTML 모드를 이용하자

블로그 글씨를 하게 되면 우측 상단에 HTML 이라는 텍스트가 있고, 좌측에 체크박스가 있는 거 다 아시죠? 체크박스에 체크를 하게 되면, 글쓰기 모드가 위지윅에서 HTML 모드로 변경되게 되고, 이제 우리는 CSS 를 추가할 수 있습니다. 

( 믿씁니까? 믿씁니까? 믿으시면,,, 댓글 1개만...ㅎㅎㅎ )

▲ 글쓰기에서 HTML모드 체크

본문 어디든지 추가하셔도 되지만, 유지보수를 위해서 마지막에 추가하시던지, 광고와 함께 위치하면 좋겠습니다.

▲ 혹시나 해서 본문 내용을 캡쳐했습니다.

▶ 적용 전, 후 모습

▲ 적용 전

▲ 적용 후

이미지에서 보시는 것과 같이 적용 전에는 추가한 광고가 보이지만, css 를 적용 후에는 해당 광고가 보이지 않는 것을 알 수 있습니다. css 속성에 visibility 라는 것도 있는데, display 와 다른 점은 공간을 차지하느냐, 없애버리느냐에 대한 차이입니다. 만약 visibility 로 적용했을 경우 광고가 있던 자리는 휑~ 하니 비워져 있는 상태로 있을테니까요... ^^

지금까지 기존 애드센스 광고를 지우는 법을 살펴보았는데요. 이 방법을 응용한다면, 본문에 혼재되어 있는 광고도 메인에서 한번에 관리 할 수 있겠죠? ㅎㅎㅎ 이렇게 광고를 없애고, 본문에 추가하고 픈 광고를 추가한다면, 구글 애드센스에서 지켜야 되는 3, 3 룰을 맞추실 수 있으실겁니다...^^

이상, 동적 스크립트로 고생한 초매였습니다... OTL...