애드클릭스를 사용하면서 다양한 형태의 광고 배치를 볼 수 있습니다. 저역시 어떤 배치가 좋을까 고민을 하다가 본문 상단 오른쪽에 배치하는 방법을 선택 하였습니다. 지금도 글의 오른쪽에 광고가 있을 것이라 생각합니다. 여기에 광고를 배치할때 중요한 점은 첫 서문에서 글을 어느정도 써놔야 한다는 것입니다. 왜냐하면 처음 그림과 광고가 중복이 되면서 원하지 않는 모양이 될 수 있기 때문입니다. 따라서 본문 상단 오른쪽에 베너 광고를 넣고자 하시는 분은 글과 배치를 생각해서 하셔야 될듯 합니다. 저도 그런것을 생각 안하고 했다가 밑에 보시는것과 같이 조금은 이상한 모양이 되었습니다.

 처음에는 저런 광고를 쓸때마다 일일이 만들어 주는건줄 알고 귀찮은 것이 될까 했지만 수정을 통해서 한번에 되더군요.

아직 애드클릭스에 가입하지 않으신 분은 다음 애드클릭스 가입하기 페이지에서 가입 하셔야 합니다.

펼쳐보기

 일단 광고를 넣으시려는 분은 왠만하면 스킨을 잘 선택하고 하시길 바랍니다. 왜냐하면 나중에 수정하려면 상당히 귀찮기 때문입니다.


위와 같이 빨간색 창에 있는 형태의 광고를 만드는 법을 이제부터 배워봅시다~

먼저 애드클릭스 사용자가 되시면 애드클릭스 홈페이지에 들어갑니다. 그런 다음 광고 설정을 눌러줍니다.  광고 설정을 눌러주면 다음과 같은 화면이 뜨게 됩니다.

저는 사이드 전용으로 하였습니다. 왜냐하면 사이드에 다는것은 아니지만 제가 원하는 형태가 가로로 나온다면  2단으로 밖에 넣지 못할꺼 같고 세로도 마찬가지의 느낌이 들었습니다. 하지만 사이드 전용으로 한다고 해서 꼭 사이드에 넣으라는 법은 없기 때문에 부담없이 사이드 전용으로 넣었습니다.

다음은 디자인 설정입니다.

자신의 스킨과 형태를 고려해서 원하는 디자인을 선택합니다. 저같은 경우는 갈색 계통이라 갈색으로 놔두었습니다. 그렇게 나머지 3,4,5번을 진행하시면 됩니다.

광고 스크랩트 생성을 누르시면 에디터 화면에 코드가 생성되는것을 알 수 있습니다.

자 이제부터는 아주 중요하고 신중하게 하셔야 합니다.; 

왜냐하면 잘못 건드린다면 블로그가 완전히 이상하게 변할수도 있기 때문입니다. 저도 그래서 스킨을 몇번 바꿔야 했었습니다. 그래도 나름대로 그런 고생을 하다보니 나름 노하우가 생겨 이렇게 글을 쓰게 된것입니다.

 처음부터 말했듯이 저는 티스토리를 쓰고 있기 때문에 티스토리를 기준으로 글을 쓰겠습니다. 혹시나 티스토리가 아니신분은 다를수 있으니 주의하시기 바랍니다.


먼저 스킨을 누르고 다음으로 HYML/CSS 편집을 누릅니다. 누르면 다음과 같은 창이 생성 됩니다.

skin.html 부분이 있습니다. 밑의 style.css 부분은 건드리지 말고 skin.html 부분만 건드리시길 바랍니다. 여기서 ctrl+F 를 눌러 찾기를 합니다. 찾을 문자열은 s_ad_div 입니다. 이부분을 찾으면 검색되는 부분이 있을것입니다.
찾게 되면 다음과 같은 화면이 나타납니다.


이 부분과 다음의

이 부분 사이에 광고를 게제하는 것입니다.
중간에 어떤 글이 있을수도 있는데 삭제를 해도 큰 상관이 없는것 같습니다. 아마도 스킨을 만드신분이 무엇인가를 추가한 것 같습니다.

먼저 광고를 복사하기 전에 다음과 같은 것을 추가해 주어야 합니다.

<div style="float: right; margin = 0 0 10px 10px">

정확한 뜻은 모르겠지만 그 위치를 설정해주는 것 같습니다. 저기에 쓰여져 있는 right 를 left로 바꾸면 다음 그림과 같이 화면 왼쪽에 광고가 게제 됩니다.

그렇게 한뒤 아까 애드클릭스의 화면으로 돌아와 컨텐츠 링크 설정 스크랩트를 Ctrl+A를 눌러 전체 설정을 해주고 Ctrl+C를 눌러 복사를 해줍니다. 키보드가 불편하신 분은 마우스로 하셔도 상관 없습니다.
그렇게 복사를 한뒤 앞에서 써놓았던  <div style="float: right; margin = 0 0 10px 10px"> 의 뒤에 Ctrl+V 로 붙여넣기를 합니다.

이것을 하시면 다음과 같은 화면을 볼수 있습니다.

정확한 위치에 잘 들어갔나 확인을 합니다.
하지만 이것이 끝이 아닙니다. 이렇게 하면 글과 광고가 따로 놀게 됩니다.

다음과 같이 텅텅 비어버립니다. 다들 눈치 채셨겠지만 이 방법은 그냥 상단에 광고를 넣을때 사용합니다. 하지만 우리는 본문 오른쪽에 넣는 것이기 때문에 아주 아주 약간의 수고를 조금 더 해주면 됩니다.
바로 </div> 라는 부분만 추가해주면 됩니다.


 자 마지막은 찹 쉽죠? 이렇게 진행하셨다면 자신의 블로그에서 광고를 보실수 있을것입니다.
하지만 아주아주 중요한것이 하나 더 남았습니다. 절대 저장하기를 먼저 클릭하지 마시고 미리보기를 먼저 하시고 원하는 것이 반영되었나 확인을 하셔야 합니다.


이렇게 미리보기를 하신뒤 원하는 모양인가 잘못된 점은 없는가 확인이 끝나면 그때서야 저장하기를 누릅니다. 혹시나 따라하시다가 잘못된 부분이 있다면 처음부터 다시하는 것을 추천합니다. 왜냐하면 저도 아직 HTML을 정확히 모르기 때문에 잘못된 부분이 어디인지 확인할 수가 없기 때문입니다.
괜히 블로그 스킨이 꼬이는 것보다 처음부터 다시 하는게 정신건강에 좋을수도 있습니다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.