구글 애드센스 광고 달기;
먼저 자담이지만, 이 광고 두개를 제 블로그에 달기 까지 "실패"가 너무 많았습니다.
그리고 끝까지 물고 늘어진 결과 결국 답을 찾았고, 그 답의 결과의 "핵"은 정말
어이 없는거였지만, 옛날에 코딩하다보면 정말 별게 아닌게 큰 버그를 주었던 경험을
다시 해보니..약간 허탈하면서도 내가 원한것을 얻었기에 대만족합니다.
자 그럼 이제 본문으로 갑니다.
1. 구글 애드센스 가입 -> "X" 왜냐면 구글에 애드센스만 검색해봐도 너무나 많은 자료들이
넘쳐납니다.
2. 티스토리 광고 넣기 -> "X" 안합니다. 1번과 같이 너무 많습니다.
기준은 광고 300 * 250 짜리 광고를 상단에 두개 차례대로 넣는걸 해보겠습니다.
다 블로그 강의나 정보에서 보면 다 똑같지만, 그래도 "이거 그냥 이렇게 하세요"
이것보다는 그래도 처음부터 차례대로 나열해 보겠습니다.
먼저 "윈도우","맥OX"에서 메모장을 실행합니다.
<div id="googleTop">
<div class="googleLeft">
/*구글애드센스광고*/
</div>
<div class="googleRight">
/*구글애드센스광고*/
</div>
</div>
요기 위에 있는 코드를 복사를 하셔서, 메모장에 붙여넣기를 합니다.
그리고 밑에 그림처럼 애드센스에 가서
코드 가져오기를 클릭하셔서 코드를 복사합니다.
그리고 다시 복사된 코드를 메모장에 붙여넣기를 하는데요.
/*구글애드센스광고*/라고 되어있는 라인에 코드를 붙여넣습니다.
"============================"; <- 이것은 제계정넘버이기때문에이렇게 한겁니다.
숫자머시기머시기로 나옵니다.
"어~ 내코드랑 틀리네" 하시는분이 계시겠지만, 당연한겁니다.
그리고 의심조차 안하셔도됩니다.
자 그럼..위에 그림을 보시면 오른쪽상단이라는건 그냥 쉽게 생각해서 왼쪽에 들어가는
광고입니다. 그리고 또 다시 애드센스메인에 가셔서 광고코드를 또 복사를 해서
아래 그림처럼 오른쪽 광고 코드도 붙여넣기를 합니다.
그러면 애드센스 광고코드는 다 완성된겁니다.
하지만, Blogger사용자님들께서는 완성된 코드가 아닙니다.
티스토리 사용자분들께서는 위에 완성된 코드를 HTML EDIT창에 복사를 해서 붙여넣기
하면 끝이지만, 구글 Blogger사용자님들은 아마 광고가 안나오신분들이 계실겁니다.
제가 거의 보름이상을 삽질한 코스지요.
블로거스팟 유저님들은 소스코드를 수정하셔야하는데요.
처음에 만든 소스코드:
<div id="googleTop">
<div class="googleLeft">
<script type="text/javascript"><!--
google_ad_client = "============================";
/* 오른쪽상단 */
google_ad_slot = "4988288003";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<div class="googleRight">
<script type="text/javascript"><!--
google_ad_client = "============================";
/* 왼쪽상단 */
google_ad_slot = "5623631953";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
</div>
위에 노란색으로 칠한 부분을 삭제를 합니다.
그러면 아래 소스 코드가 됩니다.
수정한 소스코드:
<div id="googleTop">
<div class="googleLeft">
<script type="text/javascript">
google_ad_slot = "4988288003";
google_ad_width = 300;
google_ad_height = 250;
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<div class="googleRight">
<script type="text/javascript">
google_ad_slot = "5623631953";
google_ad_width = 300;
google_ad_height = 250;
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
</div>
아래 그림처럼 탬플릿으로 가셔서 HTML편집으로 클릭하셔서
"계속"을 클릭하셔서,
템플릿>HTML편집 밑에 있는 "가젯 코드 펼쳐서 보여주기"앞에 있는 체크박스를 체크를 합니다.
그러면 가젯코드가 펼쳐지구요.
Ctrl+F(컨트롤+F)를 눌러서 <data:post.body/> 를 찾습니다.
찾는 문구를 드래그 복사해서 검색창에 넣으시면 두개가 나오는데요.
여기서 첫번째로 나오는 문구에다가 "광고소스코드"를 붙여넣기 하시면 됩니다.
광고 소스 코드는 <data:post.body/> 이문구 바로 윗줄에다가 붙여넣기 하시면됩니다.
자! 다 되었구요. 미리보고싶으신분은 "미리보기"를 클릭하셔서 한번 보시면되구요.
미리안보고 싶으신분은 "템플릿저장"을 클릭하시면 됩니다.
아직 한단계가 더 남았습니다. ㅎㅎㅎㅎㅎ
CSS편집인데요.
편집창에서 다시 컨트롤+F를 눌러서 /* Posts 문구를 찾습니다.
/* Posts
----------------------------------------------- */ <---- 이 문구 밑에다가 소스 코드 하나를 더 복사해서 넣아야합니다.
#googleTop {height:250px; width:610px; overflow:hidden; margin: 10px 0;}
#googleTop .googleLeft {
float:left;
width:300px;
}
#googleTop .googleRight {
float:right;
width:300px;
}
위에 소스를 복사를 하셔서 아래 그림처럼 붙여넣습니다.
모든 과정은 끝났습니다.
다시 템플릿 저장을 하시면 이제 상단에 광고 두개가 나올겁니다.
잠시 설명을 드리자면,
#googleTop {height:250px; width:610px; overflow:hidden; margin: 10px 0;}
소스코드중에 색칠된 width:610px는 블로그 폭을 말하는겁니다.
간혹 광고는 나오는 광가 짤려서 나오면 width:610px를 610에서 더 크게 수치를 넣으시면 됩니다.
참고로, 구글 블로그는 스킨이라고 하죠. 하지만 구글블로그는 템플릿이라고 합니다.
그냥 스킨=템플릿 같은 의미로 생각하시면되는데요.
혹시 사용하시다가 템플릿이 맘에 안든다.
하신분은 템플릿 수정을 하시고 나서 위에 순서대로 다시 해주셔야합니다.
댓글
댓글 쓰기