플로팅광고라고 하기엔 좀 그렇고...스크롤을 따라다니는 광고라고 표현하면 적당하겠군요. 즉, 다시말하면 마우스 스크롤로 페이지가 상하로 움직여도 광고는 그 자리에 그대로 고정되어 보여지는 그런 광고라는 거죠. 마우스 따라다니는 광고! 방법은 정말 간단합니다. 사진설명조차 필요가 없지만 그래도 몇 장은 첨부하겠습니다. 아래를 봅니다.
먼저 티스토리 관리센터 - HTML/CSS 편집기에서 CSS 편집부분을 봅니다.
스크롤을 최하단으로 내려 그곳에 아래 텍스트파일을 열어 전체를 그대로 복사합니다.
삽입하셨나요? 그럼 이제 사이드바 관리화면으로 들어갑니다. HTML 배너 출력을 맨위로 끌어오신 후 아래 첨부파일 내 HTML 소스를 그대로 복사합니다.
저같은 경우에는 '리더스타임' 광고를 사이드바 플로팅 광고로 쓰고 있습니다.
자세한 광고소스 삽입방법은 아래와 같습니다.
<div id="floatdiv">
<ul>
<script name='cpt_script' type='text/javascript' src='http://leaderstime.co.kr/nicead/ad_script_new.asp?tid=i07abcd42064'></script>
</ul>
</div>
빨간부분이 '광고코드' 죠. <ul> 과 </ul> 사이에 광고코드를 그대로 붙여넣기 하시면 됩니다.
자 이제 광고가 표시됩니다. 그런데 뭔가 어색하다구요? 광고의 위치를 조금 조정해봅시다.
다시 CSS 편집기로 들어갑니다.
/* 떠다니는 메뉴 (Floating Menu) */
#floatdiv {
position:fixed; _position:absolute; _z-index:-1;
width:170px;
overflow:hidden;
right:150px; ← 스크롤바에서 몇 px 간격을 띄울지
top:200px; ← 상단에서 몇 px 간격을 띄울지
background-color: transparent;
margin:0;
padding:0;
}#floatdiv ul { list-style: none; }
#floatdiv li { margin-bottom: 2px; text-align: center; }
#floatdiv a { color: #5D5D5D; border: 0; text-decoration: none; display: block; }
#floatdiv a:hover, #floatdiv .menu { background-color: #5D5D5D; color: #fff; }
#floatdiv .menu, #floatdiv .last { margin-bottom: 0px; }
이해가시나요? 수치 조정을 적당하게 하셔서 가장 적절한 위치로 조정하시면 됩니다.
궁금한 사항들 댓글 질문 받습니다. 이상입니다.
![](https://tistory3.daumcdn.net/tistory/517400/skin/images/share_bar_margin.png)
![](https://tistory2.daumcdn.net/tistory/517400/skin/images/Facebook01.png)
![](https://tistory1.daumcdn.net/tistory/517400/skin/images/Naver01.png)
![](https://tistory4.daumcdn.net/tistory/517400/skin/images/Kakao01.png)
![](https://tistory4.daumcdn.net/tistory/517400/skin/images/Google_Plus01.png)
![](https://tistory1.daumcdn.net/tistory/517400/skin/images/Twitter01.png)
Comments