움직이는 떠다니는 배너 - 티스토리

* 이제는 이 블로그에 떠다니는 배너를 사용하지 않고 있으니 이점을 생각해서 아래 글을 읽길 바랍니다. 이것에 대해서는 여기보다 http://martian36.tistory.com/765 가 설명이 더 잘된 것 같습니다. *

이 페이지에서는 옆에 보이는 사각형의 다음뷰 고정된 배너가 아니고, 아래 그림처럼 스크롤바를 움직이면 움직이는 떠다니는 배너에 대해 적겠습니다. 브라우저의 스크롤바를 움직이면 아이콘 두개가 항상 따라 올 것입니다. 제가 이 티스토리 블로그에서 어떻게 했는지만 설명하겠습니다. 참고로  http://min-blog.tistory.com/603 에서 움직이는 배너에 대해서 설명했는데 현재 배너 아이콘 등이 바뀌었습니다. 자세한 설정은 저도 모르니 단순히 내 블로그에서 어떻게 했는지만 설명하려합니다. 

두 개의 파일 올리기

옆에서 움직이면서 떠다니는 배너를 위해 구현하는 두개의 스크립트 파일을 다운받아 아래 그림같이 파일목록에 나타나도록 올립니다. 파일을 올리는 과정은 관리에서 HTML/CSS 편집을 클릭한 후 파일업로드를 클릭합니다. 그리고 페이지 아래의 추가 버튼을 누르고 두 개의 파일을 올립니다. 만약 티스토리에서 파일 업로드 말을 한다면 이와 같이 한다는 것을 알아두세요. 

jquery.dimensions.js

jquery_mini.js

 

스크립트 코드 삽입하기

아래 업로드한 파일을 열어서 그 코드를 복사하고 HTML/CSS 편집을 클릭한 후 skin.html의 </head>위에 아래와 같이 삽입합니다. 아래 파일을 클릭하면 보통은 메모장으로 자동보여줍니다. 위에서 올린 두개의 파일아니어도 업로드한 파일의 경로는 skin.html에서는 무조건 ./images/파일이름이 됩니다. 그래서 윗 그림에서 <sript src="./images/juery_mini.js" ~라고 한 것입니다.

플로팅 jquery.txt

 플로팅 아이콘 코드 삽입하기

</s_t3>위에 저는 떠다니는 아이콘 코드를 삽입합니다. 제가 아이콘을 배포할 수 없는지라 코드에 나오는 문서를 그대로 붙여넣으면 안됩니다. 아래 문서에서 고칠 부분은 고쳐서 붙여야 합니다. 옆을 보면 저는 아이콘 두 개를 사용했다는 것을 알 수 있는데 떠다니는 배너를 사용할 이미지를 위에 파일 올리기식으로 올려야 합니다. 반드시 떠다니는 배너가 글을 가릴 수 있으니 화면 해상도가 크고 작은 곳에서 확인해 보세요. 만약 배너가 글을 가리면 티스토리에서 블로그에 제재를 줄 수 있다는 것을 명심해야 합니다. 그러니 자신의 컴퓨터만이 아닌 여러 컴퓨터에서 확인하여 배너가 글을 가리는지 반드시 확인하세요. 저의 경우는 제재를 하든 말든 상관없다 입니다.그리고 이 경우는 1024*768의 해상도에서는 100% 가립니다. 

플로팅메뉴 아이콘.txt

혹시 리얼센스 플로팅 배너는   http://cezacx2.tistory.com/512  를 참고하세요.

플로팅 CSS 삽입

떠다니는 아이콘을 제어하기 위해 CSS를 삽입합니다. 관리의 HTML/CSS 편집에서 style.css에 제일 아래에 코드를 삽입합니다. 아래 그림에서 top은 브라우저 창에서의 거리이고 margin-left는 브라우저 왼쪽에서 거리라고 알고 있어서 저의 1280*800에서는 문제가 없었습니다.

플로팅메뉴 CSS.txt

반드시  떠다니는 배너를 한 후 자신의 컴퓨터에서만 볼 것이 아니라 여러 해상도에서 확인해보기 바랍니다. 집에서가 아닌 PC방 등에서 자신의 블로그를 확인하세요. 네이버 블로그,다음 블로그에서는 HTML/CSS를 편집할 수 없는지라 못하니 헛고생마세요. 그리고 HTML/CSS를 편집할 수 있는 이글루스와 XE(제로보드XE)에서는 해보지 않았습니다.정말 많이 어려울 것이니 뜻대로 안될 것 같은데 그래도 해 볼 사람은 천천히 따라해 보세요. 

보험상품비교

BY GS보험샵