계속 플로팅 배너를 수정하고 있으니 아래 글에 문제점을 발견할 수 있을 것입니다. 그런 것에 유의하여 보기 바랍니다.

스킨수정시 스킨저장은 반드시 필요 : 저의 블로그에 양쪽에 보이는 것이 플로팅(떠다니는)  배너에 입니다. 이것을 어떻게 했는지 설명드리겠습니다. 스크립트와 CSS를 해야 하는 것이라 어려울 것 같습니다. 이것만이 아닌 티스토리 블로그에서 스킨 수정전에 반드시 해야 할 것은 스킨 저장을 반드시 해야 합니다. 나중에 망친 블로그를 보고 속상하고 싶지 않다면 예외없이 무조건 스킨을 저장하세요. 만약에 스킨저장한 것이 없어서 블로그를망쳤다면 저는 처음부터 하라고 말하고 싶습니다. 다른 방법에 대해서는 전혀 모르거든요. 혹시 HTML이나 CSS를 잘 아니 스킨을 저장할 필요없겠다라고 하신다면 그것은 고생할  길입니다.  스킨 수정전에는 반드시 스킨을 저장합니다. 전에도 얘기했듯이 스킨수정으로 블로그를 망치면 저는 책임을 안 집니다. 참고로 스킨을 많이 변경하고 블로그 배경이 있다면 이 글을 하는 것을 어렵습니다. 그리고 다른 것에 영향을 줄 수 있다는 점을 알아야 합니다. 예로 사이바에 있는 것으로 글을 가릴다는 것 등이요.


하나팩스 : 회원가입시 무료로 팩스보내기 23번 -


 스킨의 HTML/CSS를 수정할 수 없는 다음블로그,네이버 블로그에서는 안되고 이글루스 블로그의 경우는 해보지 않아 모르겠습니다. 그럼 이 페이지 왼쪽과 오른쪽에 보이는 플로팅(떠다니는) 배너를 티스토리 블로그에 다는 것에 대해 적겠습니다. 참고로 플로팅 배너에 대한 강좌는 오드리햇반님의 강좌일텐테 익스플로러6은 고려하지 않았다고 합니다. 저라도 사람을 피곤하게 하고 고물인 익스플로러 6 같은 것은 전혀 고려하지 않겠어요.

싸이렌24 : 주민등록번호 사용막기 - 
 

고정된 배너 


고정된 배너 미리보기 : 아래 그림을 보듯이 이 페이지 오른쪽이 아닌 왼쪽에 고정된 배너를 보기 바랍니다. 스크롤바를 위나 아래로 해도 움직이지 않고 고정돼 페이지 어디가든  항상 보이게 됩니다. 전에 제가 보았던 것은 다음뷰 추천 버튼을 수정하는 것이어서 못했는데 제가 이번에 본 강좌에서는 다음뷰 버튼을 수정하는 것과 아무런 상관이 없어서 좋았습니다.

엔팩스 : 회원가입시 무료로 팩스보내기 11번 -
 

고정된 배너만들기 : 그럼 위와 같은 것을 어떻게 했느냐면 http://clason.tistory.com/167에서 배운 것입니다. 거기 강좌와  다르게 한 것은  구독버튼 등을 없애고 트위터 버튼구글 플러스원 버튼, 페이스북 좋아요 버튼을 삽입했습니다. 트위터 버튼은 http://kkid.tistory.com/68 을 보고 코드를 구했고, 좋아요 버튼을 다는 법은 http://clason.tistory.com/249 에서 볼 수 있습니다.  구글 플러스원 버튼인 경우는 http://www.google.com/intl/ko/webmasters/+1/button/index.html 에서 코드를 얻었습니다. 그런데 아래 그림을 보듯이 4개의 버튼간의 간격이 위 그림과 되어야 하는데 아래와 같이 간격이 없이  나와 수정이 필요하다고 생각했습니다.  


버튼간 간격 수정 : 그래서 아래 그림을 보듯이 <img src="./images/22.jpg"><br /> 을 버튼과 버튼의 사이에 집어 넣어 버튼의 간격을 일정하게 했습니다.  저의 구글 크롬13에서는 <br />만해도 됐으나 익스플로러8은  안돼 <img src="./images/22.jpg"><br /> 을 삽입해야 했습니다. 참고로 제가 전에는 크롬 12를 썼는데 어느새 13입니다. 제가 개발자 버전을 사용한 것이 아니고 정식버전을 사용했습니다. 

하나팩스 : 회원가입시 무료로 팩스보내기 23번 -
 

배너의 위치 : 배너의 위치는 설정하는데 저의 경우는 글영역이 740을 고려해서 왼쪽 가장자리에서 떨어진 거리인 margin-left를 아래처럼 설정했습니다. http://clason.tistory.com/167 설명을 보면 margin-left 부분이 브라우저 가장자리에서 얼마나 떨어질 것이냐 나타내므로 저는 -580으로 했습니다. 그리고 브라우저 위치는 top의 수치를 지정하므로 저는 아래 그림에서 보듯이 170으로 했습니다. 버튼을 둘러싼 폭은 저의 경우에는 63으로 했을때 가장 적절했습니다. 저의 블로그에 맞게 위치를 정한 것이니 여러분은 따라 하시는데 참고하시고 강좌는 반드시 http://clason.tistory.com/167 보시기 바랍니다. 참고로 위치는 자주 변할 수 있습니다.

싸이렌24 : 주민등록번호 사용막기 - 

움직이는 배너


움직이는 배너 미리보기및 만들기 : 위에서는 페이지에 고정되어 움직이지 않는 배너에 대해서 다루었습니다. 이번에는 페이지 오른쪽을 보듯이 스크롤을 움직이면 움직이면서 고정되는 배너를 티스토리 블로그에 설치하는 것에 대해 다룹니다. 저는 어떻게 만들었냐면 http://clason.tistory.com/171 에서 배웠습니다. 주의할 것은 광고있데 플로팅 배너는  애드센스의 경우는 안 된다는 것은 http://ok-dj.com/243 를 보시면 되고 리얼클릭은 됩니다. 혹시 블로그에서  다음뷰애드하신다면  http://nohji.com/1323 을 보세요. 참고로 제가 아이콘 등을 변경하면 아래와 같지 않을 수 있습니다. 

싸이렌24 : 주민등록번호 사용막기 - 
 

변경한 것 : 제가 변경한 것은 광고대신 아이콘을 사용했고 위치를 왼쪽이 아닌 오른쪽에 나타나게 했습니다. 그래서 아래 그림을 보듯이 배너의 위치를 설정에서 top(위)와 margin-left의 수치를 변화시켰습니다. 저는 아이콘을 http://www.freeiconsweb.com/ 에서 구했습니다. 


 - 싸이렌24 : 주민등록번호 사용막기 - 

익스플로러8과 파이어폭스5에서 : 익스플로러8에서는 아이콘을 클릭하면 링크에 테두리가 생겨서 그것을  없애기 위해서 아래 그림처럼 링크에 onfocus='blur()'를 추가해 점선 테두리가 생기지 않도록 했습니다. 아이콘에 마우스 가져가면 희미하게 된 것이 밝게 되는 것은 http://min-blog.tistory.com/191을 보시면 알 수 있습니다. 그리고 스크립트는 <body> 바로아래에 삽입하니 크롬13에서는 됐는데 익스플로러8에서는 나타나지 않아 스크립트를 </body> 위에 삽입했습니다. 잊은 것이 있는데 아이콘이 png여서 투명 png를 익스플로러8에서 완벽하지 않아 png를 jpg로 했고 위로 가는 것도 처음에는 #top으로 했더니 저의 파이어폭스5에서는 위로가기가 안돼 단지 #만 했습니다.

가비아 : XE(제로보드XE)자동설치,텍스트큐브 설치지원,그누보드 설치 지원 -
 
  • 이것은 티스토리 블로그에서만 된다고 생각하시지 말고 스킨의 HTML/CSS 수정이나 스크립트가 가능하면  XE(Xpress Engine,제로보드XE)과스트큐브(테터툴즈)로 만든 홈페이지나 블로그도 됩니다. 이런 플러그인이 티스토리에 있었으면 정말 좋지 않겠나요. 지금은 모르겠는데 XE(Xpress Engine,제로보드XE) 애드온인가 위젯에 플로팅 배너에 대한 것이 있었거든요. 참고로 저의 윈도우 7에서 익스플로러8,크롬13,파이어폭스5,오페라11,사파리5에서 보았더니 이상이 없었습니다. 
  • 다음블로그,네이버 블로그에서는 못합니다.
  • 화면이 작거나 해상도를 낮은 화면에서 플로팅 배너가 글을 가리는지 반드시 확인하세요. 플로팅 배너가 글의 내용을 가리는지 확인하는 것은 반드시 필요합니다.
  • 방금 알았는데 크롬13에서는 파일첨부에 이미지가 안 나타나고 목록도 안 되네요. 익스플로러에서는 파일첨부가 되더라고요. 무엇이 안 되면 익스플로러로 해 보시기 바랍니다. 그리고 자신의 블로그에 플로팅배너가 안 되면 http://clason.tistory.com/192를 보시기 바랍니다. 오드리햇반님이 수정한 것입니다.


'블로그' 관련된 글 MORE

  1. 이전 댓글 더보기
  2. BlogIcon At Information Technology 2011.08.05 09:54 신고  댓글주소  수정/삭제  댓글쓰기

    감사합니다. 주말에 플로팅 배너 달아부려야 겠습니다.^^

  3. BlogIcon 신기한별 2011.08.05 10:29 신고  댓글주소  수정/삭제  댓글쓰기

    백전백승님 블로그 방문하면서 설치하고 싶었던 건데 알려 주시니 감사합니다.
    조만간 적용해 봐야겠어요.

  4. BlogIcon CANTATA 2011.08.05 11:04 신고  댓글주소  수정/삭제  댓글쓰기

    이를 이용하면 그흔한 리얼클릭 플로팅 배너가 완성되네요.ㅎ
    저도 예전부터 달고있지만, CSS라는 것이 참 신기합니다... 이것저것 하다보면 볼수록;;

    • BlogIcon 백전백승 2011.08.05 11:28 신고  댓글주소  수정/삭제

      글에서 애드센스는 플로팅 배너가 안된다는 것을 글에서 보앗았습니다. 그것에 대한 글인 CANTATA님의 글도 추가해야 겠네요.
      혹시 애드센스가 리얼클릭의 플로팅 배너에 의해서 가리는 것은 애드센스 계정 비활성화되는지 물어보셨나요?

    • BlogIcon CANTATA 2011.08.05 12:34 신고  댓글주소  수정/삭제

      그것은 질문하지 않고 리스트에도 없었지만,
      애드센스는 보통 그 광고 위에 무언가를 올려놓고 가리고 짜르고 수정하고 하는 것들을 모두 정책에 의해서 금지하고있어요...
      더군다나 다른 광고를 플로팅으로 애드센스 위에 올린다면 당연히 안전하지않아보입니다.
      플로팅배너가 애드센스 광고 위에 있음으로서 그 배너 클릭을 하면서 실수로 애드센스를 클릭을하게 할 수도 있다는, 그런 클릭유도 방법의 일종으로 볼 수도 있겠죠...
      비활성화 될 것으로 판단됩니다.

  5. BlogIcon Seen 2011.08.05 11:46  댓글주소  수정/삭제  댓글쓰기

    저도 예전에 고정되고 떠다니는 배너 모두 사용했었는데
    어느새부턴가 무조껀 심플함을 우선시하면서 사용하지 않고 있네요. ^^;
    나중에 새로운 스킨 만들 때 한번 다시 시도해 봐야겠습니다. ㅋ
    오늘도 즐거운 하루되세요 백전백승님~!

    • BlogIcon 백전백승 2011.08.05 14:53 신고  댓글주소  수정/삭제

      저도 나중에는 심플함을 추구할 지 모르겠습니다. 스킨 등을 많이 수정한다면 심플함이 정답이겠네요. 스킨을 바꿀 경우라면 이것저것 블로그에 다는 것은 나중에 어려움으로 다가올 것 같아요.

  6. BlogIcon 도플파란 2011.08.05 14:02  댓글주소  수정/삭제  댓글쓰기

    ㅎㅎ 잘 보고 갑니다..ㅎㅎ

  7. BlogIcon SSUR BLOG 2011.08.05 14:14 신고  댓글주소  수정/삭제  댓글쓰기

    보고 따라하려고 해도 어렵네요..
    열심히 해봐야겠어요 ^^

  8. BlogIcon 로사아빠! 2011.08.05 15:55 신고  댓글주소  수정/삭제  댓글쓰기

    요렇게 하면 되겠군요.
    차근차근 따라서 한번 해봐야겠습니다.
    모르는거 있음 질문해도 되겠지요?^^

    • BlogIcon 백전백승 2011.08.05 18:24 신고  댓글주소  수정/삭제

      코딩에 대해한 것은 모르니 강좌를 쓰신 오드리햇반님에게도 물어보시고 로사아빠님의 스킨과 저의 스킨이 동일하니 물어봐도 상관없습니다.

  9. BlogIcon 사랑퐁퐁 2011.08.05 16:05 신고  댓글주소  수정/삭제  댓글쓰기

    오~ 좋은정보네요...
    설치하고 해겠네요...
    좋은정보 잘보구 갑니다..

  10. BlogIcon 샤프심 2011.08.05 16:31 신고  댓글주소  수정/삭제  댓글쓰기

    좋으팁입니다^^
    두가지를 적절히 사용하면 시선끌기도 좋고 유용할거 같습니다

  11. BlogIcon 오드리햇반 2011.08.05 17:26 신고  댓글주소  수정/삭제  댓글쓰기

    백전백승님~~~ 좀전에 rss로 다시 한번 글을 보다가 위치부분에서 수정이 필요할 것 같아서 또 글남겨요~~
    제 포스트에서도 처음 위치지정을 잘못했다가 나중에 추가포스팅으로 수정했거든요.
    CSS에 left:0%로 원점지정을 했을 때 브라우저 크기에 따라서 배너 위치가 다르게 보이거든요. 지금도 브라우저를 전체화면으로 보다가 크기를 줄이기만 해도 배너가 본문을 가리게 되구요.. 그래서 원점을 중앙(left:50%)으로 잡으시고 margin-left 수치를 -500쯤에서 적절히 조절하시면 될것 같아요..

  12. BlogIcon 아하라한 2011.08.05 17:49 신고  댓글주소  수정/삭제  댓글쓰기

    흐미 저는 아시다 시피....프로팅 배너 하나 사용하는데요...
    자꾸 본문을 가려서 어찌해야 할지 모르겠네요...ㅠㅠ

    • BlogIcon 백전백승 2011.08.05 18:27 신고  댓글주소  수정/삭제

      애드센스 광고를 가리면 애드센스를 하는 구글에서 태클이 들어올 것 같습니다.
      글을 가리니 다음뷰나 티스토리에서 뭐라고 할지 모르겠습니다. 예전에 모 글에서 읽은 것인데 배너가 글을 가리니 티스토리에 약관에 위배된다고 블로그 접근이 안돼게 했다고 합니다.

    • BlogIcon 백전백승 2011.08.05 23:06 신고  댓글주소  수정/삭제

      전 1280*800 해상도를 쓰는지라 글이 가리지 않는데 그 아래에 가릴 것 같은데 지저분하지 않을 정도면 나두어도 될 것도 같아요.

  13. BlogIcon +요롱이+ 2011.08.05 19:02 신고  댓글주소  수정/삭제  댓글쓰기

    오호 좋은 정보 감사합니다^^ 참고할께요!!

  14. BlogIcon 디셈버08 2011.08.05 19:21 신고  댓글주소  수정/삭제  댓글쓰기

    플로팅 배너 요즘 눈에 많이 띄더라구요

  15. BlogIcon 자기통치자 2011.08.05 19:37 신고  댓글주소  수정/삭제  댓글쓰기

    플로팅 배너 잘배워갑니다!!^^
    저도 꼭 시도해보려구요~!!
    감사합니다!!

  16. IPON 2011.08.05 19:54  댓글주소  수정/삭제  댓글쓰기

    좋은글 잘 읽었습니다.
    웹서핑을 할때 제일 짜증나는것이 움직이는 배너더군요. 특히 언론사들의 페이지들.
    그런 사이트에서는 집중을 할수가 없고 그래서 아주 빨리 떠나게 되지요.

  17. BlogIcon Zoom-in 2011.08.05 20:29 신고  댓글주소  수정/삭제  댓글쓰기

    앞으로 플로팅 배너 달린 블로그가 더 늘어나겠네요.

  18. BlogIcon 미스터브랜드 2011.08.06 21:16 신고  댓글주소  수정/삭제  댓글쓰기

    넘 예쁜데요. 저두 차근 차근 하나씩 따라해봐야겠습니다.

  19. BlogIcon 완더 2011.11.17 11:46 신고  댓글주소  수정/삭제  댓글쓰기

    저도 지금 시도해보고 있는데....추천한방 버튼이 에러네요...!!! 현재까지 고민중~

  20. BlogIcon 현대스위스김진욱 2011.11.29 11:35 신고  댓글주소  수정/삭제  댓글쓰기

    잘배우고 갑니다. 시간내서 따라해봐야겠어요~ ^^

  21. BlogIcon 선우화 2012.03.09 20:41 신고  댓글주소  수정/삭제  댓글쓰기

    안녕하세요.제가 티스토리 블로그 정착한지 얼마안됬는데요.
    제가 다음뷰온(추천버튼)을 만들려고하는데...
    추천횟수가 안뜨네요..어떻게 된거죠?
    article id도 제블로그로 완벽하게 바꿧는데 뭔 문제인거죠?
    소스도 블로그 주소만 바꿧는데 정상화되지않네요.
    고객센터에서는 티스토리,다음뷰는 문제없다는데 어떤문제인건가요?
    스킨문제인건가요?정말 궁금합니다.

    • BlogIcon 백전백승 2012.03.09 22:58 신고  댓글주소  수정/삭제

      스킨 문제는 아닐 것입니다. 저도 정확히 모르니 http://clason.tistory.com/167 강좌를 보고 그 강좌를 쓴 분께 물어보는 것도 좋을 것입니다. 선우화님의 의문점은 다음뷰나 티스토리에 묻는 것과 무관합니다.