미주알고주알

깔끔쌈박 애드클릭스 만들기

Super:H 2009. 1. 24. 20:51
제 블로그 포스트 하단의 태그 위쪽에는 특별한 링크가 있습니다.

바로 다음에서 제공하는 광고 서비스 애드클릭스의 에디터링크인데요,
애드클릭스에서 기본으로 제공하는 스타일과는 달리 제 블로그에 맞춰진 스타일임을 알 수 있습니다.
포스트의 가독성을 해치지 않으면서 전체적으로 조화로운 애드클릭스 광고, 어떻게 만들까요?


1. 애드클릭스 신청
가장 먼저 블로그에 애드클릭스를 달겠다고 신청을 해야 합니다.
애드클릭스 공식 사이트(클릭)에 접속하셔서 '애드클릭스 신청' 버튼을 클릭하고
블로그 주소와 몇 가지 필요한 정보를 입력하면, 보통 2~3일 정도 후에
다음에서 애드클릭스 게재 승인 여부를 알려주는 메일이 옵니다.
단순 펌글이 아닌 직접 작성한 포스팅이 어느 정도 있으면 대부분 승인됩니다.

2. 광고 설정 및 스크립트 손보기
애드클릭스 게재가 승인되었다면 이제 블로그에 달리는 광고의 세부 사항을 설정할 차례입니다.
블로그 맞춤형 깔끔쌈박 애드클릭스를 만들기 위해서는 별도 디자인이 필요 없는 에디터링크가 적격입니다.
컨텐츠링크나 에디터링크의 디자인 설정이 필요하다면 간단한 몇 가지 설정이 필요하지만,
블로그 맞춤형 에디터링크를 위해서는 그 설정도 필요없습니다.

애드클릭스 사이트 상단 '광고 설정'을 클릭하신 후 바로 하단의 '에디터링크 설정 스크립트'로 갑니다.
긴 스크립트 중 첫머리에 있는 <style>~</style> 부분만 지우신 후 그 스크립트를 복사한 다음,
본인 블로그의 관리자 > 스킨 > HTML/CSS 편집에서 html.txt의 원하는 부분에 붙여넣습니다.

그런 다음  <div id="Clixad"> 부분을 '<div class="ad" id="Clixad">로 바꾸고,
광고임을 알리는 헤더를 <!--에디터링크 시작.--> 앞에 달아 줍니다.
어려우시면 아래 수정된 코드를 참조하세요.
스크립트를 모두 다 고치면 아래와 같이 됩니다. (빨강색 부분이 추가되었습니다.)

<span class="adText">Link </span>
<div class="ad" id="Clixad">
<!--에디터링크 시작-->
<script type="text/javascript">
var adc_skin='eskin001';
</script>
... (생략) ...
</div>
<!--에디터링크 끝.-->

3. style.css 설정
이제 블로그에 꼭 맞는 스타일 설정을 위해서 style.css로 넘어갑니다.
포스트 하단 태그 목록의 스타일과 같은 스타일을 지정해 주겠습니다.
일반적으로 style.css에서 .tagTrail로 시작하는 모든 스타일과 같게 지정합니다.

예를 들어 .tagTrail 스타일이 아래와 같았다면,
.tagTrail                { color: #888; letter-spacing: -1px; padding: 0 0 5px 35px; }
.tagTrail a                           { color: #888; }
그대로 복사해서 "tagTrail" 부분만 위에서 지정한 Class 이름, 즉 "ad"로 바꿔 주신 후,
.ad { color: #888; letter-spacing: -1px; padding: 0 0 5px 35px; }
.ad a { color: #888; }
원래 .tagTrail이 있던 부분 바로 위에 삽입합니다.


추가. 블로그 맞춤 세부 설정
이제 모든 맞춤형 애드센스 설정은 끝났습니다.
기본 디자인은 태그목록 디자인과 같게 하면서 포스트와의 간격을 조금 더 조정하고 싶으시다면,
아까 조정한 style.css의 .ad 항목에 있는 margin(padding) 항목의 숫자를 조정하시면 됩니다.
(margin(padding) 항목 옆의 숫자는 차례대로 margin (padding): 상px 좌px 우px 하px 를 나타냅니다.
어려우시면 아래 수정된 코드를 참조하세요.
style.css에 아래 코드를 삽입하시면 됩니다.
초록색 부분은 취향에 맞게 변경하세요.

.ad { color: 광고글자색(세자리 코드); letter-spacing: 자간px; padding: 상px 좌px 우px 하px; }
.ad a { color: 광고글자색(세자리 코드); }

추가2. 이미지 헤더 사용하기
애드클릭스의 헤더를 아닌 이미지로 대체하고 싶으시다면
관리자 > 스킨 > HTML/CSS 편집 > 파일 업로드에 광고 헤더 이미지를 업로드하신 후
.ad 옆 { } 안에 background: url(images/광고헤더이미지.gif) left 3px no-repeat; 을 넣어 주시고.
.ad 항목 아래에 .adText { display: none; } 를 추가합니다.
어려우시면 아래 수정된 코드를 참조하세요.
이미지 헤더를 사용하실 경우 style.css에 아래 코드를 삽입하시면 됩니다.
초록색 부분은 취향에 맞게 변경하세요.

.ad { color: 광고글자색(세자리 코드); letter-spacing: 자간px; padding: 상px 좌px 우px 하px; background: url(images/광고헤더이미지.gif) left 이미지여백px no-repeat; }
.ad a { color: 광고글자색(세자리 코드); }
.adText { display:none; }

이제 블로그에 맞게 애드클릭스가 수정되었습니다.
애드클릭스를 통해 즐겁게 블로깅도 하고, 깔끔한 광고도 달아 보세요. ^^

P.S. 아 참, 이 모든 것을 skin.html과 style.css에서 변경하고 나서
        '저장하기' 꾹 누르시는 것 잊지 마세요. ^^;;