[정보] HTML 플로팅 배너 띄우기 / 고정형 광고 만들기
This post was written on December 8, 2020

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

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

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

<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!


HS LOG List of ETC

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

No Comments

Thank you for visiting. If you leave a comment, I will not forget.

HS LOG List of ETC

 
The number of visitors for this post is 5,833 (measured by Jetpack).