view AD 플러그인 개편에 따른 블로그 광고와 추천버튼 배치법

demun
블로그/블로그 광고
2010. 6. 1. 10:54

2010-06-01 날짜로 새로 view AD 가 오픈하면서 관리자화면에서 플러그인 - view AD 가 새로 생겼습니다.
간편하게 저장 버튼만 누르면 블로그 상단에 view AD가 나옵니다.

하지만 문제는 여기서 부터 시작입니다^^
많은 블로거분들이 블로그에 광고를 진행중일겁니다. 그리고 많은 분들이 상단에 구글광고를 두개씩 넣어놨을겁니다. 아니신분들은 참고만 하세요.

view AD는 오른쪽 상단에 위치하게 됩니다. 그러므로 구글광고가 두개가 진행중이신 분들은 그 아래에 위치하게 됩니다.
그럼 블로그 상단에 많은 광고때문에 불편할수 있으니 하나는 포기하고 배치를 해야겠지요....

우선 추천하는것은 구글광고 하나를 왼쪽에 두고 오른쪽에 view AD를 두면 된다는 점입니다.
너비가 250이지만 margin이 10px가 있고 아래쪽으로 20px 가 있습니다.
아래처럼 왼쪽에 구글광고 오른쪽에 view AD 가 위치합니다.

하는 방법은 html 편집창에서 단순이 본문치환자인 [ ##_article_rep_desc_##] 위에 구글광고를 하나만 올리면 됩니다.

<div class="googleLeft">
	구글광고코드
</div>

그다음 css 편집창에서 아래와같이 지정해줍니다. 광고크기가 336*280짜리일경우 입니다.

.googleLeft {
	float:left; 
	width:336px; 
	height:280px; 
	padding-right:10px;
}

그럼 모두 끝났습니다. 여기서 padding 는 대략적으로 적은것이며 본인의 블로그 여백에 따라 수정하시면 됩니다.

왼쪽에 구글 오른쪽에 view AD가 위치하게 됩니다.

추가글.

여기서 구글광고는 float:rigth 로하고 view AD 광고를 float:left 로 하면 서로 광고위치를 바꿀수는 있습니다.

.ad250_outter{float:left;} 로 지정하면 서로 바뀌긴합니다만 그것이 중요한것이 아닌거 같습니다. 선택의 폭이 작다는점이죠.

항상 우측상단에 노출되기를 원하는 다음인거 같습니다.

파이어버그로 서로 위치를 변경해봤습니다.

한가지 팁.
구글광고가 하나가 없어지므로써 블로그 하단에도 영향을 미쳤습니다.
다양한 팁이 있으므로 제가 선택한 경우만 알려드리겠습니다.
저는 블로그 하단을 아래처럼 꾸몄습니다.
대략 광고의 크기를 보니 아래처럼 꾸미면 되겠더군요. 한가지 다음과 믹시위젯을 줄이는것은 원하지 않기에 이방법을 택한것입니다.

만약 믹시와,다음뷰위젯을 줄여서 사용하시는경우는 아래글을 참고하세요.
다음, 믹시 추천버튼 정리하는법 => http://demun.tistory.com/1574

추천버튼이 필요하다면 아래글 참고.
믹시,다음 추천버튼 배포 1 => http://demun.tistory.com/1629
믹시,다음 추천버튼 배포 2 => http://demun.tistory.com/1638

다음뷰위젯과 믹시 위젯은 본문하단에 자동으로 들어가게 됩니다. 그래서 애드클릭스와 구글광고만 배치하면 되지요.
위젯의 너비가 400px 라야 짤리지않고 모두 나옵니다. 저의 블로그너비는 680px 이므로 280px가 남죠.
구글광고는 280짜리가 없고 250짜리가 있으니 250으로 대체했습니다.

일단 코드를 알려드립니다. html 편집창에서 본문코드 바로 아래에 아래의 코드를 넣습니다.

<!-- 구글 250-250 -->
<!--[if IE]>
<style type="text/css">
  #googleBot{margin-top:70px;}
</style>
<![endif]-->
<div id="googleBot">
구글코드자리
</div>
<!--//구글광고 하단-->
<!-- 다음 애드클릭스 -->
<div id="adclix">
	애드클릭스 코드자리 var adv_width = '400'; 과 var adv_height = '110'; 으로 해주면 위젯과 너비가 딱맞습니다. 
</div>
<!-- 다음 애드클릭스끝 -->

그리고 css 편집창에서 아래의 코드를 넣습니다.

/* 구글하단광고 */
#googleBot{
	float:left; 
	width:250px; 
	height:250px; 
	margin-top:-70px;
}

/* 다음 애드클릭스 */
#adclix{
	display:inline; 
	float:right; 
	width:400px !important; 
	overflow:hidden !important;
}

코드설명들어갑니다.
제가 해보니 본문에 저절로 생기는 다음위젯과 믹시위젯 옆으로 구글광고가 들어가야하는데 아래로 밀립니다.
그래서 margin-top:-70px를 준겁니다. (파이어폭스,크롬,사파리,오페라 브라우져등등)
그런데 IE 는 -70을주니 본문속으로 들어가버립니다. 그래서 IE만 읽으라고 [if IE] 부분이 들어간겁니다.

해보고 브라우져 모두 체크를 해봤습니다.
아래는 각 브라우져에서 보이는 스샷을 찍어봤습니다. 참고하세요.

개 개

demun(대문블로그)

view AD 플러그인 개편에 따른 블로그 광고와 추천버튼 배치법

티스토리툴바