[블로그만들기]  티스토리 규격보다 큰 모바일 광고 넣기

[블로그] - 티스토리 모바일페이지 광고제거 팁
[블로그] - 티스토리 모바일광고 대신 구글애드센스 넣기
위의 포스팅에 이은 글입니다.
요즘 SNS에 블로그 포스팅글을 많이 올리시죠?
그런데 어떻습니까 티스토리는 지네들 광고를 고정적으로 박아 넣더군요.
이걸 자신의 광고로 대체 해보자 이겁니다. 그런데 기존은 320x50사이즈의 광고로 고정이 되어있습니다.
그러나 스타일 시트를 이용하면 이광고를 자신의 광고로 대체 할수 있습니다.
아래의 내용을 HTML모드로 포스팅의 마지막에 추가시시면 됩니다. 구글광고코드부분에는 자신의 코드를 넣어야죠
최신이 아닐때는 margin:top 부분에 210px 대신 230 정도로 주시면 될겁니다...
광고가 조금더 커졌으니 모바일에서의 클릭율은 조금 더 올라가겠지요. ^^

<div id="mobile_google_ad" style="margin:320px 0px 0px -2px; position:absolute; top:height">

## 구글광고코드( 300x250사이즈) ##

<style>

#daumAd{width:320px; height:260px; !important}

#daum_adam_MobileadAreaDiv{width:0; height;0; display:none !important}

#daum_adam_MobileadAreaDiv div a img{width:0; height:0; display:none !important}

< /style>

300x250 구글 애드센스로 교체된 포스팅글

[블로그만들기] 포스트 상단에 광고사이즈 300x250 두 개의 애드센스 광고를 삽입

구글 애드센스 가입 및 광고코드를 만들었으면 이제 티스토리 블로그에 삽입하면 됩니다. 일반적으로 많이 쓰이는 방식이 포스트 상단에 하나 혹은 두 개의 광고를 설치하는 편인데요. 제 블로그에 보이는 대로 포스트 상단에 광고사이즈 300x250 두 개의 애드센스 광고를 삽입하는 방법에 대해서 정리했습니다. (관련 글 : 구글 애드센스 광고 설정 및 광고코드 생성하기 )

먼저 HTML/CSS 편집창에 들어가서 본문의 위치를 찾아야겠죠. 관리자 ➔ 꾸미기 ➔ HTML/CSS편집 항목으로 이동한 후 skin.html 에서 Ctrl+F 키를 이용하여 article_rep_desc 을 검색 합니다. 이 곳이 본문에 해당되는 곳입니다.

참고로 article_rep_desc 바로 위에 광고 코드를 넣으면 본문 상단에 출력되고 아래 넣으면 본문 하단에 출력됩니다. 상단 가운데 위치에 2개의 광고를 출력하기 위해서 표(테이블) 태그를 이용해 article_rep_desc 위에 아래와 같이 입력합니다.

<!--애드센스 본문 배너 시작-->
<center>
<table cellpadding="0" cellspacing="0" table width="600" bgcolor="#E6E6E6" ; align="center">
<tr>
<td width="50%">
구글 애드센스 광고코드 01
</td>
<td width="50%">
구글 애드센스 광고코드 02
</td>
</tr>
</table>
</center>
<!--애드센스 본문 배너 종료-->

‘article_rep_desc’ 위에 광고 스크립트 삽입

▶ <table cellpadding="0" cellspacing="0" table width="600" bgcolor="#E6E6E6" ; align="center">

➔ width="600"

• 광고를 삽입한 표(테이블)의 전체 폭 입니다. 블로그의 경우 본문넓이가 광고 사이즈 300x250 두 개에 맞게 꾸며져 있거나, 다른 광고사이즈로 변경하려면, 픽셀수치가 아닌 ‘100%’ 퍼센트 수치로 입력하셔도 무방합니다.

➔ bgcolor="#E6E6E6"

• 광고를 삽입한 표의 배경색을 설정하는 태그로 저는 블로그에 맞게 회색톤의 색상코드를 넣어줬습니다. 본인의 블로그에 맞게 #E6E6E6 부분에 적당한 색상코드로 대체하시면 됩니다.

테이블의 가로나 높이 배경색 등 자신의 블로그에 맞게 취향대로 설정하시고, 저장했다면 블로그 본문 상단의 가운데 위치에 두 개의 애드센스 광고가 출력될 겁니다.

[블로그만들기] 콘텐츠용 애드센스 광고

애드센스에 가입을 완료하고 이제 블로그에 삽입하기 위해서 가장 먼저 할 일이 애드센스 광고를 생성하고 광고코드를 받아야 합니다. 구글 애드센스 광고의 종류는 크게 콘텐츠용, 검색용으로 나뉘고 그 이외에 몇가지 형태가 더 있습니다만, 이중 가장 많이 사용하고 있는 콘텐츠용 애드센스 광고를 만들어 보겠습니다.

1. 가입 및 로그인

2. 콘텐츠용 광고 설정하기

• 이름 : 해당 광고단위를 구분할 수 있게 이름을 지어줍니다.

• 광고 크기 : 다양한 광고크기를 설정할 수 있습니다. 정사각형이나 수직, 수평 배너 및 링크형 광고도 여기서 설정할 수 있으며, 삽입하려는 블로그 너비에 맞게 적당한 크기를 선택하면 됩니다. 일반적으로 많이 쓰이는 크기로 본문 영역의 너비는 보통 600~800 정도이며, 사이드바는 200~300 정도입니다.

• 광고 유형 : 텍스트나 이미지, 리치 미디어 등의 노출하려는 배너의 광고유형을 지정할 수 있습니다.

어떤 샘플이 있는지 확인하려면 다음 링크를 참고하세요. 광고 유형 및 크기의 예 보기

• 대체 광고 : 구글에서 타겟팅 된 광고를 게재할 수 없는 경우 대체되는 광고를 설정할 수 있습니다. 구글 애드센스는 키워드에 기반하여 연관된 광고가 나타나는 방식인데, 연관된 광고가 없을 경우 기본적으로 빈칸으로 표시되며, 여기서 다른 광고로 대체할 수 있습니다.

• 맞춤 채널 : 간략하게 맞춤 채널이란 광고를 위치나 크기에 따라 그룹단위로 묶는겁니다. 여기서는 어떤 맞춤 채널에 넣을 건지 설정할 수 있습니다. 만들어진 맞춤 채널이 없으면 그냥 두시면 됩니다.

• 광고 스타일 : ‘광고스타일 선택’은 구글에서 미리 기본적으로 제공되는 스타일이며, ‘맞춤 설정 사용’을 선택해서 자신의 사이트나 블로그에 맞게 글꼴이나 색, 테두리 등을 개별적으로 변경할 수 있습니다. 이렇게 맞춤 설정된 광고스타일도 저장해서 계속 사용할 수 있습니다.

3. 코드 생성하기

 [블로그만들기] 본문 내의 오른쪽 상단에 애드센스 광고를 넣는 방법

티스토리 블로그의 장점 중 하나를 말하자면 가입형 블로그이지만, HTML수정을 통해 설치형 블로그 못지않은 자유도를 부여해줍니다. 이런 장점의 일환으로 구글 애드센스 광고 또한 원하는 위치에 노출시킬 수 있는데요.

국내 블로거들을 돌아다녀보면 대부분은 본문 상단의 광고 두 개를 넣는 형식을 즐겨 쓰는 것 같습니다. 저 또한 그런 식으로 광고를 삽입했고요. 오늘은 신문사나 외국 사이트들이 즐겨 쓰는 본문 내의 오른쪽 상단에 애드센스 광고를 넣는 방법을 알아봤습니다.

✱ 본문 내 오른쪽 상단 광고 넣기

티스토리 블로그의 관리자 페이지에서 [꾸미기] ➔ [HTML/CSS편집] ➔ [HTML/CSS]에서 skin.html 창에 Ctrl+F 키를 이용하여 검색창을 여신 후 본문에 해당하는 article_rep_desc 을 검색 합니다.

본문 상단에 광고를 노출시킬려면 article_rep_desc 바로 위에 구글 애드센스 광고 코드를 div 태그를 이용하여 아래와 같이 넣어야 합니다.

‘article_rep_desc’ 바로 위에 추가

▶ <div style="float:right; border:3px solid #E6E6E6; margin: 0px 0px 10px 10px;">

➔ float:right

• 광고를 오른쪽에(right) 위치합니다. 왼쪽으로 변경할려면, left를 변경하면 됩니다.

➔ border:3px solid #E6E6E6

• 광고테두리를 설정한 부분입니다. 테두리 두께는 3px이며 형태는 직선(solid), 색깔은 연한 회색(#E6E6E6)으로 했습니다. 테두리가 필요없으신 분은 이 부분을 삭제하세요.

➔ margin: 0px 0px 10px 10px

• 광고테두리 바깥쪽 여백을 왼쪽과 오른쪽에 각각 10px씩 주었습니다. 본인의 블로그에 맞게 여백을 조정하시면 됩니다.

※ div 태그에 대해서는 더 자세히 알려면 이전 포스팅을 참고하세요. (관련 글 :구글 애드센스 광고 바깥 테두리 넣기 (div 태그))

개인적으로 본문 오른쪽 상단의 광고가 블로그에 자연스럽게 배치된다고 생각했지만, 실행에 옮기진 않았습니다. 왜냐하면, 이미 배치되어 있는 광고 3개 중 하나를 변경해야 하고 그에 따른 레이아웃도 다시 잡아줘야 하기 때문입니다.

무엇보다 이 방식은 글 작성에 있어 서론 부분을 이미지가 아닌 글로 채워야 텍스트와 광고가 조화를 이루기 때문에 이미 작성된 기존의 글들의 레이아웃도 모두 수정해야 할 뿐더러, 앞으로 글을 작성함에 있어 이런 부분까지 신경 써야 한다는 불편함도 한 몫 거들었습니다.

처음부터 이런 컨셉으로 갈 생각이었다면 시도해 볼만은 한 것 같습니다.

[블로그만들기]카테고리의 다른 글’ 옆에 애드센스 광고를 삽입

티스토리 블로그 포스트 하단에 있는 ‘카테고리의 다른 글’ 옆에 애드센스 광고를 삽입해봤습니다.

‘카테고리의 다른 글’ 옆의 적당한 애드센스 광고사이즈는 200×200정도 인 것 같습니다. 마침 이전의 카테고리 다른 글을 손보면서 날짜부분을 없애버린 터라 여백도 남고 해서 크게 시간들일 필요 없이 광고를 삽입했습니다.

1. style.css 편집

티스토리 블로그의 관리자 페이지에서 [꾸미기]➔[스킨]➔[HTML/CSS 편집]으로 가서 Style.css 편집탭의 맨 하단에 아래의 소스를 추가합니다.

div.adsense200 {clear:none;width:205px; !important;}
div.adsense200 tr {line-height:14px; height:14px;}
div.another_category {display:inline;float:right;clear:both;text-align:left;width:395px ! important;overflow:hidden !important; margin-top:0px; border-right:1px solid #E6E6E6;}
div.another_category tr {line-height:17px; height:24px;}

자신의 스킨에 따라서 몇가지를 설정해야 합니다.

➔ 셋째 줄 width:395px 부분은 ‘카테고리 다른 글'의 가로 사이즈입니다. 자신의 본문 가로 폭에 따라 애드센스 광고가 밀려버리기 때문에 미리보기로 확인하면서 적절한 사이즈를 입력하면 됩니다.

➔ 마지막 줄의 line-height:17px 은 줄간격입니다. height:24px; 이 부분을 조정하니 카테고리 다른 글의 세로 사이즈가 변경 되기에, 애드센스 배너와 잘 어울리도록 이 두 부분을 적당히 조정했습니다.

2. Skin.html 편집