쌩초보 안내기 두번째 편 구글 애드센스 설치하기
자 드디어 본격적인 이야기로 들어왔습니다. 서론이 좀 길었다는 생각도 드는군요 -_-
카피한 코드를 집어 넣기위해 각자 스킨편집을 하는 곳으로 갑니다.
저는 티스토리를 쓰는데 관리자 모드에서 스킨 -> 스킨 편집을 하시면 됩니다.
가보면 *skin.html 이라고 써있는 창과 *style.css 라고 써있는 창이 있을 겁니다.
우리가 관심있게 볼 창은 *skin.html 입니다.
서론에서도 말했다시피 전 html 이거 무슨소린지 하나도 모릅니다. 찬찬히 읽다보니 규칙이 있어서 야매로
삽입하는 방법을 찾은 겁니다. 기술적으로 어떤게 무슨 명령어다 이런건 다 넘어가겠습니다.
자 스킨창을 잘 헤메고 다녀야 하는데요 여기에 나침반 구실을 하는 문구들이 있습니다.
첫째, 스킨 만드시는 분들이 달아 놓은 주석입니다.
<!-- #### 주 석!! #### -->
요렇게 생긴 녀석을 잘 찾으면 됩니다.
둘째, </div> 요놈입니다.
다른 언어들처럼 html 이놈도 모든 창을 다 열고 닫더군요 <html> 열었으면 </html> 이렇게 닫고
<div .라.라> 이렇게 열었으면 </div>이렇게 닫더군요. 그리고 우리가 넣어야할 부분은 바로 저
div 란놈으로 둘러쌓여 있는 부분 입니다.
셋째, 스킨 메뉴 이름들 입니다.
좀 무식한 방법인데, 쌩 초보를 위한 글이니 이해해 주십시요;; 딱 제 수준입니다 ^^)//
어디가 내가 넣을 위치인지 도대체 모르겠다 이러면 맥의 경우 알트+F 이고 윈도우는 컨트롤일겁니다.
저걸 누르고 메뉴 이름을 검색합니다. 요령이 있는데 만약 사이드 바에 카테고리, 최근 댓글, 최근 트랙백 등이
순서대로 걸려있고, 최근 댓글과 최근 트랙백 사이에 광고를 넣고 싶다면 최근 댓글이 들어가 있는 부분을
검색합니다. 그리고 그 다음 가까운 이름이 최근 트랙백이면 빙고인 겁니다.
저같은 생초보 눈에 읽히는 잡다한 (그러나 중요한-_-) 코드들을 다 넘기고 저 이름들이 붙어있다면 그자리가
빙고 입니다.
자 예제로 들어가 보겠습니다-_- 무조건 따라해서 끝내는 시리즈입니다 -_-)/
1. 최상단 블로그 이름 밑에 광고를 길게 넣고 싶은 경우.
제 블로그의 위 부분처럼 광고를 바로 아래 넣고 싶다면 헤더 부분을 찾아야 합니다.
거의 최상단 부분에 코드가 있을겁니다.
제 스킨에는 주석으로 친절하게 <!-- #### Header Start #### --> 와
<!-- #### Header End #### --> 등의 친절한 주석이 있어서 헤더 부분이 어딘지 알기 쉬웠습니다.
이런 주석이 없는 분은 <div id="header"> 를 검색하시면 이게 헤더의 시작이고 이건 </div> 로 끝나서
저 부분을 완성합니다. 그러니깐 <div id= 이 부분으로 검색해서 다음번 검색되는 놈 - 저같은 경우는
<div id="side">였습니다 - 까지 간다음 바로 윗줄 보시면 </div> 가 있을겁니다.
바로 이 </div>의 바로 앞에 넣어주시면 됩니다. 단순하게 그리면
<div id ="header">
.라.라 쿵쿵따
여기가 구글 코드 복사한거 붙이는 곳입니다.
</div> <---- 요놈이 중요한 놈이죠.
<div id ="side(혹은 다른거?)>
.라.라 아멘
</div>
이런 식 되겠습니다. 이해 되죠 ^^)//
2. 메인 페이지 글안에 광고를 넣고 싶은 경우.
이 부분은 애드센셜님의 애드센스를 글에 자연스럽게 배치하기 에서 배운 팁인데 삽입 방법만 다루겠습니다.
애드센셜님 포스트에서 다뤘듯이 구글에서 가져온 코드를 다른 코드 사이에 먼저 넣어야한다 바로 이것.
<div style="margin-top:40px; padding-left:5px; float:right; width:336px; position: static;">
// 애드센스 광고 스크립트를 여기에~
</div>
저 위에 나온대로 광고 스크립트 넣어서 저거 전체를 복사합니다.
그리고 글안으로 들어가서 article_rep_desc 를 검색하면 이런게 검색되는데
바로 앞에 딱 붙여주시면 되겠습니다.
저 추가 코드중에 width : 336px 부분의 숫자를 조정하면 자기 스킨에 맞게 위치를 조금씩 옮길 수 있습니다.
또 애드센셜님의 다른 팁으로 float:right;를 float:left; 로 바꾸면 왼쪽 맞춤이 된다고 합니다 ^^
3. 본문에 달린 댓글 쓰는 란 앞에 광고를 넣고 싶은 경우.
이건 관련 글이 없어서 좀 삽질한 부분입니다. 일단 주석이 많이 달리신 분들은 <!-- comment write--> 을
검색해보자 나오면 바로 빙고입니다.
아니신 분들은 <div class="cmt_form_box"> 을 검색하시고 바로 뒤에 붙이면 됩니다.
사실 아는게 없이 그냥 삽질 끝에 안것이므로 할말은 별로 없습니다 하하;;
4. 사이드바 부분에 광고를 넣고 싶은 경우.
다 비슷한 방식이니깐 이제 저같이 생초보 분들도 패턴을 파악하셨을겁니다 ^^
<!-- #### Side Start #### --> 이런 문구나 <div id="side"> 이런 문구를 검색하시면
그곳이 바로 사이드바 관련 코드 덩어리의 시작부분입니다. 이 뒤로 잘 살펴 보면 사이드바의 메뉴들이
일정한 규칙속에 이름만 바뀐걸 알수 있습니다. 제 코드를 예로 들어보면,
<div class="sidebar_title" >Recent Trackbacks</div>
<div class="td_info" id="block6" style="display:block;">
<div id="recentTrackbacks">
<s_rcttb_rep> <a href="" class="info_link"> </a><br>
<span class="f11 gray3"></span><br>
</s_rcttb_rep>
</div>
</div>
규칙이 보이시나요? 저 녹색 굵은 글씨가 바로 메뉴들입니다.
만약 Recent Commants 와 Recent Trackbacks 사이에 사이드 바를 넣고 싶으면 삽입할 부분
에 광고 코드를 삽입하면 됩니다. 다른 부분은 같은 패턴으로 ~ 아시겠죠 이제 ^^/
포스트가 길어져서 다음편에 주의 사항과 다른 광고 단위들에 대해 잠깐 언급해 보도록 하겠습니다.
자 드디어 본격적인 이야기로 들어왔습니다. 서론이 좀 길었다는 생각도 드는군요 -_-
카피한 코드를 집어 넣기위해 각자 스킨편집을 하는 곳으로 갑니다.
저는 티스토리를 쓰는데 관리자 모드에서 스킨 -> 스킨 편집을 하시면 됩니다.
가보면 *skin.html 이라고 써있는 창과 *style.css 라고 써있는 창이 있을 겁니다.
우리가 관심있게 볼 창은 *skin.html 입니다.
서론에서도 말했다시피 전 html 이거 무슨소린지 하나도 모릅니다. 찬찬히 읽다보니 규칙이 있어서 야매로
삽입하는 방법을 찾은 겁니다. 기술적으로 어떤게 무슨 명령어다 이런건 다 넘어가겠습니다.
자 스킨창을 잘 헤메고 다녀야 하는데요 여기에 나침반 구실을 하는 문구들이 있습니다.
첫째, 스킨 만드시는 분들이 달아 놓은 주석입니다.
<!-- #### 주 석!! #### -->
요렇게 생긴 녀석을 잘 찾으면 됩니다.
둘째, </div> 요놈입니다.
다른 언어들처럼 html 이놈도 모든 창을 다 열고 닫더군요 <html> 열었으면 </html> 이렇게 닫고
<div .라.라> 이렇게 열었으면 </div>이렇게 닫더군요. 그리고 우리가 넣어야할 부분은 바로 저
div 란놈으로 둘러쌓여 있는 부분 입니다.
셋째, 스킨 메뉴 이름들 입니다.
좀 무식한 방법인데, 쌩 초보를 위한 글이니 이해해 주십시요;; 딱 제 수준입니다 ^^)//
어디가 내가 넣을 위치인지 도대체 모르겠다 이러면 맥의 경우 알트+F 이고 윈도우는 컨트롤일겁니다.
저걸 누르고 메뉴 이름을 검색합니다. 요령이 있는데 만약 사이드 바에 카테고리, 최근 댓글, 최근 트랙백 등이
순서대로 걸려있고, 최근 댓글과 최근 트랙백 사이에 광고를 넣고 싶다면 최근 댓글이 들어가 있는 부분을
검색합니다. 그리고 그 다음 가까운 이름이 최근 트랙백이면 빙고인 겁니다.
저같은 생초보 눈에 읽히는 잡다한 (그러나 중요한-_-) 코드들을 다 넘기고 저 이름들이 붙어있다면 그자리가
빙고 입니다.
자 예제로 들어가 보겠습니다-_- 무조건 따라해서 끝내는 시리즈입니다 -_-)/
1. 최상단 블로그 이름 밑에 광고를 길게 넣고 싶은 경우.
제 블로그의 위 부분처럼 광고를 바로 아래 넣고 싶다면 헤더 부분을 찾아야 합니다.
거의 최상단 부분에 코드가 있을겁니다.
제 스킨에는 주석으로 친절하게 <!-- #### Header Start #### --> 와
<!-- #### Header End #### --> 등의 친절한 주석이 있어서 헤더 부분이 어딘지 알기 쉬웠습니다.
이런 주석이 없는 분은 <div id="header"> 를 검색하시면 이게 헤더의 시작이고 이건 </div> 로 끝나서
저 부분을 완성합니다. 그러니깐 <div id= 이 부분으로 검색해서 다음번 검색되는 놈 - 저같은 경우는
<div id="side">였습니다 - 까지 간다음 바로 윗줄 보시면 </div> 가 있을겁니다.
바로 이 </div>의 바로 앞에 넣어주시면 됩니다. 단순하게 그리면
<div id ="header">
.라.라 쿵쿵따
여기가 구글 코드 복사한거 붙이는 곳입니다.
</div> <---- 요놈이 중요한 놈이죠.
<div id ="side(혹은 다른거?)>
.라.라 아멘
</div>
이런 식 되겠습니다. 이해 되죠 ^^)//
2. 메인 페이지 글안에 광고를 넣고 싶은 경우.
이 부분은 애드센셜님의 애드센스를 글에 자연스럽게 배치하기 에서 배운 팁인데 삽입 방법만 다루겠습니다.
애드센셜님 포스트에서 다뤘듯이 구글에서 가져온 코드를 다른 코드 사이에 먼저 넣어야한다 바로 이것.
<div style="margin-top:40px; padding-left:5px; float:right; width:336px; position: static;">
// 애드센스 광고 스크립트를 여기에~
</div>
저 위에 나온대로 광고 스크립트 넣어서 저거 전체를 복사합니다.
그리고 글안으로 들어가서 article_rep_desc 를 검색하면 이런게 검색되는데
바로 앞에 딱 붙여주시면 되겠습니다.
저 추가 코드중에 width : 336px 부분의 숫자를 조정하면 자기 스킨에 맞게 위치를 조금씩 옮길 수 있습니다.
또 애드센셜님의 다른 팁으로 float:right;를 float:left; 로 바꾸면 왼쪽 맞춤이 된다고 합니다 ^^
3. 본문에 달린 댓글 쓰는 란 앞에 광고를 넣고 싶은 경우.
이건 관련 글이 없어서 좀 삽질한 부분입니다. 일단 주석이 많이 달리신 분들은 <!-- comment write--> 을
검색해보자 나오면 바로 빙고입니다.
아니신 분들은 <div class="cmt_form_box"> 을 검색하시고 바로 뒤에 붙이면 됩니다.
사실 아는게 없이 그냥 삽질 끝에 안것이므로 할말은 별로 없습니다 하하;;
4. 사이드바 부분에 광고를 넣고 싶은 경우.
다 비슷한 방식이니깐 이제 저같이 생초보 분들도 패턴을 파악하셨을겁니다 ^^
<!-- #### Side Start #### --> 이런 문구나 <div id="side"> 이런 문구를 검색하시면
그곳이 바로 사이드바 관련 코드 덩어리의 시작부분입니다. 이 뒤로 잘 살펴 보면 사이드바의 메뉴들이
일정한 규칙속에 이름만 바뀐걸 알수 있습니다. 제 코드를 예로 들어보면,
<div class="sidebar_title" >TAGS</div>
<div class="td_info" id="block3" style="display:block;">
<s_random_tags> <a href="" class=""></a> </s_random_tags>
</div>
<div class="td_info" id="block3" style="display:block;">
<s_random_tags> <a href="" class=""></a> </s_random_tags>
</div>
<div class="sidebar_title" >Recent Entries</div>
<div class="td_info" id="block4" style="display:block;">
<s_rctps_rep> <a href="" class="info_link"> </a> <font class="ps_cnt"></font><br>
</s_rctps_rep>
</div>
<s_rctps_rep> <a href="" class="info_link"> </a> <font class="ps_cnt"></font><br>
</s_rctps_rep>
</div>
<div class="sidebar_title" >Recent Comments</div>
<div class="td_info" id="block5" style="display:block;">
<div id="recentComments">
<s_rctrp_rep> <a href="" class="info_link"> </a><br>
<span class="f11 gray3"> - </span><br>
</s_rctrp_rep>
</div>
<<<<<<<삽입할 부분>>>>>>>
</div>
<div class="td_info" id="block5" style="display:block;">
<div id="recentComments">
<s_rctrp_rep> <a href="" class="info_link"> </a><br>
<span class="f11 gray3"> - </span><br>
</s_rctrp_rep>
</div>
<<<<<<<삽입할 부분>>>>>>>
</div>
<div class="sidebar_title" >Recent Trackbacks</div>
<div class="td_info" id="block6" style="display:block;">
<div id="recentTrackbacks">
<s_rcttb_rep> <a href="" class="info_link"> </a><br>
<span class="f11 gray3"></span><br>
</s_rcttb_rep>
</div>
</div>
규칙이 보이시나요? 저 녹색 굵은 글씨가 바로 메뉴들입니다.
만약 Recent Commants 와 Recent Trackbacks 사이에 사이드 바를 넣고 싶으면 삽입할 부분
에 광고 코드를 삽입하면 됩니다. 다른 부분은 같은 패턴으로 ~ 아시겠죠 이제 ^^/
포스트가 길어져서 다음편에 주의 사항과 다른 광고 단위들에 대해 잠깐 언급해 보도록 하겠습니다.
PHP PLAY :: 네이버 카페
이 글은 캡쳐화면이 내 블로그에 자동저장되는 캡쳐업로더로 작성된 문서입니다. 자세히
