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

Posted 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에서 변경하고 나서
        '저장하기' 꾹 누르시는 것 잊지 마세요. ^^;;
  1. BlogIcon Das°

    | 2009.01.24 21:04 신고 | PERMALINK | EDIT | REPLY |

    하핫..
    이 글을 읽고 실천에 옮기는 자들의 행동 : 복사 - 붙여넣기 - 저장 - 이 글은 읽지도 않고 버린다
    움핫핫핫!!!

  2. BlogIcon 웅숭깊은 Super:H

    | 2009.01.26 21:26 신고 | PERMALINK | EDIT |

    난 그 독자들이 복사-붙여넣기만 해도 땡큐로소이다 ;)

  3. BlogIcon Flying.Tw

    | 2009.01.24 22:47 | PERMALINK | EDIT | REPLY |

    음... 위의 글은 따로 번역이 필요한것 같아서 그러는데... 간단하게 뭐가 좋아진거지?? ㅋㅋ

  4. BlogIcon 웅숭깊은 Super:H

    | 2009.01.26 21:26 신고 | PERMALINK | EDIT |

    블로그에 안 어울리는 광고가 어울리는 광고로 탈바꿈했다는 거지 :)

  5. BlogIcon 제시카

    | 2009.01.31 21:33 | PERMALINK | EDIT | REPLY |

    에디터링크는 한페이지에 한번밖에 안나오는건가요?OTL
    예전에 가입해뒀던 adclix 거의 5달만에 꺼내어 쓰네요.

  6. BlogIcon 웅숭깊은 Super:H

    | 2009.01.31 22:50 신고 | PERMALINK | EDIT |

    다음에서 에디터링크는 페이지당 하나, 컨텐츠링크는 페이지당 세개까지라고 제한하고 있어요. --;
    그래도 에디터링크는 수익이 나름 괜찮답니다. ^^

  7. BlogIcon Bloney

    | 2009.09.26 21:54 | PERMALINK | EDIT | REPLY |

    너무 잘 보고 갑니다. 첨에 <style>~</style> 태그를 빼야되는데 <style> , </style> 꼴랑 두개만 빼고 왜안돼지;;했네요 요즘 포스팅안하고계신거같은데 둘러보니 알맹이가 꽉찬 블로그네요? 학생이신거같은데 대단하세요 ^ ^

  8. BlogIcon 웅숭깊은 Super:H

    | 2009.10.01 12:31 신고 | PERMALINK | EDIT |

    특목고 입시 준비중인 중3이라 요즘 바쁘답니다. ㅠㅠ
    블로그 내용이 풍성하다니 감사합니다. :)

Write your message and submit
« PREV : 1 : ··· : 6 : 7 : 8 : 9 : 10 : 11 : 12 : 13 : 14 : ··· : 163 : NEXT »