어제에 이어, 플로팅 배너의 다른 종류인 스크롤을 따라 움직이기는 하지만 슬라이딩 되지 않고 화면에 고정된 듯한 배너를 설치하는 방법을 알아 보겠습니다.
자연스러운 슬라이딩 배너와 오늘 이야기 하는 고정식 스크롤 배너의 차이에 대해서는 전에 쓴 글을 참고하시기 바랍니다.
[IT/Blog] - 리얼센스 플로팅 배너의 2가지 종류
오늘 설치할 배너의 소스는 "세상과 만나는 프로그램 이야기"의 MastmanBan님께서 공개해 주신 겁니다.
쿠키를 이용하여 오늘 하루는 열지 않음 스크립트를 넣을 수도 있지만, 광고 효과를 최대한 높이기 위해 관련 소스는 삭제했습니다.
위의 소스는 블로그내의 어떤 Div도 닫을 수 있는 스크립트입니다. 사이드배너, 플로팅 배너, 공지사항 등 레이어를 이용한 팝업을 모두 닫게 할 수 있습니다.
1. Skin.html 중 원하는 위치에 아래의 소스를 삽입해 줍니다.
전 구글 애드센스 상단광고 바로 밑에 붙여 넣었습니다. 즉 본문글인
이 소스를 보시면 배너의 위치에 대한 내용이 전혀 없습니다.
단지 테이블을 짜서 위쪽은 광고를, 아래쪽은 [닫기] 글씨를 넣고 [닫기]를 눌렀을 때 3번에서 정한 대로 레이어를 닫게하는 것입니다.
2. style.css 에서 fixed-top의 위치를 지정하는 소스를 맨 아래에 추가합니다.
CSS에 추가한 소스는 1에서 추가한 fixed-top이란 레이어의 위치를 지정해 주는 것입니다.
이 소스 역시 해상도와 관계 없이 지정된 위치에 배너가 표시됩니다. 빨간색으로 표시된 값들을 자신의 블로그에 맞춰 값을 변경하면 원하는 위치에 고정되어 스크롤을 따라다니는 배너를 다실 수 있습니다.
위의 방법은 스크롤을 따라 다니는 플로팅 배너 입니다. 이 소스를 이용하여 스크롤과 관계 없이 특정위치에 고정된 본문을 가리는 플로팅 배너를 만들 수 있습니다.
3번과 1번은 동일하며, 2번의 소스만 약간 다르게 해주시면 됩니다.
2. style.css의 소스만 살짝 바꿔 주시면 됩니다.
스크롤을 따라 다니는 css에서 position값을 fixed에서 absolute로 변경하고, 아래쪽의 *html로 시작되는 소스는 모두 삭제하면 됩니다.
최대한 쉽게 쓴다고 썼는데... 소스를 쓰다 보니 뭔소리를 하고 있는지 저도 모르겠네요...ㅎㅎ
혹시 설명이 미흡한 부분은 댓글 남겨 주시면 아는 만큼만 답변 드릴께요...^^*
마지막으로 소스를 공개해주신 MastmanBan님께 다시한번 감사를 드립니다.
자연스러운 슬라이딩 배너와 오늘 이야기 하는 고정식 스크롤 배너의 차이에 대해서는 전에 쓴 글을 참고하시기 바랍니다.
[IT/Blog] - 리얼센스 플로팅 배너의 2가지 종류
오늘 설치할 배너의 소스는 "세상과 만나는 프로그램 이야기"의 MastmanBan님께서 공개해 주신 겁니다.
동영상도 MastmanBan님의 블로그를 캡처하였습니다. 제 블로그에 설치한 모습을 캡처할까 하다가 소스 공개자이신 MastmanBan님의 블로그를 소개해 드리는 것이 예의상 좋을 듯 해서..^^*
어제의 경우와 마찬가지로, 소스를 제작하신 원제작자님들의 실력이 뛰어나시니 원문글을 보시려면 아래의 링크를 참조하시기 바랍니다.
MastmanBan님의 블로그 : 본문을 덮지 않고 따라 다니는 사이드 배너 사용방법
이 글을 적는 이유는, 어제 밝힌 바와 같이 제가 스킨 변경시 소스를 다시 찾기 어려울 수 있을 것 같아 기록차원에서 쓰는 것입니다.
| 고정식 스크롤 플로팅 배너 설치 |
MastmanBan님께서 설명을 잘 해주셨지만, 위의 글만 읽으시면 언뜻 이해가 되지 않을 수 있습니다.
관련글을 2번에 걸쳐 쓰셔서 앞에 쓰신 글을 읽어 보셔야 좀더 이해가 쉽거든요.
고정식 스크롤 플로팅 배너를 설치하는 방법은
1. Skin.html에 광고 소스 삽입
2. CSS에 광고소스가 삽입 된 레이어의 위치값 지정 소스 삽입
이 두가지만 하시면 고정식 스크롤 플로팅 배너는 설치가 됩니다.
MastmanBan님이나 다른 분들이 리얼센스를 가지고 이용하시는 방법은 사이드 광고가 아닌 본문을 가리면서 따라다니는 플로팅 배너입니다.
따라서, 방문자가 광고창을 닫을 수 있는 [닫기]버튼이 반드시 필요합니다. 그래서 추가로 div를 닫을 수 있는 스크립트가 필요합니다.
3. 광고창 닫기 자바스크립트 소스 삽입
을 추가하여 3가지 작업을 하시면 완벽하게 고정식 스크롤 플로팅 배너를 이용하실 수 있습니다.
쿠키를 이용하여 오늘 하루는 열지 않음 스크립트를 넣을 수도 있지만, 광고 효과를 최대한 높이기 위해 관련 소스는 삭제했습니다.
설명 순서는 skin.html에 소스를 적용하는 순서대로 3-1-2 로 진행 하겠습니다.
소스파일을 첨부합니다. 다운받으시면 아래의 소스들이 포함되어 있습니다.
소스파일을 첨부합니다. 다운받으시면 아래의 소스들이 포함되어 있습니다.
플로팅배너 소스.txt3. Skin.html에 광고창 닫기 자바스크립트 소스를 <head>와 </head>사이에 넣어 줍니다.
| <!-- 팝업 광고 닫기 시작 --> <script> function floating_close(divid) { var strObj = document.getElementById(divid); strObj.style.display = "none"; } </script> <!-- 팝업 광고 닫기 끝 --> |
1. Skin.html 중 원하는 위치에 아래의 소스를 삽입해 줍니다.
전 구글 애드센스 상단광고 바로 밑에 붙여 넣었습니다. 즉 본문글인
어제에 이어, 플로팅 배너의 다른 종류인 스크롤을 따라 움직이기는 하지만 슬라이딩 되지 않고 화면에 고정된 듯한 배너를 설치하는 방법을 알아 보겠습니다.
자연스러운 슬라이딩 배너와 오늘 이야기 하는 고정식 스크롤 배너의 차이에 대해서는 전에 쓴 글을 참고하시기 바랍니다.
[IT/Blog] - 리얼센스 플로팅 배너의 2가지 종류
오늘 설치할 배너의 소스는 "세상과 만나는 프로그램 이야기"의 MastmanBan님께서 공개해 주신 겁니다.
쿠키를 이용하여 오늘 하루는 열지 않음 스크립트를 넣을 수도 있지만, 광고 효과를 최대한 높이기 위해 관련 소스는 삭제했습니다.
위의 소스는 블로그내의 어떤 Div도 닫을 수 있는 스크립트입니다. 사이드배너, 플로팅 배너, 공지사항 등 레이어를 이용한 팝업을 모두 닫게 할 수 있습니다.
1. Skin.html 중 원하는 위치에 아래의 소스를 삽입해 줍니다.
전 구글 애드센스 상단광고 바로 밑에 붙여 넣었습니다. 즉 본문글인 바로 위가 되겠죠.
이 소스를 보시면 배너의 위치에 대한 내용이 전혀 없습니다.
단지 테이블을 짜서 위쪽은 광고를, 아래쪽은 [닫기] 글씨를 넣고 [닫기]를 눌렀을 때 3번에서 정한 대로 레이어를 닫게하는 것입니다.
2. style.css 에서 fixed-top의 위치를 지정하는 소스를 맨 아래에 추가합니다.
CSS에 추가한 소스는 1에서 추가한 fixed-top이란 레이어의 위치를 지정해 주는 것입니다.
이 소스 역시 해상도와 관계 없이 지정된 위치에 배너가 표시됩니다. 빨간색으로 표시된 값들을 자신의 블로그에 맞춰 값을 변경하면 원하는 위치에 고정되어 스크롤을 따라다니는 배너를 다실 수 있습니다.
위의 방법은 스크롤을 따라 다니는 플로팅 배너 입니다. 이 소스를 이용하여 스크롤과 관계 없이 특정위치에 고정된 본문을 가리는 플로팅 배너를 만들 수 있습니다.
3번과 1번은 동일하며, 2번의 소스만 약간 다르게 해주시면 됩니다.
2. style.css의 소스만 살짝 바꿔 주시면 됩니다.
스크롤을 따라 다니는 css에서 position값을 fixed에서 absolute로 변경하고, 아래쪽의 *html로 시작되는 소스는 모두 삭제하면 됩니다.
최대한 쉽게 쓴다고 썼는데... 소스를 쓰다 보니 뭔소리를 하고 있는지 저도 모르겠네요...ㅎㅎ
혹시 설명이 미흡한 부분은 댓글 남겨 주시면 아는 만큼만 답변 드릴께요...^^*
마지막으로 소스를 공개해주신 MastmanBan님께 다시한번 감사를 드립니다.
바로 위가 되겠죠.자연스러운 슬라이딩 배너와 오늘 이야기 하는 고정식 스크롤 배너의 차이에 대해서는 전에 쓴 글을 참고하시기 바랍니다.
[IT/Blog] - 리얼센스 플로팅 배너의 2가지 종류
오늘 설치할 배너의 소스는 "세상과 만나는 프로그램 이야기"의 MastmanBan님께서 공개해 주신 겁니다.
동영상도 MastmanBan님의 블로그를 캡처하였습니다. 제 블로그에 설치한 모습을 캡처할까 하다가 소스 공개자이신 MastmanBan님의 블로그를 소개해 드리는 것이 예의상 좋을 듯 해서..^^*
어제의 경우와 마찬가지로, 소스를 제작하신 원제작자님들의 실력이 뛰어나시니 원문글을 보시려면 아래의 링크를 참조하시기 바랍니다.
MastmanBan님의 블로그 : 본문을 덮지 않고 따라 다니는 사이드 배너 사용방법
이 글을 적는 이유는, 어제 밝힌 바와 같이 제가 스킨 변경시 소스를 다시 찾기 어려울 수 있을 것 같아 기록차원에서 쓰는 것입니다.
| 고정식 스크롤 플로팅 배너 설치 |
MastmanBan님께서 설명을 잘 해주셨지만, 위의 글만 읽으시면 언뜻 이해가 되지 않을 수 있습니다.
관련글을 2번에 걸쳐 쓰셔서 앞에 쓰신 글을 읽어 보셔야 좀더 이해가 쉽거든요.
고정식 스크롤 플로팅 배너를 설치하는 방법은
1. Skin.html에 광고 소스 삽입
2. CSS에 광고소스가 삽입 된 레이어의 위치값 지정 소스 삽입
이 두가지만 하시면 고정식 스크롤 플로팅 배너는 설치가 됩니다.
MastmanBan님이나 다른 분들이 리얼센스를 가지고 이용하시는 방법은 사이드 광고가 아닌 본문을 가리면서 따라다니는 플로팅 배너입니다.
따라서, 방문자가 광고창을 닫을 수 있는 [닫기]버튼이 반드시 필요합니다. 그래서 추가로 div를 닫을 수 있는 스크립트가 필요합니다.
3. 광고창 닫기 자바스크립트 소스 삽입
을 추가하여 3가지 작업을 하시면 완벽하게 고정식 스크롤 플로팅 배너를 이용하실 수 있습니다.
쿠키를 이용하여 오늘 하루는 열지 않음 스크립트를 넣을 수도 있지만, 광고 효과를 최대한 높이기 위해 관련 소스는 삭제했습니다.
설명 순서는 skin.html에 소스를 적용하는 순서대로 3-1-2 로 진행 하겠습니다.
소스파일을 첨부합니다. 다운받으시면 아래의 소스들이 포함되어 있습니다.
소스파일을 첨부합니다. 다운받으시면 아래의 소스들이 포함되어 있습니다.
3. Skin.html에 광고창 닫기 자바스크립트 소스를 <head>와 </head>사이에 넣어 줍니다.
| <!-- 팝업 광고 닫기 시작 --> <script> function floating_close(divid) { var strObj = document.getElementById(divid); strObj.style.display = "none"; } </script> <!-- 팝업 광고 닫기 끝 --> |
1. Skin.html 중 원하는 위치에 아래의 소스를 삽입해 줍니다.
전 구글 애드센스 상단광고 바로 밑에 붙여 넣었습니다. 즉 본문글인 바로 위가 되겠죠.
| <!-- 스크롤 팝업 배너 시작 --> <div class="fixed-top" > <div id="fixed-top"> <table border="0" cellpadding="10" cellspacing="0" bgcolor="#000000"> <tr> <td align="center" > 광고소스 또는 배너 이미지 소스 (예 : 리얼센스 스크립트) </td> </tr> <tr> <td height="10" align="center" style="background-color:#000000;color:black;"><a href="javascript:floating_close('fixed-top');" style="color:#FFFFFF; text-decoration:none; font-size:12px;"><strong>[닫기]</strong></a></td> </tr> </table> </div></div> <!-- 좌측 스크롤 팝업 배너 끝--> |
단지 테이블을 짜서 위쪽은 광고를, 아래쪽은 [닫기] 글씨를 넣고 [닫기]를 눌렀을 때 3번에서 정한 대로 레이어를 닫게하는 것입니다.
2. style.css 에서 fixed-top의 위치를 지정하는 소스를 맨 아래에 추가합니다.
|
.fixed-top * html .fixed-top |
이 소스 역시 해상도와 관계 없이 지정된 위치에 배너가 표시됩니다. 빨간색으로 표시된 값들을 자신의 블로그에 맞춰 값을 변경하면 원하는 위치에 고정되어 스크롤을 따라다니는 배너를 다실 수 있습니다.
| 본문을 가리는 플로팅 배너 |
위의 방법은 스크롤을 따라 다니는 플로팅 배너 입니다. 이 소스를 이용하여 스크롤과 관계 없이 특정위치에 고정된 본문을 가리는 플로팅 배너를 만들 수 있습니다.
3번과 1번은 동일하며, 2번의 소스만 약간 다르게 해주시면 됩니다.
2. style.css의 소스만 살짝 바꿔 주시면 됩니다.
| .fixed-top {position:absolute;bottom:auto; top:1000px;margin-left: 400px;z-index:1000;} |
최대한 쉽게 쓴다고 썼는데... 소스를 쓰다 보니 뭔소리를 하고 있는지 저도 모르겠네요...ㅎㅎ
혹시 설명이 미흡한 부분은 댓글 남겨 주시면 아는 만큼만 답변 드릴께요...^^*
마지막으로 소스를 공개해주신 MastmanBan님께 다시한번 감사를 드립니다.
| <!-- 스크롤 팝업 배너 시작 --> <div class="fixed-top" > <div id="fixed-top"> <table border="0" cellpadding="10" cellspacing="0" bgcolor="#000000"> <tr> <td align="center" > 광고소스 또는 배너 이미지 소스 (예 : 리얼센스 스크립트) </td> </tr> <tr> <td height="10" align="center" style="background-color:#000000;color:black;"><a href="javascript:floating_close('fixed-top');" style="color:#FFFFFF; text-decoration:none; font-size:12px;"><strong>[닫기]</strong></a></td> </tr> </table> </div></div> <!-- 좌측 스크롤 팝업 배너 끝--> |
단지 테이블을 짜서 위쪽은 광고를, 아래쪽은 [닫기] 글씨를 넣고 [닫기]를 눌렀을 때 3번에서 정한 대로 레이어를 닫게하는 것입니다.
2. style.css 에서 fixed-top의 위치를 지정하는 소스를 맨 아래에 추가합니다.
|
.fixed-top * html .fixed-top |
이 소스 역시 해상도와 관계 없이 지정된 위치에 배너가 표시됩니다. 빨간색으로 표시된 값들을 자신의 블로그에 맞춰 값을 변경하면 원하는 위치에 고정되어 스크롤을 따라다니는 배너를 다실 수 있습니다.
| 본문을 가리는 플로팅 배너 |
위의 방법은 스크롤을 따라 다니는 플로팅 배너 입니다. 이 소스를 이용하여 스크롤과 관계 없이 특정위치에 고정된 본문을 가리는 플로팅 배너를 만들 수 있습니다.
3번과 1번은 동일하며, 2번의 소스만 약간 다르게 해주시면 됩니다.
2. style.css의 소스만 살짝 바꿔 주시면 됩니다.
| .fixed-top {position:absolute;bottom:auto; top:1000px;margin-left: 400px;z-index:1000;} |
최대한 쉽게 쓴다고 썼는데... 소스를 쓰다 보니 뭔소리를 하고 있는지 저도 모르겠네요...ㅎㅎ
혹시 설명이 미흡한 부분은 댓글 남겨 주시면 아는 만큼만 답변 드릴께요...^^*
마지막으로 소스를 공개해주신 MastmanBan님께 다시한번 감사를 드립니다.
'블로그' 카테고리의 다른 글
| 플로팅 베너의 닫기 버튼 광고 내부에 달기 (72) | 2011.02.28 |
|---|---|
| 티스토리 초대장 나눠드립니다.[마감] (36) | 2011.02.24 |
| 다음 고객센터 "답변은 다음에~" (4) | 2011.02.23 |
| 스크롤을 따라 자연스럽게 움직이는 플로팅 배너 설치방법 (247) | 2011.02.17 |
| 리얼센스 플로팅 배너의 2가지 종류 (7) | 2011.02.16 |
| 리얼센스의 본문을 가리는 플로팅 배너 효과 (23) | 2011.02.12 |
