에드센스 광고 본문 중간에 입맛대로 배치 하기 치환자응용

치환자란 무엇 일까?

오늘은 지난 시간에 언급한 대로 구조화 되어 있는 치환자의 속성들에 대해 알아보고
치환자로 결합화 되어 있는 본문에 에드센스 광고를 어느 위치에든지 원하는 곳에 배치 할수 있는 방법에 대해 알아 보는 시간을 갖도록 합니다.

그러기 위해서는 치환자를 먼저 좀 알아야 될것 같네요

치환자는 티스토리의 주인인 티스토리 대장님이 정해 놓은 구조화된 규칙 이라 우리가 마음대로 손댈수가 없는 부분인것이죠

그러나 치환자 소스보기가 가능한  분들이라면 어느정도 자기 취향에 맞도록 일부 조정이 가능 한것으로 압니다.

저같이 겔노트3같은 모바일탭으로는 소스 보기를 할수 없으니 치환자의 결합된 구조를  결합해제를 통해 그룹핑의 구조 정도를 알아 보는 것으로 만족 해야 될것 같네요

자 그럼 먼저 치환자를 모아둔 곳으로 이동을 합니다.

아래 캡쳐를 보시고 따라 가면 되겠습니다.

자신의 블로그 관리자 메뉴에서  꾸미기>스킨으로 들어갑니다.

그런다음  스킨제작 가이드로 갑니다.

다음에 보이시죠 치환자 여기를 클릭 하면 되겠죠

들어가 보면 여러가지 치환자의 형태와 사용예들을 정리해서 보여주고 있답니다.

본문 중간에 에드센스 광고 배치 하기

이번엔 지난 시간에 언급 했든 본문중간에 에드센스를 삽입 하는 방법에 대해 알아 봅니다. 

먼저 본문의 치환자 구조를 알아 봅니다.

아래 캡쳐된 내용을 보시면 ⌊##_article_rep_desc_## ⌋요렇게  만들어 놓은게 보이시죠 요게 본문글을 뭉쳐놓은 치환자입니다. 

하나의 몸통이 되버린 일종의 결합체죠

본문의 치환자는 ⌊##_article_rep_desc_## ⌋요런 형태로 그렇게 많은 콘텐츠들을 조그마한 덩어리 하나 안에다 톨톨 말아 놨죠^^

사실 이렇게 집약 축소 해서 스킨에디터 안에 저장 해두게 한것을 우리는 감사 해야 되는 것입니다.

왜냐 하면 우리가 진땀 흘려가며 공들여서 작성한 소중한 자료들을 어떠한 외부의 공격에도 쉽게 날라가지  않게 보호 해주고

오직 사용자 본인의 의사에 의해서만 정식 코스를 밟아 삭제 수정이 가능 하도록 해주는 것이 바로 본문 치환자 덕분 이니까요

사용자가 실수로 에디트전체의 내용을 다른 블로그 스킨의 코드로 복사 붙혀넣기로 바꾸어 버리는 일이 있어  허걱 가슴이 내려 않게  되는 그런 경험 혹 해 보셨는지 모르 겠네요

그런데 정말 이거 클났다 생각 하며 조마조마한 심정으로 브라우져를 열어보면 본문 만큼은 그자리에 그대로 남아 있어 얼마나  가슴을 쓸어 내렸는지 솔직히 제가 경험 했든 일입니다.

이처럼 사용자라고 해도 정식코스를 통하지 않은 경우엔 절대 안전하게 보관 해주는 기능의 치환자가 몇가지가 있는데  본문과 블로그 타이틀과 사용자의 블로그네임 이죠 그외의 것은 제가 알기로는 없는것 같습니다.

다른 소스로 뒤집어 씌워버리면 다 변하는데 꼼짝 하지않고 버텨 주는 정말 고마운 서비스가 바로 치환자 입니다.

물론 사소하게 위치나 색상 뭐 요런 부분들은 뒤집어 쓸수밖에 없지만요
스킨에디터에는 본문의 콘텐츠를 출력하는 공간을 정해두고 있는데요

<s_article_rep> </s_article_rep>요 테그가 본문이 들어가 사는 안방이라고 보시면 되겠네요 그리고 본문의 옷에 해당하는
<div>와 </div>가 감싸고 있죠 그런데 이렇게 완벽하게 감싸고 보호를 했음에도 우리의 프로 프로그래머들이 드디어 에드센스 광고 를 본문안에다 집어 넣는데 성공 했네여

물론 그동안 한정적으로 본문의 외곽 까지는 이곳 저곳에 집어넣기는 했었는데요 엄밀히 따져보면 본문 속은 아니고 본문의 외곽 이였죠

그러나 이번의 경우는 완벽 하게 에드센스의 수락 규정치인 3개 까지도 본문 안에 다 집어 넣을수가 있게 되었는데요

이렇게 구현해 주신 블로그님께 감사를  드리는 바입니다.

치환자에 대한 글을 쓰고 자 한거니까 한가지 더 예를 들고 본문으로 넘어 가도록 하죠

제 블로그를 보시면 상단의 네비게이션바 안에 아래 캡쳐 그림 처럼 카테고리 메뉴들이 들어 있는데요

카테고리의 치환자는 및줄친 부분 의 모양을 가지고 있죠.

요놈을 그룹 해제를 해서 그룹으로 스타일을 씌워서 풀어 놓은것이 위의 캡쳐그림이고
좀더 그룹해제 해서 풀어놓으면 아래 그림처럼 밋밋한 모양이 된답니다.

만약 더 해제 하게 되면 결합이 해제 되어 우리 눈에는 각종 소스들의 집합체가 보이게 되겠지요.

네비게이션이라는 집밖을 벗어나면  이렇게 풀어 져서 갯수도 배로 늘어나고 볼품도 없어 져 버리게 되네요

뭐 이런 모양이 더 맘에 든다면 더이상 할말은없구여....네비게이션도 일종의 치환자 노릇을 한 셈이  된것 같네요 ....

컴퓨터 였으면 좀더 확실하게 풀어 헤쳐 볼수도 있을 텐데요 겔노트로는 더이상 어떻게 해볼수가 없네요...그럼이제 본론 으로들어가서 구조적으로⌊##_article_rep_desc_## ⌋요렇게 뭉쳐있는 본문 치환자 속에다 입맛대로 상하 좌우 위치를 배치 시키는 방법에 대해알아 보도록 합니다.

그럼 이렇게 완벽하게 결합되어 있는 벽을 깨고 마음대로 구조 속에 광고를 배치 할수 있는것은 바로 요놈 때문에 그것이 가능 한 것이죠

<script>
document.getElementById('1,2,3').appendChild(document.getElementById('x, y, z'));
</script>

바로 이 자바스크립트가  그것을 가능하게 하는 요술봉 입니다.
자 이 자바 스크립트와 자신의 광고 코드를 테그로 감싸 넣으면 되겠지요
그리고<div>테그에는 이렇게 id를 사용 합니다.

<div id="#">이런식 이죠 그리고 스크립트에 지정된 숫자를 #대신에 넣어주면 되겠지요  그리고 style로 위치를 조정 해 주면 되는 것입니다.

왼쪽에  배치 할경우<div id="1" style="text-align:left;">

중간에 배치 하고 싶은 경우 <div id="1" style="text-align:center;">

오른쪽에 배치하고 싶다 그러면<div id="1" style="text-align:right;"> 이렇게 입맛대로 스타일로 위치를 잡으면 되겠죠

 

<p>  </p><div id="3" style="text-align:center"></div><p>  </p>지금 이 페이지의 현 위치에 배치 한 모습위의 위치에 배치 하였지만 예문을 겹쳐 작성 하면서 실제 구현 되지는 않구요 skin에디터에 삽입된 위치인 본문 하단에 구현 되었습니다

이제 이렇게 조합이 되었으면 아래 캡쳐 그림 처럼 ⌊##_article_rep_desc_## ⌋본문 글 아래 부분도 괞찮고요 상단에도 넣어 줘도 상관 없겠죠

<div id="1" style="text-align:left;"> 자신의 에드센스 광고 코드 <script>
document.getElementById('1').appendChild(document.getElementById('x'));
</script>		
</div>

<div id="2" style="text-align:left;"> 자신의 에드센스 광고 코드 
<script>
document.getElementById('2').appendChild(document.getElementById('y'));
</script>		
</div>

<div id="3" style="text-align:left;"> 자신의 에드센스 광고 코드 
<script>
document.getElementById('3').appendChild(document.getElementById('z'));
</script>		
</div>

이렇게 작성이 되었으면 skint html에디터에서 위의 본문 치환자 위나 아래에 넣고 싶은 곳에 넣어 주면 되겠죠. 

이렇게 스킨에디터에 넣었다면 이제 글 쓰기에디터에서  에디터를 html형식으로 체크한후 아래 예제 처럼 본문을 작성 하다가
에드센스를 넣고 싶은 부분이 있다면 1번2번3번중에 필요한 번호를 골라서
<div id="#" style="text-align:center;"></div>
# 대신 숫자를 넣어 주면 되겠죠.

실제 로 구현된 본문의 모습 보러가기
완전 쉽죠 이렇게 오늘은 코딩 배우기  치환자와 자바 스크립트를 응용 에드센스 본문에 입맛대로 배치 하기를 공부해 봤습니다.