구글블로그 애드센스 사용법: 인라인 애드 (InLine Ads) 넣고 설정하는 방법 - 글과 글 사이에 애드센스 넣기와 가로 위치 (왼쪽 가운데 오른쪽 등) 조절하기

구글 블로그에서 글(post)과 글 사이에 애드센스가 보이도록 하려면, 아래와 같이 블로그 포스트 (Blog posts) 가젯에서 간단히 설정할 수 있다.


1. 인라인 애드 넣는 방법

=> 블로그 대시보드 > 레이아웃 (Layout) > 블로그 포스트 (Blog Posts) 가젯의 [편집/Eidt] 버튼을 눌러 가젯 편집창을 연다

=> 가젯 설정항목의 맨 아래에 있는 "글사이에 애드센스 보이기 / Show Ads Between Posts" 항목에 체크를 한다. 그러면 애드센스 설정 항목들이 보여진다.
=> 애드센스 설정항목들을 설정한 다음, 가젯의 맨 아래에 있는 저장(Save)를 눌러 저장한다. 이렇게 하면, 글과 글 사이에 애드센스가 게시된다.

구글블로그 사용법: 애드센스 인라인 애드 (InLine Ads) 설정 방법 - 글과 글 사이에 애드센스 넣기와 가로 위치 (왼쪽 가운데 오른쪽 등) 조절하기


2. 인라인 애드 주의할 점

1) 애드센스 게시 간격 (Show after every XX posts (up to 3 ads can be placed on a page) 
구글블로그는 블로그의 레이아웃(Layout)에서 애드센스 가젯 (AdSense gadget)으로 넣은 애드센스 갯수를 헤아려서, 한 페이지에 애드센스가 3개를 넘지 않도록 인라인애드의 수를 조절하도록 되어 있다.

예컨데, 애드센스 계정에서 광고코드를 가져와 HTML/Java Script 가젯으로 애드센스를 넣은 상태에서 인라인애드를 설정하면 한 페이지에 애드센스가 3개 이상 게제될 수 있다. 그렇게 되면, 한 페이지에 3개 까지만 허용하는 정책에 위반되게 된다.

그러므로, 인라인 애드 기능을 사용하려면, 블로그의 애드센스가젯을 사용하고 직접 애드센스 코드를 넣는 것은 주의를 해야 하겠다.

2) 광고 형식 (Format), 색상 (Color) 등의 설정
인라인애드 기능을 처음으로 활성화 할 때는 제반 설정을 하여도 상관이 없다.
그러나, 일단 인라인 애드를 게시한 뒤에 설정을 변경하면 이런저런 오류가 발생한다. 그러므로, 일단 인라인애드를 게시한 뒤에 설정을 변경하려면, 애드센스 계정으로 가서, 인라인애드로 추가한 광고단위의 설정을 변경하는 것이 좋겠다.

인라인애드로 추가한 광고단위는 애드센스 계정에서 "블로그 이름_main_Blog1_1x1_광고 형식" 와 같은 이름으로 표시된다.


3. 인라인 애드 광고 규격설정과 배치 설정

인라인 애드는 기본적으로 영역의 가운데(center)에 배치된다. 광고의 좌우 위치, 위/아래 여백, 테두리, 배경색 등을 설정하려면 아래의 CSS 코드를 사용하면 된다.

[인라인애드 제어 CSS 코드 모양]
.inline-ad {
여기에 필요한 설정 항목들을 적어 줌
}

설정항목은 필요한 것만 추가하면 된다. 예컨데,
ㅇ 가로 너비 설정 => width: 300px;
ㅇ 바깥 여백 설정 => margin: 50px
ㅇ 안쪽 여백 설정 => padding: 5px;
ㅇ 좌우 배치 설정 => text-align: left 또는 center 또는 right;
ㅇ 테두리 설정 => border: 1px solid #efefef;
ㅇ 배경색 설정 => background-color: #ababab;

 
애드센스 광고를 가로의 가운데에 배치하기

애드센스 광고단위를 300x250 또는 336x280 등으로 하였을 경우나, 반응형 광고단위(Responisve)를 넣은 뒤에 가로폭(width)을 조절한 경우에, 애드센스를 가로의 가운데로 배치하려면 바깥여백 (margin)을 다음과 같이 설정해 주면 된다.
=> margin: 0px auto 0px auto; 또는 margin: 0px auto;

애드센스의 상하 여백은 손대지 않고 좌우 가운데로 배치하려면
=> margin-left:auto; margin-right:auto;

그러면 아래와 같은 모양이 된다.
.inline-ad {margin: 0px auto; }
또는
.inline-ad {margin-left:auto; margin-right:auto;}

CSS 코드를 추가하는 방법은 링크를 참조하세요.
구글블로그 사용법: CSS코드 추가 변경하는 방법 2가지 >>


도움이 되기를 바랍니다.