티스토리 블로그 애드센스(Adsense) 두 개 나란히 노출하기

블로그나 웹사이트를 운영하고 있는 운영자는 광고주들의 광고를 노출해주고 방문자들이 합당한 절차에 의해 광고를 클릭하거나 구매유도 행위가 발생하면 그에 따른 보상을 지급받습니다. 블로그에 글을 써 공유하고 방문자들에게 적절한 광고를 노출하면서 수입을 얻는 것은 상당히 매력적이라 생각됩니다.

그렇다면 광고를 어디에 노출을 시켜야 효과가 좋을까요? 구글 애드센스(Adsense)는 다양한 종류의 광고를 지원하고 있습니다. 블로그나 웹사이트의 레이아웃에 잘 녹아들게끔 적절한 광고를 찾아 기재하면 됩니다. 일반적으로 우리나라에서 가장 인기 있는 광고 위치는 본문 상단과 하단입니다. 수익률만으로는 본문 상단에 노출한 광고의 수익률이 높다고 많은 분들이 경험을 통해 말하고 있습니다. 이번에는 본문 상단에 애드센스 두 개를 노출시키는 방법을 알아보겠습니다.

함께 읽을만한 글

2014/08/13 - [알아보기/블로그] - 구글 애드센스(Google Adsense) 광고 생성하기

2014/08/25 - [알아보기/블로그] - 티스토리 블로그 본문 상, 하단에 구글 애드센스(Adsense) 광고 삽입하기

데스크탑 환경에서 구글 애드센스(adsense) 나란히 두 개 노출하기

 

간단한 DIV 태그를 통하여 광고 두 개를 나란히 노출해보겠습니다. 데스크탑 환경임을 가정하면 336x280 크기의 큰 사각형 광고를 두 개 나란히 노출할 수 있습니다. 광고의 크기를 변경하면 skin.html에 있는 "adsense-1", "adsense-2"의 width와 height을 노출하고 하는 광고의 크기로 변경해 주시고 style.css에 있는 .adsense-top2의 width를 광고 두개를 합한 크기와 알맞은 height 값으로 변경 하면 됩니다. 최대 가로폭은 본문의 최대 가로폭을 넘지 않도록 설정해야 합니다.

Colored By Color Scripter™

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<!-- 애드센스 상단 2 개 Start --> <div id="adsense-top2" class="adsense-top2">   <div id="adsense-1"  style="float:left; width:336px; height:280px;"> <!-- 애드센스 코드 삽입 --> </div>   <div id="adsense-2" style="float:left; width:336px; height:280px; padding-left:10px"> <!-- 애드센스 코드 삽입 --> </div>   </div> <!-- 애드센스 상단 2 개 End --> [##_article_rep_desc_##]

skin.html

 

Colored By Color Scripter™

1 2 3 4 5

.adsense-top2{ width: 672px; height: 280px; margin:auto; }

style.css 

 

위의 코드를 복사하여 각각 skin.html 과 style.css에 붙여넣습니다. skin.html은 article_rep_desc의 앞에 넣으면 상단에 두 개, 밑에 넣으면 하단에 두 개의 광고가 나란히 배치됩니다.

 

 

상단에 삽입하면 지금 보고 계신 페이지 처럼 본문 상단에 두 개의 광고가 나란히 노출됩니다. 간단한 html 수정으로 본문에 광고 두 개를 나란히 배치시켰습니다. 이 방법은 일반 스킨에서는 정상적으로 동작하지만 반응형 스킨을 사용중인 블로그에서는 모바일에서 광고가 정상적으로 노출되지 않고 애드센스 정책에 위반될 수 있으니 반응형 스킨을 사용 중이시면 이 방법은 추천드리지 않습니다. 반응형 스킨에 적용하는 법은 반응형 광고를 알아볼 때 같이 알아보겠습니다.