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

구글애드센스 배너광고 사이드바에 플로팅 배너(고정배너)로 만드는 방법에 대해 포스팅 하려 합니다.

그 이유는 구글에서 플로팅 배너를 허용 했습니다.

 

기존 고정된 배너는 포스팅 컨텐츠가 길어 스크롤바를 내리면 더 이상 보이지 않는 단점이 있습니다.

요즘 부쩍 블로그들 사이드바에 스크롤바를 내려 오다가 어느순간 배너가 고정되어 있는 장면을 보게 됩니다.

아래 간단한 자바스크립트 소스를 티스토리 사이드바에 넣어 주면 구글애드센스 배너 광고를 사이드바에 플로팅배너로 넣을 수 있습니다. 아래 소스 원 제작자 주소는 잊어버려서 출처를 남길 수 없습니다. 혹시 원제작가 보신다면 알려주시면 제가 출처를 밝혀 두겠습니다. 죄송합니다.

사이드바에 고정 플로팅배너 만들기

 

 

플로팅배너 소스

구글애드센스 배너광고 사이드바에 플로팅 배너(고정배너) 자바스크립트 소스는 아래와 같습니다.

현재 http://buza.co.kr 블로그 우측 사이드바에 실제 적용 중입니다.

<div id="sticky_banner" style="position:block;">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- buza_side_DP_210125 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-*****"
     data-ad-slot="*******"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
 
<script>
function sticky_custom(id)
{
var tid = $(id)
var tid_t = tid.offset().top
var window_t = $(window).scrollTop()
 
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>

위와 같이 소스 입니다.

 

티스토리 사이드바에 적용 방법

백문이 불여일견이라고 영상을 준비 해 봤습니다.

 

1. 티스토리 관리자로 로그인

2. 좌측 메뉴 중 사이드바 메뉴 클릭

3. 기본모듈의 [플러그인]태그 입력기 추가

* 추가시 사이드바 어디에 추가 하는지는 선택해야 합니다.

* 일반적으로는 방문자 통계 아래에 위치시킵니다. 추후 저도 그렇게 변경 했습니다.

4. 사이드바 3에 추가된 플러그인 편집 클릭

5. 플러그인 타이틀(이름)을 정하고 치환자에 위 스클립트 소스를 입력 하면 됩니다.

* 위 소스 입력시 구글애드센스 코드는 수정 해야 합니다.

6. 우측 하단에 반드시 저장하기를 눌러 줘야 반영 됩니다.

 

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

티스토리 사이드바에 적용된 배너 모습

 

마무리

구글애드센스 배너광고 사이드바에 플로팅 배너(고정배너)가 수익에 직접적인 영향을 주는 지는 잘 모르겠습니다. 하지만 노출시간이 길어 조금이라도 긍정적인 효과가 있지 않을까란 기대감에서 저도 적용해 봤습니다.

다른 많은 방법이 있겠지만 제가 위에 소개한 자바스크립트 코드가 간단한것 같습니다.

 

비 개발자이기 때문에 전문적인 질문은 답변을 드릴 수 없습니다.