반응형
고정된 배너 보다는 따라 다니는 배너 효과가 더 좋다는 사실은 사이트를 관리 하시는 분들이라면 다 아실 것입니다. 그래서 많이들 사이드에 따라 다니는 배너를 달아 두는 경우가 많습니다.
하지만 여러가지 여건상 블로그나 사이트 관리 차원에서 처음부터 따라 다니는게 아니라 관리자가 지정한 위치 부터 배너가 따라 다니게 하고 싶을때가 있습니다.
저도 지금 사이드 메뉴 쪽에 배너를 하나 스크롤시 따라 다니게 해 놨는데 제 블로그 폭을 감암할때 여백 사이드에 배너 하나를 따라 다니게 할려니 좀 애매한 감이 없잖아 있어 어짜피 오른쪽 사이드 메뉴 아래쪽에는 빈공간이라 빈공간이 시작되는 곳부터 배너를 따라 다니게 하는게 공간적으로 봤을때 좋을거 같아 코드를 한번 만들어 봤습니다.
물론 처음부터 제가 만든건 아닙니다. 제가 HTML, Script, CSS 부분에 좀 약한면이 있어서 여기 저기 사이트 돌아 다니면서 코드를 참조해서 몇일간 여러번의 테스트를 거쳐서 저에게 맞게 코드를 만들었습니다.
1. 먼저 아래의 Script 코드를 </head> 윗부분에 넣어 주시기 바랍니다.
이 Script 에서 변수값으로 설정되어 있는 수치를 사용자 사이트에 맞게끔 수정 해야 하는데 일단 코드를 다 작성하고 수정된 사이트를 보면서 작업해야 하기 때문에 일단은 그냥 넘어 가도록 하겠습니다.
2. 위 Script 코드를 집어 넣었으면 body 안에 방금 만든 Script 함수명을 집어 넣도록 하겠습니다.
3. 이제는 실질적으로 광고 코드를 집어 넣도록 하겠습니다. 광고 코드는 티스토리의 경우 body 아래쪽에 보시면 div id="container" 라는 코드가 보이실 것입니다. 그 아래의 광고코드를 넣어 주시기 바랍니다.
티스토리의 경우 왜 div id="container" 라는 코드 아래에 넣어야 하면, 그 위치에 넣어야지 브라우저 사이즈가 조정될때 광고가 이리저리 움직이지 않고 같은 자리에 위치 하기 때문입니다. 티스토리가 아닌 경우 광고 코드를 본문이 시작되는 곳에 넣어 주시면 될것입니다.
4. 마지막으로 CSS 코드 부분에 아래 코드를 제일 마지막 부분에 넣어 주시기 바랍니다.
이렇게 하면 기본적인 코드는 삽입이 다 된 상태 입니다. 이제 사이트를 확인해 가면서 위치를 조정해 주시면 되는데 1번에서 BASE, LEFT, TOP1 코드의 수치를 적정히 사용자가 원하는 수치로 조절해 주시면 끝이 납니다.
이제 확인을 해보시면 사용자가 지정한 위치 부터 스크롤시 사이드 배너가 따라 다닐 것입니다.
PS. 혹시나 해서 사이드 배너를 넣었는데 제 블로그는 역시나 클릭율이 너무 저조 하네요. ㅜ.ㅜ
조만간에 전 내려야 할거 같습니다.
하지만 여러가지 여건상 블로그나 사이트 관리 차원에서 처음부터 따라 다니는게 아니라 관리자가 지정한 위치 부터 배너가 따라 다니게 하고 싶을때가 있습니다.
저도 지금 사이드 메뉴 쪽에 배너를 하나 스크롤시 따라 다니게 해 놨는데 제 블로그 폭을 감암할때 여백 사이드에 배너 하나를 따라 다니게 할려니 좀 애매한 감이 없잖아 있어 어짜피 오른쪽 사이드 메뉴 아래쪽에는 빈공간이라 빈공간이 시작되는 곳부터 배너를 따라 다니게 하는게 공간적으로 봤을때 좋을거 같아 코드를 한번 만들어 봤습니다.
물론 처음부터 제가 만든건 아닙니다. 제가 HTML, Script, CSS 부분에 좀 약한면이 있어서 여기 저기 사이트 돌아 다니면서 코드를 참조해서 몇일간 여러번의 테스트를 거쳐서 저에게 맞게 코드를 만들었습니다.
1. 먼저 아래의 Script 코드를 </head> 윗부분에 넣어 주시기 바랍니다.
<script type="text/javascript">
var BASE = 1715; // 스크롤 시작 위치
var LEFT = 708; // 왼쪽 여백
var TOP1 = 1715; // 위쪽 여백
var TOP2 = 100; // 스크롤시 브라우저 위쪽과 떨어지는 거리
var ActiveSpeed = 35;
var ScrollSpeed = 20;
var Timer;
function RefreshM()
{
var StartPoint, EndPoint;
StartPoint = parseInt(document.getElementById('SCROLL').style.top, 10);
EndPoint = Math.max(document.documentElement.scrollTop, document.body.scrollTop) + TOP2;
if (EndPoint < TOP1) EndPoint = TOP1;
if (StartPoint != EndPoint)
{
ScrollAmount = Math.ceil( Math.abs( EndPoint - StartPoint ) / 15 ); document.getElementById('SCROLL').style.top = parseInt(document.getElementById('SCROLL').style.top, 10) +
( ( EndPoint<StartPoint ) ? -ScrollAmount : ScrollAmount ) + "px";
RefreshTimer = ScrollSpeed;
}
Timer = setTimeout("RefreshM();", ActiveSpeed);
}
function InitializeM()
{
document.getElementById('SCROLL').style.left = LEFT + "px";
document.getElementById('SCROLL').style.top =
document.body.scrollTop + BASE + "px";
RefreshM();
}
</script>
var BASE = 1715; // 스크롤 시작 위치
var LEFT = 708; // 왼쪽 여백
var TOP1 = 1715; // 위쪽 여백
var TOP2 = 100; // 스크롤시 브라우저 위쪽과 떨어지는 거리
var ActiveSpeed = 35;
var ScrollSpeed = 20;
var Timer;
function RefreshM()
{
var StartPoint, EndPoint;
StartPoint = parseInt(document.getElementById('SCROLL').style.top, 10);
EndPoint = Math.max(document.documentElement.scrollTop, document.body.scrollTop) + TOP2;
if (EndPoint < TOP1) EndPoint = TOP1;
if (StartPoint != EndPoint)
{
ScrollAmount = Math.ceil( Math.abs( EndPoint - StartPoint ) / 15 ); document.getElementById('SCROLL').style.top = parseInt(document.getElementById('SCROLL').style.top, 10) +
( ( EndPoint<StartPoint ) ? -ScrollAmount : ScrollAmount ) + "px";
RefreshTimer = ScrollSpeed;
}
Timer = setTimeout("RefreshM();", ActiveSpeed);
}
function InitializeM()
{
document.getElementById('SCROLL').style.left = LEFT + "px";
document.getElementById('SCROLL').style.top =
document.body.scrollTop + BASE + "px";
RefreshM();
}
</script>
이 Script 에서 변수값으로 설정되어 있는 수치를 사용자 사이트에 맞게끔 수정 해야 하는데 일단 코드를 다 작성하고 수정된 사이트를 보면서 작업해야 하기 때문에 일단은 그냥 넘어 가도록 하겠습니다.
2. 위 Script 코드를 집어 넣었으면 body 안에 방금 만든 Script 함수명을 집어 넣도록 하겠습니다.
<body onload="InitializeM();">
3. 이제는 실질적으로 광고 코드를 집어 넣도록 하겠습니다. 광고 코드는 티스토리의 경우 body 아래쪽에 보시면 div id="container" 라는 코드가 보이실 것입니다. 그 아래의 광고코드를 넣어 주시기 바랍니다.
<div style="position:relative;width:0px;height:0px">
<div id="SCROLL"> [배너코드] </div>
</div>
<div id="SCROLL"> [배너코드] </div>
</div>
티스토리의 경우 왜 div id="container" 라는 코드 아래에 넣어야 하면, 그 위치에 넣어야지 브라우저 사이즈가 조정될때 광고가 이리저리 움직이지 않고 같은 자리에 위치 하기 때문입니다. 티스토리가 아닌 경우 광고 코드를 본문이 시작되는 곳에 넣어 주시면 될것입니다.
4. 마지막으로 CSS 코드 부분에 아래 코드를 제일 마지막 부분에 넣어 주시기 바랍니다.
#SCROLL {
POSITION: absolute;
PADDING-BOTTOM: 0pt;
MARGIN: 0pt;
PADDING-LEFT: 0px;
PADDING-RIGHT: 0pt;
RIGHT: 0px;
PADDING-TOP: 0pt;
TOP: 1715px;
}
POSITION: absolute;
PADDING-BOTTOM: 0pt;
MARGIN: 0pt;
PADDING-LEFT: 0px;
PADDING-RIGHT: 0pt;
RIGHT: 0px;
PADDING-TOP: 0pt;
TOP: 1715px;
}
이렇게 하면 기본적인 코드는 삽입이 다 된 상태 입니다. 이제 사이트를 확인해 가면서 위치를 조정해 주시면 되는데 1번에서 BASE, LEFT, TOP1 코드의 수치를 적정히 사용자가 원하는 수치로 조절해 주시면 끝이 납니다.
이제 확인을 해보시면 사용자가 지정한 위치 부터 스크롤시 사이드 배너가 따라 다닐 것입니다.
PS. 혹시나 해서 사이드 배너를 넣었는데 제 블로그는 역시나 클릭율이 너무 저조 하네요. ㅜ.ㅜ
조만간에 전 내려야 할거 같습니다.
'블로그' 카테고리의 다른 글
| 구글 플러스(Google+) 공유 버튼 사용 방법 (6) | 2011.09.23 |
|---|---|
| 이상한 스팸성 댓글 - 스팸인지 아닌지도 헷갈린다. (8) | 2011.09.14 |
| 블로그 마우스 우클릭 방지 때문에 힘들다!!! (18) | 2011.07.26 |
| 블로그에 글쓰는 사람은 어떤 사람일까? (20) | 2011.06.14 |
| 총체적 난국에 빠진 나... (31) | 2011.04.25 |
