하단 고정 플로팅 소스를 찾아 배너를 고정으로 나오게 하는 소스 2가지를 기록형으로 남깁니다. 이전에 필요해서 구글링을 통해 하단 고정 플로팅 소스를 찾았던 것이라 출처를 정확하게 기억은 못하겠습니다. 만약 문제가 된다면 댓글로 남겨 주세요.
하단 고정 플로팅 배너 소스 1
첫번째 하단 고정 플로팅 배너 소스는 새로 고침하면 지정한 배너가 랜덤으로 노출 됩니다.
<header>에 넣어 줄 소스
<!-- [S]sticky AD -->
<style>
div.quick {
position: fixed;
background-color: rgba( 255, 255, 255, 0.5 );/*배경투명처리*/
left: 0;
right: 0;
bottom: 0;
height: 120px;/*sticky 영역 높이, 배너 max-height:110px + 10px*/
}
div.quick .quick_btn {width:100%; margin:0 auto; text-align:left;font-size: 0.8em;color:#FF4040;text-decoration-line: none;}
</style>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script language="javascript" type="text/javascript">
function close_quick(){
$("#quick_menu").animate({"bottom" : -106} , 300);/*close 후 내려가는 높이, 속도*/
$("#quick_menu").find(".quick_btn").eq(0).hide();
$("#quick_menu").find(".quick_btn").eq(1).show();
}
function open_quick(){
$("#quick_menu").animate({"bottom" : 0} , 300);
$("#quick_menu").find(".quick_btn").eq(0).show();
$("#quick_menu").find(".quick_btn").eq(1).hide();
}
</script>
<!-- [E]sticky AD --><body>에 넣을 소스
<!-- 하단 고정 광고영역[S] -->
<script type="text/javascript">
//새로고침시 램덤으로 배너를 노출
window.onload=function() {
var E = document.getElementsByClassName("item");
var m = E.length;
var n = parseInt(Math.random()*m);
for (var i=m-1;i>=0;i--) {
var e = E[i];
e.style.display='none';
}
E[n].style.display='';
}
</script>
<div class="quick" id="quick_menu" style="width:100%; margin:1px auto;text-align:center;">
<div style='font-size:10px;color:#A2A2A2;'><strong>[AD]</strong> URL.KR에서 제공하는 광고 입니다 <a href="javascript:close_quick()" class="quick_btn">OFF</a> <a href="javascript:open_quick()" class="quick_btn" style="display: none;">ON</a> | <a href="https://url.kr" style='color:#2080D0;text-decoration-line: none;'>광고문의 》</a></div>
<div class="item" style=" cursor: pointer;" onclick="window.open('https://weddingfair.co.kr')"><img src="https://url.kr/data/banner/47" border="0" alt="웨딩박람회일정" style='max-height:110px; max-width:100%;'></div>
<div class="item" style=" cursor: pointer;" onclick="window.open('https://weddingfair.co.kr')"><img src="https://url.kr/data/banner/31" border="0" alt="웨딩박람회일정" style='max-height:110px; max-width:100%;'></div>
</div>
<!-- 하단 고정 광고영역[E] -->하단 고정 플로팅 배너 소스 2
두번째 하단 고정 플로팅 배너 소스는 새로고침 안해도 랜덤으로 배너가 롤링되며 노출 됩니다.
<header>에 넣을 소스
<style>
#bottom_ad {
position: fixed;
background-color: #fff;
background-color: rgba( 255, 255, 255, 0.5 );
left: 0;
right: 0;
bottom: 0;
height: 6rem;
}
div.box-title {padding:5px 5px 5px 5px;line-height:1.7;color:#333333;border:0;font-family:sans-serif; width:100%; }
div.box-contents {padding:1px 5px 20px 5px;line-height:1.7;color:#333333;border:0;font-family:sans-serif; width:100%; }
</style><body>에 넣을 소스
<div id="bottom_ad" style="width:95%; max-width:1200px; margin:50px auto;text-align:center;">
<style type="text/css">
#widget-slide-1 {position:relative;margin:0px auto;border:0px;}
#widget-slide-1 ul{position:relative;width:100%; height:100%;padding:0px;margin:0px;list-style:none;}
#widget-slide-1 ul li{position:absolute;width:100%; height:100%; display:none; }
#widget-slide-1 ul li.on{display:block;}
</style>
<div style='font-size:10px;color:#A2A2A2;'>[AD] URL.KR에서 제공하는 광고 입니다 | <a href="https://url.kr" style='color:#2080D0;text-decoration-line: none;'>광고문의 》</a></div>
<div id="widget-slide-1">
<ul>
<li class="on"><a href="https://giftjoa.biz/new/events/events.php?eid=EV0527" title='예쁜기념품' target='_blank'><img src='https://url.kr/img/giftshop/rolling_bn01.jpg' alt='예쁜기념품' class="img-fluid"></a></li>
<li><a href="https://giftjoa.biz/new/events/events.php?eid=EV0562" title='알로코리아 판촉물' target='_blank'><img src='https://url.kr/img/giftshop/rolling_bn02.jpg' alt='알로코리아 판촉물' class="img-fluid"></a></li>
<li><a href="https://giftjoa.biz/new/search/name.php?name=%B6%F3%B9%CC" title='라미 고급볼펜 판촉물' target='_blank'><img src='https://url.kr/img/giftshop/rolling_bn03.jpg' alt='라미 고급볼펜 판촉물' class="img-fluid"></a></li>
<li><a href="https://giftjoa.biz/new/events/events.php?eid=EV0540" title='머그판촉물' target='_blank'><img src='https://url.kr/img/giftshop/rolling_bn04.jpg' alt='머그판촉물' class="img-fluid"></a></li>
<li><a href="https://giftjoa.biz/new/events/events.php?eid=EV0533" title='손거울, 탁상거울 판촉물' target='_blank'><img src='https://url.kr/img/giftshop/rolling_bn05.jpg' alt='손거울, 탁상거울 판촉물' class="img-fluid"></a></li>
<li><a href="https://giftjoa.biz/new/events/events.php?eid=EV0344" title='송월타월, 수건판촉물' target='_blank'><img src='https://url.kr/img/giftshop/rolling_bn06.jpg' alt='송월타월, 수건판촉물' class="img-fluid"></a></li>
</ul>
</div>
<script type="text/javascript">
<!--
function setSlide(){// 동작 함수 생성
var box = document.getElementById("widget-slide-1");
var elm = box.getElementsByTagName( 'li' );
var max = elm.length-1;
var now = 0;
var next = 0;
var tmr = null;
var timr = 4000;
function change(){if(next > max) next = 0; else if(next < 0) next = max; for(var i=0; i <= max; i++ )elm[i].className = "";elm[next].className = "on";now = next;}
function befor(){next--; change();}
function after(){next++; change();}
function stop(){ clearInterval(tmr);}
function start(){tmr = setInterval(function(){after();}, timr); }
if(max>0){start();}
}
setSlide();// 실행
//-->
</script>마무리
개인적으로 하단 고정 플로팅 배너 소스는 1번째 소스를 즐겨 사용 합니다. 실제 사이트에 적용했을 때 어떤 모습으로 될지는 실제 적용하면서 조금씩 조정하면 누구나 적용 할 수 있을 것이라 생각 합니다. 구글 자동광고 하단처럼 구현하려고 소스를 찾아 봤는데 마땅하게 없어서 나름 비슷하다고 생각한 소스 입니다. 구글처럼 구현 가능한 분은 소스 공유 부탁 드립니다. 블로그나 간단한 웹페이지 제작 필요한 코딩소는 생활코딩 카테고리에 정리하고 있습니다. 개발자가 아니기 때문에 대부분의 소스는 구글링 또는 챗GPT가 만들어준 것입니다. 즉, 질문에 답을 해 드릴 실력이 안되기 때문에 저처럼 스스로 해결해 보기실 권장 드립니다.
