티스토리 블로그 본문 상단에 애드센스 광고 배치 방법 (왼쪽, 오른쪽, 양쪽에 광고 배치하는 HTML코드)
티스토리(Tistory) 등 블로그를 운영하다 보면 많은 고민을 하게 됩니다.
그중에 하나가 블로그 광고(애드센스) 위치에 대한 고민인데요
왠만하면 블로그 글의 접근성을 유지시키면서 광고수익도 높다면 좋겠죠.
초반에는 이리저리 광고 배치를 바꿔가면서 많은 시행착오를 격었죠.
아래의 글들이 제가 어떻게 방황했는데 보여줍니다.
구글 애드센스(Adsense) 728x90 크기 광고를 블로그 상단에 배치하면서 느낌점 (애드센스 광고수익을 높이기 위한 전략)
구글 애드센스(Adsense) 300x600 대형스카이스크래퍼 광고수익에 대한 생각
구글 애드센스 (Google Adsense) 광고 정책위반을 슬기롭게 대처하는 법
HTML 코딩을 전혀 모르더라도 따라 할 수 있게 설명해 보겠습니다.
티스토리 블로그 본문 상단에 애드센스 광고 배치 방법
위 사진은 제가 현재 사용하고 있는 애드센스(Adsense)광고의 배치입니다.
귀찮고 나름 수익도 좋아서 그냥 이렇게 사용하고 있는데
솔직히 아직도 잘 모르겠습니다 ㅋ
티스토리(Tistory) 블로그에 광고를 삽입하기 위해서
관리자 모드로 접속한 후 꾸미기-HTML/CSS편집을 클릭합니다.
그러면 skin.html 파일 내용이 나오는데
여기서 Ctrl+F를 눌러 ##_article_rep_desc_## 위치를 찾아야 합니다.
(이 글에서 나오는 치환자에 대괄호[]를 과감히 생략합니다! 귀차니즘에 의하여...)
치환자 ##_article_rep_desc_## 를 기준으로
위에는 블로그 본문 상단에 위치 할 HTML코드를
아래에는 본문 하단에 위치 할 HTML코드를 입력해야 합니다.
그럼 본격적으로 광고를 배치해 볼까요?
블로그 상단 왼쪽에 애드센스 광고 배치하기
<DIV style="float:left; margin: 0px 40px 0px 40px">
<!-- 애드센스 광고를 여기에 복사하세요! -->
</DIV>
##_article_rep_desc_##
위 HTML코드는 블로그 본문 상단 왼쪽에 광고를 배치하는 코드입니다.
<!-- 애드센스 광고를 여기에 복사하세요! --> 로 주석처리 된 부분 대신
애드센스 광고 스크립트(Script)를 복사해서 붙여넣기 하면 됩니다.
위에 있는 코드를 그냥 사용해도 되지만 추가 설명을 드리겠습니다.
<DIV>태그는 웹페이지에서 구역(블록)을 나누는 단순한 기능을 합니다.
이것으로 광고 코드를 감싸서 하나의 블록으로 만든다고 생각하면 됩니다.
이렇게 하면 HTML코드를 유지관리하기도 편하고 여러 속성을 이용하여 다향한 효과를 줄수도 있습니다.
위의 코드에서는 <DIV>태그에 style속성을 사용해서 CSS효과를 적용했습니다.
(전문용어로 인라인 스타일 CSS라고 합니다. 좋은 방법은 아니지만 편합니다 ㅡㅡㅋ)
<DIV style="float:left; margin: 0px 40px 0px 40px">
이것은 DIV태그 style속성의 float, margin속성을 사용한 것입니다.
(속성의 속성이라... 복잡하게 생각마시고 쉽게 쉽게 여기세요 ㅋ)
float 속성이 핵심!!! 이것을 사용해야 블로그의 다른 콘텐츠와 어울릴 수 있습니다.
float를 left로 설정하면 <DIV>태그 블록을 왼쪽에 띄울(float) 수 있습니다.
이렇게 적용된 float:left는 clear:both를 이용해서 초기화 할 수 있습니다.
자세한 것은 나중에 살펴보고 이번에는 margin속성에 대해 알아보겠습니다.
margin: 0px 40px 0px 40px
마진은 말 그대로 여백을 말하는데 순서대로 상, 우, 하, 좌 위치입니다.
저는 여기서 <DIV>태그 영역 오른쪽, 왼쪽에 40픽셀씩 여백을 지정하였습니다.
margin속성을 잘 조절해야 광고가 그럴싸하게 보입니다.
노파심에 이렇게 설명을 했는데 이해가 안가도 신경쓰지말고 그냥 사용하세요^^
블로그 상단 오른쪽에 애드센스 광고 배치하기
<DIV style="float:right; margin: 0px 40px 0px 40px">
<!-- 애드센스 광고를 여기에 복사하세요! -->
</DIV>
##_article_rep_desc_##
오른쪽에 애드센스 광고를 배치하는 것은 왼쪽을 해봤으니 누워서 떡먹기 입니다.
float:rightleft로 설정했던 것을 right로 고쳐주면 끝!
상업적인 사이트에 가보면 이렇게 광고배치한 것을 자주 접할 수 있습니다.
충분히 시도해볼만한 광고 레이아웃이라고 생각합니다!
다시 한번 이야기하지만 상단 광고는 ##_article_rep_desc_## 치환자 위에 입력해야 합니다.
블로그 상단 양쪽(왼쪽, 오른쪽)에 애드센스 광고 2개 배치하기
<DIV style="float:left; margin: 0px 40px 0px 40px">
<!-- 애드센스 왼쪽 광고를 여기에 복사하세요! -->
</DIV>
<div style="margin: 0px 40px 0px 40px">
<!-- 애드센스 오른쪽 광고를 여기에 복사하세요! -->
</DIV>
<!-- 광고 밑에 구분선 긋기 -->
<DIV style="BACKGROUND-COLOR: #dddddd; HEIGHT: 1px"></DIV>
##_article_rep_desc_##
이것이 제가 현재 사용하고 있는 애드센스 광고배치 코드입니다.
(광고 밑에 구분선 긋기는 그냥 제가 사용하는 것으로 참고만 하세요 ㅋ)
처음 <DIV>태그에서 float:left를 적용하면 따라오는 <DIV>태그도 자동으로 float속성이 적용됩니다.
자동으로 float:left 속성이 적용안된다면 어떻게 될까요?
<div style="clear:both; margin: 0px 40px 0px 40px">
뒤에 있는 <DIV>태그에 clear:both를 적용하여
강제로 float속성을 초기화한 결과는 아래와 같습니다.
헉! 완전 엉뚱한 결과가 되었지요 ㅡㅡㅋ
그냥 광고 배치하는 코드만 공개하려다 설명이 길어졌네요 ㅎㅎ
블로그 레이아웃을 위해 HTML과 CSS에 대한 이해가 필수라서 이해가 어려울 수 있습니다.
많이 늦어지고 있지만 HTML/CSS에 관련 포스팅도 준비하고 있으니 기다려주시기 바랍니다.
일단은 <!-- 애드센스 오른쪽 광고를 여기에 복사하세요! --> 부분에
본인의 애드센스 광고 코드를 복사해서 쉽게 사용하세요.
현재 별다른 문제없이 잘 사용되고 군더더기 없는 깔끔한 코드이니 믿고 사용하셔도 되겠습니다.
그리고 궁금하거나 이상한 점은 바로바로 질문주세요^^
윈도우태블릿 서피스RT(Surface RT) 윈도우8.1(Windows RT 8.1) 업데이트 후기
서피스RT (Surface RT) 타이핑커버 (타입커버) 키보드 사용후기
MS 윈도우 태블릿 '서피스RT' (Surface RT) 개봉 후기 (서피스RT 장단점 분석)
MS태블릿 서피스RT(Surface RT)를 반값으로 구입하다! (하이마트 학생할인)
다음뷰 애드박스 자리에 네오애드(네오클릭) CPC 광고를 사용하면서 느낀점 (구글 애드센스와 비교)
티스토리 2차 도메인 주소로 블로그 방문시 쉽게 로그인하는 방법!
태양광으로 충전하는 친환경 캠핑용품 '태양열랜턴 K3' (LED 전등, 스탠드, 충전기로 사용가능)
저작권 걱정없이 사용할 수 있는 무료이미지사이트 추천합니다. (무료아이콘 포함)
커서까지 캡쳐할 수 있는 무료 화면캡쳐프로그램 스크린헌터(ScreenHunter) 진짜 좋아요! 완전 추천!