티스토리 반응형 Square 스킨 애드핏 상단 하단 배너 방법 - Daum AdFit (PC)

티스토리 반응형 Square 스킨에서 애드핏 상단 하단 배너 방법입니다.

반응형 Square 스킨은 Daum AdFit (모바일)에 애드핏 스크립트를 넣고 저장을 하여도 반영이 되지 않습니다.

반응형 Square 스킨은 Daum AdFit (PC)만 사용 가능합니다.

Daum AdFit (PC)의 768 사이즈의 배너가 PC와 모바일에서 같이 사용이 됩니다.

그러다 보니, 모바일에서는 우측이 짤려서 나오게 되는 현상이 발생을 합니다.

애드핏에서 제공해 주는 스크립트를 가공하여 윈도우 사이즈에 따라서 320(모바일용), 728(PC)가 나오도록 자바스크립트로 노출되게 하는 방법입니다.

자바스크립트 가공 소스 삽입하는 곳

 

배너를 출력해 보면 좌측 정렬이 되는 현상을 확인할 수 있습니다. 그래서 <div align="center"> ... </div>를 넣어서 가운데 정렬이 되게 하였습니다.

<div align="center">
<script>
	if ( window.matchMedia( '( min-width: 1024px )' ).matches == true ) {
		document.write( '<ins class="kakao_ad_area" style="display:none;" data-ad-unit = " 본인PC용광고코드 " data-ad-width = "728" data-ad-height = "90"></ins><script type="text/javascript" src="//t1.daumcdn.net/adfit/static/ad.min.js" async><\/script>' );
	}
	if ( window.matchMedia( '( max-width: 768px )' ).matches == true ) {
		document.write( '<ins class="kakao_ad_area" style="display:none;" data-ad-unit = "본인 모바일용광고코드" data-ad-width = "320" data-ad-height = "100"></ins><script type="text/javascript" src="//t1.daumcdn.net/adfit/static/ad.min.js" async><\/script>' );
	}
</script>
</div>

 

위의 소스코드를 다운 받을 수 있게 아래 첨부하였습니다.

반응형 Square 스킨용 애드핏상단.zip

0.00MB

 

2020/10/20 - [유용한 활용팁] - 티스토리 반응형 Square 스킨 Recent posts 에러 해결 방법

티스토리 반응형 Square 스킨 Recent posts 에러 해결 방법

2020/02/03 - [유용한 활용팁] - 티스토리 반응형 Square 스킨 사이드바에 애드핏, 애드센스 넣기

티스토리 반응형 Square 스킨 사이드바에 애드핏, 애드센스 넣기