menu

어떤 원리냐면, 게시물 높이 계산한 다음에 반복문 돌려서 게시물 가운데랑 가장 근접한 요소를 찾는 거임. 그 다음 거기에 광고 끼워넣음.

몇 가지 예외가 있는데, 일단 짧은 글에는 중간에 광고 안 나옴. 왜냐? 내용보다 광고가 자리를 더 많이 차지하면 모양새 빠지니까. 그리고 다른 예외로 글 중 table 태그가 있을 경우 표 중간에 광고 나오게 함. 이유는 요즘 싸질러놓은 게시물 중에 표 들어간게 많아서.

그리고 원래는 스킨에 애드센스 코드 넣어둔 다음에 jQuery의 after나 prepend 같은 메소드로 자리만 샤샤샥 옮기려고 했었는데, 그리하면 광고가 빈칸으로 출력... 아마 html 복제 후 원본을 삭제하는 메커니즘인 것 같은데, 그 순간에 페이지 허용 광고 개수 초과해서 빈칸이 나오는 게 아닐까? 어쩔 수 없이 스크립트 내에 애드센스 코드를 삽입해서 한번만 불러오도록 했다.

완성된 코드의 늠름한 자태를 아래에서 감상하시라!

function ad_article_middle() { //on test! var AD_CODE = '<div class="ad_article_middle">'+ 'ADSENS CODE HERE!'+ '</div>'; if ($('.article').height() >= 2000 && $('.article').children().length >= 20) { for (i = 1; i <= $('.article').children().length; i++) { if ($('.article > *:nth-child(' + i + ')').offset().top - $('.article').offset().top > $('.article').height() / 2) { if ($('.article > *')[i - 2].tagName !== "TABLE") { $('.article > *:nth-child(' + i + ')').after(AD_CODE); // console.log("normal, i=" + i + ", " + $('.article > *')[i - 1].tagName); } else { for (j = 1; j <= $('.article > *:nth-child(' + (i - 1) + ') tr').length; j++) { if ($('.article > *:nth-child(' + (i - 1) + ') tr:nth-child(' + j + ')').offset().top - $('.article').offset().top > $('.article').height() / 2) { $('.article > *:nth-child(' + (i - 1) + ') tr:nth-child(' + j + ')') .after('<tr><td colspan="' + $('.article > *:nth-child(' + (i - 1) + ') tr:nth-child(' + j + ') > td').length + '">' + AD_CODE + '</td></tr>'); break; } } // console.log("table!, i=" + i + ", " + $('.article > *:nth-child(' + (i - 1) + ') tr').length); } break; } } } else { // console.log("no middle ad"); } }

흠 좀 멋지긴 한데, 이딴 쓸데없는 기능을 자꾸 추가해서 점점 로딩이 길어지는 것 같기도...

끝.

퍼가지 말고, 링크로 공유하세요. 자세한 건 공지에.

  1. 블로그에 적용해보려 하는데 잘 안되네요

    따로 js 파일로 저장해서 티스토리에 업로드 후 블로그 head 부분에서 불러와보면 아무런 반응이 없고

    /body 위에 script로 묶어서 넣었더니 코드가 그대로 다 붙어서 블로그 하단에 표시만 되네요

    • 왜냐하면 블로그 게시물 로딩이 끝나기 전에 코드가 실행되어 버리기 때문입니다.

      <body> 태그에 onload 이벤트로 해결하거나,

      $(function() { /*여기에 코드 집어넣어서 해결하시면 될 듯*/ });

      link delete 2015.08.16 22:57 신고 Favicon of http://blog.jinh.kr JinH
  2. 말씀하신대로 <body onload="ad_article_middle()"> 이벤트를 사용해봤는데도 적용이 안되네요
    뭐가 문제일까요?

    추가로 말씀하신 $(function()은 js파일안에 function을 변경하면 되는건가요? 이쪽으로 전공이 아니라서 잘 모르겠네요 ㅠㅠ

    • $(function() { ad_article_middle(); }); ← 이런 식으로 js파일 안에서 쓰면 되구요, onload="" 랑 같은 기능이에요.
      그리고, <body onload="ad_article_middle();"> ← 이렇게 하면 돼야하는데... 뭐가 문제인지 저도 잘 모르겠네요...

      link delete 2015.08.17 00:55 신고 Favicon of http://blog.jinh.kr JinH
  3. 본문 덮는 div class 만들고 스크립트 좀 수정해봐도 안되네요 ㅠㅠ
    그래도 신경써주셔서 감사합니다~

퍼가지 마세요...
링크로 공유하세요 ㅠㅠ
부탁할게요 ^_<~*

test 3-1

test 3-2

test 3-3

test 4-1

test 4-2

test 4-3

모든 글 보기
공지
방명록
Share to...

페이스북 공유

트위터 공유

구글+ 공유

카카오스토리 공유

밴드 공유

Follow & Contact

Facebook

Twitter

Mail

RSS 구독

2007-2016 © JinH