따라다니는 배너 만들기, 블로그 좌측에 있는 길다란 배너인 플로팅배너만들기

따라다니는 배너 만들기, 블로그 좌측에 있는 길다란 배너인 플로팅배너만들기

블로그를 돌아다니다 보면 옆에서 따라다니는 배너를 볼 수가 있습니다. 플로팅배너라는 것입니다.

스크롤을 하는 순간 졸졸졸 따라다니는 배너가 있는가 하면 그대로 이동을 하는 배너가 있는 등..
종류도 다양합니다.

예전에 한번 달아볼까 하다가 달지 않은게... 가독성을 해치기 때문입니다. 글을 읽으려고 스크롤을 내리면 
계속해서 따라오는 배너 때문에 글 읽기가 불편하기 때문입니다. 

그런데 블로그가 하나 더 생겨서 달아볼 까 합니다 . 졸졸졸 따라다니는 것 보다는 옆에서 바짝 붙어 있는
배너입니다.

생각보다는 어렵지가 않습니다.

1. HTML/CSS 부분의  Style.CSS 부분 하단에 아래 박스안에 내용 쓰기

 #floatdiv {
 
   position:fixed; _position:absolute; _z-index:-1;
    width:170px;
    overflow:hidden;
    left:0px;
    top:60px;
    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; }

여기서 빨간색 부분을 설명하면... 
    left:0px; -> 블로그 좌측 설정값 적용
    top:60px; -> 윈도우 화면 전체에서 배너를 어디까지 내릴건지 적용.



2. HTML 부분에 BOX 부분의 코드를 넣으시면 됩니다.
  ** 광고코드 넣는 부분에다가 광고코드를 넣으시면 됩니다.

 <div id="floatdiv">
    <ul>

이 부분에 광고코드를 넣으시면 됩니다.         

    </ul>
</div>

3. 혹시 코드 치기가 어려울 것 같아 코드를 첨부합니다.
이 코드는 어디서 얻었는데, 예전에 어디서 얻었는지는 가물가물.. 혹시 주인장님 보시면 이해 부탁드려요..

플로팅배너_따라다니는배너만들기.txt

4. 요약한 화면

혹시 궁금한 사항이나 잘 안되는 사항 있으면 댓글 부탁드려요.