본문 바로가기

북클럽 스킨 - 사이드바에 플로팅 배너(고정배너)로 만들기

2022. 1. 9. 댓글 개
반응형

북클럽 스킨으로 변경 후 사이드바에 플로팅배너를 추가하는 방법을 기록형으로 남깁니다.

사이드바에 애드센스 광고 코드를 추가 하는것도 동일 합니다.

구글애드센스 배너광고 사이드바에 플로팅 배너(고정배너)로 만들기

 

구글애드센스 배너광고 사이드바에 플로팅 배너(고정배너)로 만들기

구글애드센스 배너광고 사이드바에 플로팅 배너(고정배너)로 만드는 방법에 대해 포스팅 하려 합니다. 그 이유는 구글에서 플로팅 배너를 허용 했습니다. 기존 고정된 배너는 포스팅 컨텐츠가

late40s.tistory.com

 

 

 

참고) 아래 배너 광고를 중앙정렬 하려고 <center></center>로 감쐈더니 작동을 안하더라구요.

이유는 모르겠지만..그래서 빼고 사용 중입니다.

<div id="sticky_banner" style="position:block;">
<a href="https://giftjoa.biz/?ref=buza" target='_blank' rel='noopener noreferrer'><img src='https://giftzone.co.kr/banner/giftjoa_300x250.jpg'></a>
</div>
 
<script>
function sticky_custom(id)
{
var tid = $(id)
var tid_t = tid.offset().top
var window_t = $(window).scrollTop()
// console.log(tid_t, window_t)
 
if( origin_val.top <= window_t )
{
tid.css('position', 'fixed').css('top',10).css('width','100%')
//10 이란 숫자를 변경하면 배너위치가 변합니다. 조정해 보세요. 
}
else
{
tid.css('position', origin_val.position).css('top',origin_val.top)
}
}
 
var sticky_id = '#sticky_banner'
var sticky_id_d = $(sticky_id)
var origin_val = {}
origin_val.top = $(sticky_id).offset().top
origin_val.position = $(sticky_id).css('position')
 
$(window).scroll(function(){
sticky_custom(sticky_id)
})
</script>
반응형
쿠팡 파트너스 활동의 일환으로 일정액의 수수료를 제공받을 수 있으나 추가 금액 없이 구매 가능합니다

◀ 댓글 ▶