티스토리 블로그에 플로팅광고달기 떠서 마우스따라다님

 

 

 

 

티스토리 떠다니는 배너 플로팅 광고를달아보자

---

 

광고들 아마다 다실겁니다. 이번에 포스팅하는거는 마우스스크롤에 따라 떠다니는 플로팅 광고 적용방법에 대해 포스팅해드리겠습니다. 아래 스샷에 보시면 적용한 화면입니다. 광고는 애드젯에서 퍼왔구요 위젯광고인데 원래 그거를 3개를 붙인겁니다. 3개가 하나처럼 마우스 스크롤에따라 움직입니다. 그럼 어떻게 적용하는지 알아보겠습니다.

 

 

 

 

 

우선 style.css 편집기로들어갑니다. 그후에

 

/* 떠다니는 메뉴 (Floating Menu) */

#floatdiv {
 
   position:fixed; _position:absolute; _z-index:-1;
    width:170px;
    overflow:hidden;
    right:11px; <-- 오른쪽에서 얼마나 떨어질지
    top:120px; <-- 위에서 얼마나 떨어질지
    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; }

 

 

위의 코드를삽입합니다. 적용하실때 위에 색갈로 체크해놓은부분만 수정을 해주시면됩니다. 오른쪽에 배열을할껀지 왼쪽에할건지를 정합니다. 그리고 얼마나 떨어져서 적용을 시킬건지 입니다. 적용하시기 힘드신분들을위해 첨부파일로 해놓겠습니다.

 

플로탱메뉴css.txt

 

 

 

 

css 부분을 수정하셨다면 저장을하시고 사이드바 편집으로 갑니다. 그리고 HTML배너출력을 하셔서 수정을합니다.

 

 

<div id="floatdiv">
    <ul>
        광고소스

    </ul>
</div>

 

소스에다 위에와 같이 넣으시고 광고소스부분에 광고를 넣어주시면됩니다. 1개짜리 광고는 원광고소스 그대로 넣어주시면되고 저처럼 3개를 하신다면 3개의 소스를 연달아 넣어주시면됩니다. 간단하죠? 이것또한 첨부파일로 소스코드를 첨부해놓겠습니다.

 

광고소스.txt

 

위에 텍스트 파일받으셔서 광고소스부분만 수정을해주시면됩니다.

 

 

 

간단하죠? 직접해보시면 어렵지는 않을겁니다. 저도 보고 따라한거라서 좋은광고 많이들다시고 용돈벌이 잘되시길바랄께요.. 근데.. 이놈의 구글애드센스는 언제쯤승인을 해줄까요? 혹시 제블로그 보시고 이유를 아신다면 좀알려주시길바래요 ㅠㅠ 저도 사이드바에 구글달고싶습니다. 항상 컨텐츠불충분... ㅠㅠ

 

2013/07/05 - 티스토리 꾸미기 사이드바에 유튜브동영상 넣기

 

2013/07/05 - 티스토리 유튜브 동영상 고화질로 링크걸기