[정보] HTML 플로팅 배너 띄우기 / 고정형 광고 만들기
2020년 12월 08일에 작성된 포스트입니다.

애드센스와 애드핏에서 플로팅 배너 광고를 허용하고 있다. 이번 내용은 플로팅 배너를 간단하게 장착하는 방법과 필요한 각종 링크들이다.

■ 따라다니는 효과가 필요없다면!

아래 내용을 그대로 삽입하면 된다.

<style>
#banner {
position: fixed;  /*고정*/
width: 162px;  /*가로길이*/
height: 835px;  /*세로길이*/
right: 2px;      /*위치 지정 : 오른쪽에서 몇 px에 위치, 왼쪽 배너이면 left : 2px; */
top: 48px;     /* 위치 지정 : 상단에서 몇 px에 위치, 하단부터라면 bottom:48px; */
text-align:center;  /*중앙정렬*/
}
</style>
<div id=”banner”> 여기에 내용 삽입(혹은 광고 삽입)</div>

★ 본문을 침범하면 안된다면…
(아래 링크를 참고해도 CSS는 본 내용을 적절히 참고해야 한다.)

<style>
#banner {
position: fixed;
right:50%; // 기본은 중앙에 위치하고.
margin-right:-615px; // 중앙으로부터의 거리를 주는 방식으로 보인다.
width: 162px;
height: 835px;
top: 68px;
}
</style>
<div id=”banner”> 여기에 내용 삽입(혹은 광고 삽입)</div>

★ 본문을 가리지 않는 고정형 플로팅 배너 소스 : [마쑤의 작은방에서 보기]

■ 따라다니는 효과가 필요하다면!

아래 링크를 참고하면 된다. jQuery를 사용한, 아주 좋은 예이다.

★ 플로팅 배너, 자동으로 따라다니는 jQuery 소스 : [천재 작곡가의 작업실에서 보기]

■ 자바스크립트를 통해 모바일 여부를 확인하려면!

아래 링크를 참고하면 된다.

★ 접속 환경(PC or Mobile)을 구분해주는 자바스크립트 함수 : [바로 보기]

■ PHP를 통해 모바일 여부를 확인하려면!

★ 접속 환경(PC or Mobile)을 구분해주는 PHP 함수 : [바로 보기]

1일 1포스팅을 달성하기 위해 간략히 작성해보았다. Good!


현식로그 홈 기타(ETC) 목록

Copyright © HS LOG
Published on 12월 8, 2020 Filed under: ETC; Tagged as: , , , ,

No Comments

방문해 주셔서 감사합니다. 답글을 남겨주시면 잊지 못할 것입니다.

현식로그 홈 기타(ETC) 목록

 
이 글의 방문자수는 6,163 입니다. (젯팩이 측정)