어떤 원리냐면, 게시물 높이 계산한 다음에 반복문 돌려서 게시물 가운데랑 가장 근접한 요소를 찾는 거임. 그 다음 거기에 광고 끼워넣음.
몇 가지 예외가 있는데, 일단 짧은 글에는 중간에 광고 안 나옴. 왜냐? 내용보다 광고가 자리를 더 많이 차지하면 모양새 빠지니까. 그리고 다른 예외로 글 중 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");
}
} 흠 좀 멋지긴 한데, 이딴 쓸데없는 기능을 자꾸 추가해서 점점 로딩이 길어지는 것 같기도...
끝.
'기록 #01: 컴퓨터' 카테고리의 다른 글
| 네모네모 멈뭄미믜 저주가 걸린 글 (262) | 2016.06.19 |
|---|---|
| 티스토리 이미지 삽입 세로 길이 맞추기 꿀팁 (6) | 2016.06.18 |
| 커스텀 컨텍스트 메뉴 (0) | 2016.06.16 |
| 안드로이드 토스트 위치 제어 (0) | 2016.04.19 |
| 안드로이드 이미지뷰에 이미지 src 바꾸기 (1) | 2016.04.11 |
| 페이지 내부 링크로 이동할 때 스크롤을 부드럽게 (5) | 2015.08.04 |
| 댓글달기 버튼에 동적 효과 추가 (9) | 2015.04.12 |
| jQuery 툴팁 (3) | 2015.04.08 |
| css 플립 카드 (1) | 2014.10.08 |
| 하드디스크 포맷기 (1) | 2013.05.25 |