따라다니는 '플로팅배너' 만들기(반응형 블로그)

예전에(반응형 블로그가 없던 시절) 티스토리 블로그에는 다음뷰 버튼이나 SNS공유버튼을 테이블로 조그맣게 모양으로 만들어서 마우스를 스크롤하면 그 상태 그대로 고정되어 있게 하거나.

 

혹은 스크롤을 따라서 물흐르듯 따라다니는 '배너'를 설치하는 사람들이 상당히 많았습니다.

 

 

지금도 검색을 하다보면 그런 블로그들을 간혹 접하기도 하는데~

 

요즘은 반응형 블로그도 등장하고..그런 트렌드에 발맞춰서 페이지 로딩속도까지 신경쓰다보니 잡다한 부분들을 과감히 생략한 심플한 블로그가 대세(?)라고 볼 수도 있어요^^

 

현재 이 블로그 같은 경우 좌측에 따라다니는 플로팅배너를 하나 만들어서 쇼핑몰과 연결이 되도록 해둔 상태입니다. 옆에 귀여운 부엉이모양의 배너가 보이시죠?

 

검색을 해보면 플로팅배너와 관련된 수많은 글이 있지만..반응형 블로그에 적용하는 방법은 없길래 이렇게 포스팅해봅니다. (3가지 반응형 블로그 스킨을 사용해본 결과 모두 적용가능!)

 

위 캡쳐화면을 속에 보이는 부엉이 배너..개인이 원하는 이미지로 얼마든지 변경할 수 있습니다. 블로그를 여러개 운영하거나 사이트,쇼핑몰 운영자라면 이런식으로 배너를 달아서 홍보효과를 얻을 수도 있겠죠~

 

하지만 이런 자바스크립트 형식으로 만들어진 배너의 안좋은 점은..페이지 로딩속도에 영향을 준다는 사실입니다.(조만간 떼어낼까 말까 망설이는 중 ㅎㅎ)

 

처음에 플로팅배너를 적용할때 기존 소스를 그대로 적용했더니..PC화면상에는 잘 나왔지만 타블렛이나 스마트폰 화면에서도 배너가 나오더라구요..나오는게 문제는 아니지만 이 배너가 화면을 가리게 만든다는 것이 큰 문제였죠~

 

즉..기존의 배너소스가 반응형 스킨에는 잘 맞지 않다는 사실을 확인한 셈이었죠. 그래서 제가 원한건 PC에서는 정상적으로 배너가 보이고..모바일상에서는 보여지지 않게 하고 싶었답니다.

 

스크롤하면 한 자리에 가만히 있는 '고정형' 플로팅 배너 CSS 소스중 일부분입니다. 이 부분이 바로 배너의 위치를 정해주는 핵심이죠~

 

그리고 이건 스크롤을 하면 '따라서 움직이는' 플로팅 배너 CSS 소스중 일부분입니다. 고정형에 비해서 아주 심플하죠?

 

따라다니는 '플로팅배너' 만들기(반응형 블로그)

 

 

저도 전문가가 아니라서 정확히는 모르지만 위와 같은 소스들을 그대로 적용할 경우 반응형 블로그에서는 화면이 작아지면 배너까지 작아져서 화면을 가리게 만들더라구요~

 

그래서 나름대로 테스트 해본 결과..두 가지 소스를 합쳐서 위와 같은 새로운 CSS소스를 만들었습니다. 약간의 편집만 한거죠^^

 

중요한 부분들만 남기고 불필요한건 다 없애버렸는데...배너의 정확한 '위치'결정과 고정이나 아니냐의 유무만 정해줬습니다. position이 fixed라면 그 자리에 가만이 있는 것이고 absolute라면 따라다니게 되는 거죠~

 

배너용 이미지를 만들어두었다면 아래 첨부된 util.js 화일과 함께 업로드를 해주세요~ 그리고 업로드된 이미지 미리보기 화면에서 '이미지 url을 복사해둡니다.

 

util.js

다운로드

 

스크립트 내용을 보면 복잡한 것 같지만..여기서 수정해줘야 할 부분은 거의 없습니다.

 

배너의 왼쪽,위쪽 여백 설정...그리고 스크롤시 위쪽으로 부터의 거리와 시작위치를 정해주는 수치만 조금 신경쓰면 될듯한데..

 

최근에 나온 반응형 스킨들의 경우는 대부분 폭이 일정하더라구요~ 위 상태 그대로 써도 크게 문제없습니다.(테스트는 반드시 해보시길!)

 

따라다니는 배너.txt

다운로드

위 내용중에서 <div id="staticmenu">옆을 보면 배너 이미지의 url주소와 링크할 주소..그리고 마우스 오버시 보여지는 이름까지 넣어줄 수 있습니다.

 

이때 taget="_blank 는 배너를 눌렀을때 새창이 뜨게 하는 소스니까 참고하세요^^

 

빨간색 테두리친 부분은 블로그 html 편집창에서 </body>바로 위에 삽입해주고 나머지 부분은 css 하단부에 삽입해주고 저장하면 끝!

 

✅티스토리 공감버튼 위치 변경 또는 숨기는 방법

티스토리 공감버튼 위치 변경 또는 숨기는 방법

✅티스토리글 대표사진 설정,실제 노출과 단점

티스토리글 대표사진 설정,실제 노출과 단점

✅아직도 티스토리 방문자수를 믿는 사람이 있을까?

아직도 티스토리 방문자수를 믿는 사람이 있을까?

✅티스토리 블로그 댓글(차단하고 싶은 댓글 유형들)

티스토리 블로그 댓글(차단하고 싶은 댓글 유형들)