티스토리 본문에 자동으로 애드센스 광고 넣는 방법 2. 원하는 위치에 붙이기

티스토리에 애드센스 광고 삽입과 관련된 내용을 검색하면 광고를 넣을 수 있는 방법은 아래와 같이 3가지 내용입니다. 

1. 티스토리 구글 애드센스 "플러그인을 활용해서 삽입"
2. 티스토리 "글쓰기의 메뉴중에 외부컨텐츠를 활용해 HTML에 구글 애드센스 코드 삽입"
3. 티스토리 서식에 애드센스 "광고 서식을 만들어서 서식불러오기로 사용"

하지만 2,3번은 소스코드가 본문에 박혀버려서 나중에 일괄로 수정할때 문제가 생긴다고 말씀을 드렸었는데요. 

그래서 포스팅에서는 티스토리에 삽입된 이미지 뒤에 애드센스를 연결해서 붙이는 방법에 대해서 알아보았었습니다. 

티스토리 본문에 #자동으로 애드센스 광고 넣는 방법1-이미지 뒤에 붙이기

티스토리 본문에 자동으로 애드센스 광고 넣는 방법1. 이미지 뒤에 붙이기

그렇게 제 블로그에 적용을 시켜서 1개월정도 운영을 해보았는데요. 확실히 수동으로 글쓰다말고 코드를 불러와서 넣어줘야하는 부담이 확 줄어들고, 수고도 줄어들고, 포스팅에만 집중할 수 있어서 너무 좋았습니다.

그런데 이미지뒤에 붙는 애드센스의 단점(?)이라면 단점이 보이기 시작했습니다. 이미지도 있는데 광고로 인한 이미지도 붙어서 연속해서 이미지가 보이는 현상이 있었습니다. 

글을 어느정도 보고 너무 글의 양이 많아서 보기가 힘들어질때쯤에 나오면 좋을텐데.. 라고해서 열심히 연구를 하고 스크립트를 서칭하기 시작했는데요

방법은 바로 P TAG를 사용하는 방법입니다. 우리가 글을 쓰게되면 엔터를 칠때마다 <p> ~~ </p> 태그(tag)가 생성이 됩니다. 아래의 이미지 처럼 말이죠

HTML보기로 소스코드를 보면 내가 문장을 하나 쓸때마다 <P>~</P> 태그가 생성된다.

그래서 생각한 방법은 <P> tag의 숫자를 센다음에 중간중간에 tag다음에 넣는 것도 가능하겠다 싶어서 스크립트를 공부하기 시작했습니다. 이미지도 카운트해서 집어넣었으니 가능하겠죠? ㅎㅎ 몰라서 그렇지

어쨌거나 P태그를 카운트 하는 방법은 아래의 소스코드를 활용하시면 됩니다. 

P TAG 카운팅하는 SCRIPT

var anchors = document.getElementById("contents").getElementsByTagName("p"); var pcount = parseInt(anchors.length,10);

저도 무슨 내용인지는 잘 모릅니다. 그냥 구글링으로 찾아보니 저렇게 넣으면 되더라고요 ㅎㅎ

getElementsByTagName("p");   << p tag를 가져와라
getElementById("contents")    << id가 contents인 태그 안에있는 거
var anchors    <<  해당 내용을 anchors에 넣어라
var pcount = anchors.length   <<  anchors의 갯수를 세서 넣어라

해석하면 요정도의 소스코드가 되는 것 같습니다. 저기 id가 content라고 되어져 있는 부분은 대부분의 스킨이 아마 content라는 id 내에 본문글이 보여질껀데요. 만약에 다르게 되어있으신 분이 있다면.. 해당 부분을 찾아서 바꿔주면 됩니다.

본문글은 <article id = "content"> ~~ </article> 내에 표시된다.

282번째 줄에 보이죠? 저 content내에 표시되는 모든 p tag의 숫자를 카운트 하게되는 것입니다. 

자~ 그렇게 카운트가 끝났으면 이제 원하는 위치에 붙여야겠지요? 

본문 중간에 애드센스 넣는 코드 script

var pcount = parseInt(anchors.length/2,10); $("#adsenselink1").css({"display":"block"}); $("p").eq(pcount).after($("#adsenselink1")); (adsbygoogle = window.adsbygoogle || []).push({});

위의 소스코드로 설명을 드리자면

2분의 1지점(중간)에 저는 애드센스를 붙이는 코드 입니다. 일단 1/2인 지점의 p카운드 를 합니다. 위에 2으로 나누기를 수행한 코드가 보이실 꺼에요. 저기가 제가 붙이고자 하는 위치입니다. 정확히 본문 중앙이죠

나머지 부분은 이전 포스팅(티스토리 본문에 #자동으로 애드센스 광고 넣는 방법1-이미지 뒤에 붙이기)에서 본 것과 같이 동일합니다. 다만 위치가 이미지냐 p tag냐의 차이일 뿐이지요

그리고 자바스크립트의 태그 뒤에 붙일때 앞에붙일꺼냐 중간에 붙일꺼냐 등도 개인이 지정할수 있습니다.

저는 보시는 것처럼 after($("#adsencelink1")); 이라고 뒤에 붙이라는 소스코드를 사용했는데요 크게 4가지가 있습니다. 이미지 붙이기에 사용했던 append()와 prepend(), befor(), after() 인데요

append() 사용할 경우,    <p> TEXT  [광고] </p>
prepend() 사용할 경우,   <p> [광고] TEXT </p>
before() 사용할 경우,      [광고] <p> TEXT </p>
after() 사용할 경우,        <p> TEXT </p> [광고]

위와 같은 형태로 들어가게되는 것이지요. 본인이 원하는데로 가져다가 함수를 사용하시면 됩니다. ^^

이상으로 티스토리 블로그 포스팅 내에 자동으로 애드센스 광고를 삽입하는 방법에 대해서 스크립트를 알아보았습니다. 

도움이 되셨다면.. 댓글 혹은 공감 많이많이 부탁드려요~ ^^