티스토리 팁 - 다음뷰 애드박스 ( Daum View Ad Box ) 정리하기



블로그를 하면서 다음뷰를 접한지 얼마 안 되었는데요. 다른 블로거 분들을 보니 "다음뷰 애드박스"라는 것을 달고 계시더라구요. 뭔가해서 찾아봤는데, 다음뷰에 가입한 블로거분들이 이 애드박스를 달게 되면 랭킹에 따라서 활동 지원금을 주는 새로운 수익 모델이라고 합니다.


다음뷰 애드를 적용하면 본문의 상단에 적절하게 섞여서 애드박스가 등장하게 되는데요. 하지만 대부분의 블로거 분들이 제목과 본문 사이에 애드센스 광고 단위를 2개씩 게재하고 있기 때문에 애드박스를 적용하게 될 경우 애드박스가 보기 안 좋게 추가됩니다.


위에서 보듯이 (1) 번과 (2) 번이 구글의 애드센스 광고단위이고 (3)번이 다음뷰 애드박스의 광고 단위입니다.
본문의 도입 부분이 찌그러져서 시작하기 때문에 약간 답답함을 느낄 수 있습니다. 게다가 다음뷰 추천 버튼도 시작 부분에 달아 놔서 더욱 더 답답함이 느껴지는데요.


오늘 티스토리 팁에서 할 일은 이렇게 보기 않 좋은 배치를 좀 더 보기 좋게 바꿔 보자는 것입니다. 좀 더 자세히 말하면 구글 애드센스 광고 단위인 (2) 번을 없에고 그 자리에 다음뷰 애드박스인 (3)번을 배치해 보도록 하겠습니다. ( 지금도 많은 블로거 분들이 구글 애드센스 단위 한개와 다음뷰 애드박스를 나란히 배치해서 보기 좋게 만들어 놓고 계십니다. )


다음뷰 애드박스 정리하기

이번 티스토리 팁에서도 스킨 설정을 건드려야 합니다. 관리자 페이지에서 [스킨] -> [HTML/CSS 편집] 메뉴로 들어갑니다. 이 메뉴에 대한 자세한 설명은 다음 링크를 참조하시기 바랍니다.


스킨 편집메뉴의 skin.html 부분에서 구글 애드센스가 출력되는 부분, 혹은 본문이 출력되게 되는 치환자를 찾습니다. 티스토리에서 본문 치환자는 "" 입니다. "[Ctrl] + F" 를 이용해서 찾으시면 더 빨리 찾을 수 있습니다.


구글 애드센스를 게재하고 계신 분들은 아마 본문 주변이 위와 같이 되어 있을 겁니다.
""이 본문을 출력하는 것이고 그 위에 구글 애드센스 코드를 출력하는 HTML코드가 출력되고 있습니다. ( <table><tr><td> 이 부분은 없는 분도 계실텐데 없어도 상관없습니다. 전부 뜯어 고칠테니까요 ^^ )

자 "" 윗 부분을 다음과 같이 고칩니다.

<div align="center" style="float:left">

구글 애드센스 코드 1 --- (1)번 부분

</div>

이러면 일단 기초는 다져진 것인데요. 아직 [저장] 버튼을 누르지말고 [미리보기] 버튼을 눌러서 어떻게 출력 되는지 보고 넘어갑니다.

주의

[미리보기] 버튼은 괜히 있는게 아닙니다. [저장]버튼을 누르면 수정 결과가 바로 반영이 되기 때문에 잘 못된 수정의 경우, 망할 수도 있습니다. 항상 [미리보기] 버튼으로 확인하는 습관을 들여야 합니다. ^^


자, 바로 저장을 하면 저 같은 경우엔 이런 식으로 화면이 출력이 됩니다. (1) 번 광고 단위가 왼쪽으로 붙고 나머지는 본문의 영역으로 인식되어 본문이 출력되기 때문입니다. ( CSS를 아시는 분은 'float'의 특징을 아시겠지요 ^^ ) 또 본문의 시작부분의 오른쪽으로 애드박스가 띄워지기 때문에 위 화면처럼뜨게 됩니다.

이런 현상을 제거하는 방법은 (1) 번 애드센스 광고역역의 넓이를 적당하게 조절하면 되는데요. 다음과 같이 따라하시기 바랍니다.

<div align="center" style="float:left;width:410px">

구글 애드센스 코드 1 --- (1)번 부분

</div>

<div> 태그의 style 속성 안에 애드센스 (1)번 단위의 너비 조절을 해주는 부분을 추가해 주면 됩니다. 제 블로그의 경우 410px로 설정을 해주니 보기 좋게 위로 잘 올라가더라구요. 블로그마다 본문 출력 영역의 너비가 다르기 때문에 이 부분을 잘 조절하면서 보기 좋게 맞춰주셔야 합니다.


width 속성을 너무 크게 주면 위 사진처럼 애드박스가 들어갈 공간이 부족하기 때문에 밑으로 밀려납니다. width 속성을 늘리다 위 처럼 어긋나게 되면 조금씩 줄여 주세요. 그러다보면 깔끔하게 보이는 사이즈가 있을 겁니다. ^^

주의

나중에 본문의 폭을 편집하게 될 때, 아마도 또 깨질 겁니다. 그 때는 다시 width 를 조절해 주시면 되니 걱정하지 마시기 바랍니다. ^^


<div align="center" style="float:left;width:410px">

구글 애드센스 코드 1 --- (1)번 부분

</div>

다시 위 소스코드를 적용한 모습을 보면,


자 이제 깔금하게 구글 애드센스와 다음뷰 애드박스가 나란히 배치된 것을 볼 수 있습니다. ^^
참고로 구글 애드센스 광고 단위를 2개에서 한개로 줄였다고 해서 광고 수익이 절반으로 줄어 들지는 않는 것으로 보입니다.
일단 많은 블로거 분들이 이런식으로 배치를 하고 있고, 구글 애드센스 수익보다 다음뷰 애드박스에서 얻어지는 활동 수익금이 더 많은 경우가 있기 때문에 이런 식으로 배치하는게 더 이익이라고 할 수 있습니다.


인쇄쟁이님의 글을 읽어보시면 그닥 영향이 없음을 알 수 있습니다.
어짜피 클릭할 사람은 클릭하고 그렇지 않은 사람은 이렇건 저렇건 보기만 좋으면 된다는 말이죠 ^^
그래도 수익이 조금 줄긴 할 테니 적용 여부는 잘 생각하시기 바랍니다. ^^
해당 광고단위를 다른 곳으로 옮기셔도 됩니다. ㅎ


+ Recent posts