빌노트의 노트
티스토리 블로그 본문 상단에 애드센스 광고 배치 방법 (왼쪽, 오른쪽, 양쪽에 광고 배치하는 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) 진짜 좋아요! 완전 추천!
- Tag
- adsense, CSS, html, TISTORY, 광고 HTML 코드, 블로그 광고 배치 하기, 애드센스, 애드센스 광고 배치 방법, 양쪽에 광고 배치, 오른쪽 광고 배치, 왼쪽 광고 배치, 티스토리, 티스토리 블로그
-
빌노트 2013.11.10 01:31 신고 저도 예전에 댓글이 사라진적이 있었는데
시간이 지나니 복구가 되었습니다. 걱정말고 기다려보세요.
도움을 못드려 죄송합니다 ㅡㅡㅋ -
빌노트 2013.12.08 01:36 신고 답변이 많이 늦었습니다. 광고크기는 큰 직사각형이고, 글에서 제시한 코드는 상위 2개의 광고를 나란히 삽입하는 것입니다. 하단은 그냥 애드센스 광고 코드만 넣으면 됩니다!
-
빌노트 2013.12.08 01:40 신고 하나만 아시면 될 것 같습니다. 구글 애드센스 광고는 한 페이지에 3개이상 나오는 것을 막고 있습니다. 3개 이상 나오게 하는 것은 정책위반이죠. 애드센스 광고를 위해서는 한번에 블로그글 여러개가 나오는 것보다 하나만 나오게 하면 위의 문제는 해결됩니다. 더 궁금한거 있으면 언제든지 글주세요. 항상 행복하시고 애드센스로 좋은 수익거두시길 바래요^^
-
빌노트 2013.12.17 02:15 신고 애드센스 광고는 한 페이지에 3개까지 가능합니다.
그리고 제 광고크기는 큰 직사각형이고
하단에는 별다른 수정없이 광고 코드만 사용하셔도 됩니다.
상단에 다음뷰 손가락 넣는 것은 말로하기 좀 그렇고
조만간에 글 한번 쓰겠습니다!
항상 제 블로그에 관심을 주셔서 고맙습니다^^ -
빌노트 2014.01.11 08:56 신고 방문해주셔서 더 고맙습니다!
-
빌노트 2014.02.18 08:36 신고 ##_article_rep_desc_## 문장을 찾아야 합니다.
답변이 늦어 죄송합니다! -
5분전 2014.03.02 22:45 신고 한쪽에 플로팅넣고 그 옆에 어떻게 붙이는지 찾아보다가 들어오게 되었습니다. 정보 감사합니다.^^
-
빌노트 2014.03.03 08:03 신고 도움이 되셨다니 다행입니다 ㅎㅎ
-
nolgo 2014.03.17 23:08 신고 덕분에 광고 마음대로 위치시킬수 있었습니다.
좋은 정보 잘 보고 갑니다. ^^ -
빌노트 2014.03.18 08:34 신고 도움이 되었다니 다행입니다!
큰 수익 기대할께요^^ -
빌노트 2014.08.28 10:12 신고 가운데 정렬을 해보시기 바랍니다.
<center></center>나 style로 속성을 주면되는데
구글님에게 물어보시는게 더 구체적일 것 같습니다.
방문해주셔서 고맙습니다^^ -
쭌이야 2014.09.03 11:57 신고 알려 주신대로 해봤는데 이상하게 제가 하면
빈공간(광고 들어갈여백크기)으로만 생기고 광고가 뜨질 않네요.. ㅠㅠ 왜 그런건지 대체 ..
-
빌노트 2014.09.03 15:26 신고 애드센스 광고 생성을 방금했다면, 조금 기다려야 광고가 나타납니다.
조금만 기다려보세요^^ -
빌노트 2014.09.04 11:12 신고 저도 이런 현상은 처음이라 뭐라 답을 못드리겠습니다.
죄송합니다! -
빌노트 2014.10.31 10:10 신고 1. 일단 스킨에서 그렇게 지정이 되어 있다면 광고의 위치를 옮기는 작업은 힘들다고 봅니다.
2. 스킨 마다 사용되는 HTML/CSS가 달라서 제가 정확하게 설명드리는 것이 어렵습니다. 잘못 수정을 하게되면 스킨 전체가 틀어지게 되거근요. 블로그나 사이트운영을 좀 잘해보고 싶으시면 HTML/CSS 관련 기초 책을 한권 보시는 것을 권해드립니다.
크게 도움을 못드려 죄송합니다.
멋진 블로그 운영하시길 기원할께요^^ -
빌노트 2014.11.03 08:54 신고 큰 도움을 드리지 못해 죄송할 따름입니다.
잘 적용되셨다니 다행입니다!
멋진 블로그 운영 기대하겠습니다 ㅎㅎ -
빌노트 2015.08.12 00:00 신고 보통 블로거들은 본문 내용 HTML에 애드센스 광고코드를 삽입합니다.
그냥 동적으로 넣고 싶다면 자바스크립트를 사용해야할텐데
애드센스 정책이 이것을 허용할지는 잘 모르겠네요. -
DoHo 2015.12.16 21:50 신고 정말 좋은 정보 감사드립니다!
-
빌노트 2015.12.17 01:29 신고 도움이 되셨다니 다행입니다^^
-
알 수 없는 사용자 2016.06.06 23:02 제가 며칠 고민했던 부분과 궁금증을 해결했어요. 감사합니다.
-
빌노트 2016.06.07 22:25 신고 도움이 되셨다니 다행입니다!
멋진 블로그 꾸미세요^^ -
빌노트 2021.07.14 16:14 신고 본문 중간에 광고 코드를 직접 삽입하는 것은 추천드리는 방식은 아닙니다. 그냥 구글 자체적으로 알아서 광고 코드가 들어가는 것을 저는 선호합니다.