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

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

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

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

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

 

 

 

참고) 아래 배너 광고를 중앙정렬 하려고 <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>