본문 바로가기

경영·마케팅·PR 이야기/온라인 마케팅

블로그에 구글 애드센스 광고 삽입 - 무작정 따라하기 (3)


지난 포스트까지는 구글 광고를 블로그에 넣기 위한 첫번째 단계인
구글 애드센스 계정을 신청 하는 방법과
블로그에 삽입할  광고 코드를 얻기 위한 두번째 단계까지 살펴보았습니다.
이번에는 카피한 코드를 블로그 본문에 삽입하는 방법을 알아보겠습니다.  



3. 블로그에 광고 코드 삽입


신청한 광고 내용대로 받은 코드를 본문에 삽입하기만 하면 됩니다.
티스토리에서는 글쓰기 상단 우측의 HTML 체크박스에 체크를 하면
HTML 모드로 작업이 가능하지요.
이 HTML 모드에 광고 코드를 삽입하면 되는 것이죠.

일단 이전에 저장했던 광고 코드를 불러 봅시다.
저장했던 텍스트 문서를 열거나
구글 애드센스 계정(https://www.google.com/adsense)에 로그인 하신 후
페이지 상단의 '애드센스 설정' 탭을 클릭하시고
탭 아래 '광고 관리'를 클릭하시면 애드센스 단위를 확인하실 수 있습니다.
각 애드센스 단위의 우측에 위치한 '액션' 

애드센스에서 광고 코드 가져오기

애드센스 계정에서 광고 코드 찾는 방법


애드센스 계정에서 애드센스 단위 코드를 가져오시거나
저장한 텍스트 문서를 열어 광고 코드를 가져오시면 되겠지요

<script type="text/javascript"><!--
google_ad_client = "pub-5630653937806985";
/* 300x250,100330,인터넷마케팅,본문상단우측 */
google_ad_slot = "8564758867";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>


이 코드들을 선택(Ctrl+A)하여 복사(Ctrl+C)해 놓습니다.
컴퓨터가 코드 내용들을 기억하고 있다가 붙여넣기(Ctrl+V)를 하면
위의 코드를 삽입하게 됩니다. 
(위 박스 안의 코드를 그대로 사용하시면 구글에서는 저(휘아빠)의 광고로 인식하게 되겠죠^^)

이제 블로그의 글쓰기 페이지를 열어
글쓰기 모드를 HTML로 전환합니다. 
HTML 체크박스에 체크를 해 봅시다.
그러면 타이틀을 제외한 본문 내용이 HTML로 나타나게 되는데,
본문 내용 중 적당한 곳에  삽입하기만 하면
블로그 내에 광고 삽입이 완료됩니다^^ 

애드센스 광고 코드 삽입

글쓰기 HTML 모드에서 애드센스 광고 코드 삽입


위 이미지를 설명한 필요도 없이,
그저 적당한 위치에 광고 코드를 삽입하기만 하면 되죠^^

광고 삽입과 문서 작성이 끝난 후
자신의 블로그에서 해당 포스트(광고가 삽입된 글)를 열어 볼까요^^
아래와 같이 광고가 삽입됩니다^^



구글 광고가 보이시죠^^
헌데 우측상단에 넣기 위해 광고의 가로 사이즈를  본문 가로의 절반 정도로 설정했는데
왼쪽에 치우치니 별로 보기 좋지 않지요^^;;
그럼 왼쪽엔 글이 보이도록 오른쪽으로 보내 봅시다.
여러가지 방법이 있을 수 있겠습니다만,
가장 손쉬운 방법, 테이블 코드를 추가해 보도록 하죠^^;;

<table width="300" border="0" align="right"><tr><td>

<script type="text/javascript"><!--
google_ad_client = "pub-5630653937806985";
/* 300x250,100330,인터넷마케팅,본문상단우측 */
google_ad_slot = "8564758867";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

</td></tr></table>


오른쪽에 광고가 보이시지요?
애드센스 광고 코드 앞뒤로 테이블 코드를 넣어줬습니다.
테이블 코드에서 폭(width), 선두께(border),
테이블 위치(align) 등을 정할 수 있지요^^

물론 테이블 코드 말고도
div 코드를 활용하거나
스타일시트(style.css)에서 
광고의 위치와 테두리 등을 설정할 수도 있답니다.
요즘 트렌드는 table보다는
div와 css를 활용하는 것이 대세인 것 같더군요.
그럼 내친 김에 <div>코드를 활용한 사례도 같이 해 볼까요^^
 
위의 테이블이 들어갈 자리에
테이블 대신 <div> 코드가 들어가 주면 됩니다.

<div style="MARGIN: 0px 0px 10px 10px; FLOAT: right">

<script type="text/javascript"><!--
google_ad_client = "pub-5630653937806985";
/* 300x250,100330,인터넷마케팅,본문상단우측 */
google_ad_slot = "8564758867";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

</div>


float는 본문 글의 좌우 중 어느쪽에 위치할 것인가를 선택하는 것입니다.
padding은 안쪽 영역의 여백이고,
margin은 바깥쪽 영역의 여백입니다.
padding, margin의 순서는 12시부터 시계 방향입니다. (top right bottom left)

 margin: 10px;         ->상하좌우 모두 10px 씩 여백이 지정됨
 margin: 10px 5px ;  ->위, 아래는 10px, 왼쪽과 오른쪽은 5px로 지정됨
 margin: 10px 9px 8px 7px; -> 위 10px, 오른쪽 9px, 아래 8px, 왼쪽 7px 
 margin: 10 9 8 7 ;    -> 위와 동일

 
하고 보니 테이블 코드보다 단순 명료한데다가
여백의 설정이 더 편리하게 느껴지는 군요^^

이 코드를 본문에 넣어 봅시다.
테이블 코드를 활용한 사례와 대동소이 하죠.
글쓰기 HTML모드에서 본문상단에 코드를 삽입하면 된답니다.

DIV 코드 삽입

DIV 코드를 활용하여 광고 정렬

 
<div> 코드가 애드센스 광고 코드를 감싸는 형태의 스크립트(광고 코드)를
블로그 글쓰기 HTML모드의 상단에 위치시키면
본문의 상단 우측에 광고가 보이게 됩니다.
이렇게 하니 아래의 이미지와 같이 광고가 나오네요^^

div를 활용한 광고 코드 적용

DIV 태그를 적용하여 광고코드를 삽입한 사례



이렇게 3편에 걸쳐서 구글의 애드센스 광고 코드를
블로그 본문 속에 삽입하는 방법을 살펴보았습니다.
생각보다 훨씬 쉬웠지요?^^

구글 애드센스의 수익성에 대해서는 이런저런 이야기들이 많습니다만,
한글을 사용하는 국내라는 점과 광고주 역시 국내 광고주라는 점에서
그 한계가 뚜렷해지는 것이 아닌가 싶습니다.

기본적으로 블로그에 삽입시킬 수 있는 광고와 업체의 활용 로직(논리)이
그다지 많이 다르지는 않으리라 생각됩니다. 
한번 활용해 보시고 수익성이 더 좋은 광고들을 찾아
블로그의 활용도를 더 높이시기 바랍니다.
다른 광고업체의 활용사례도 준비가 되는대로 올리도록 하겠습니다.

이제 애드센스 광고 코드를 원하는 형태로 원하는 곳에
자유자재로 위치시킬 수 있으시리라 생각합니다.
조금이나마 도움이 되었다면 좋겠구요^^;; 끝까지 읽어주셔서 감사합니다^^*(posted by 훈샘 : http://brandesign.tistory.com ) 


 


조금이나마 흥미 있으셨거나, 가치를 느끼셨거나, 도움이 되셨다면
아래 'view on''mixup' 클릭하는 센스^^