반응형
계속 플로팅 배너를 수정하고 있으니 아래 글에 문제점을 발견할 수 있을 것입니다. 그런 것에 유의하여 보기 바랍니다.
스킨수정시 스킨저장은 반드시 필요 : 저의 블로그에 양쪽에 보이는 것이 플로팅(떠다니는) 배너에 입니다. 이것을 어떻게 했는지 설명드리겠습니다. 스크립트와 CSS를 해야 하는 것이라 어려울 것 같습니다. 이것만이 아닌 티스토리 블로그에서 스킨 수정전에 반드시 해야 할 것은 스킨 저장을 반드시 해야 합니다. 나중에 망친 블로그를 보고 속상하고 싶지 않다면 예외없이 무조건 스킨을 저장하세요. 만약에 스킨저장한 것이 없어서 블로그를망쳤다면 저는 처음부터 하라고 말하고 싶습니다. 다른 방법에 대해서는 전혀 모르거든요. 혹시 HTML이나 CSS를 잘 아니 스킨을 저장할 필요없겠다라고 하신다면 그것은 고생할 길입니다. 스킨 수정전에는 반드시 스킨을 저장합니다. 전에도 얘기했듯이 스킨수정으로 블로그를 망치면 저는 책임을 안 집니다. 참고로 스킨을 많이 변경하고 블로그 배경이 있다면 이 글을 하는 것을 어렵습니다. 그리고 다른 것에 영향을 줄 수 있다는 점을 알아야 합니다. 예로 사이바에 있는 것으로 글을 가릴다는 것 등이요.
- 하나팩스 : 회원가입시 무료로 팩스보내기 23번 -
- 싸이렌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/ 에서 구했습니다.
익스플로러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를 보시기 바랍니다. 오드리햇반님이 수정한 것입니다.
'블로그' 카테고리의 다른 글
| 댓글을 쓴 사람을 대강 알 수 있습니다. (41) | 2011.09.09 |
|---|---|
| 댓글에 적은 주소는 바르게 적은 것일까? (37) | 2011.09.05 |
| 네이버 소셜앱스를 보면서 느끼는 점 (30) | 2011.08.24 |
| 떠다니는(플로팅) 배너, 사용시 고려해야 할 것 (48) | 2011.08.09 |
| 대부분의 스킨에서는 간단히 폰트 설정을 할 수 없다 (42) | 2011.07.12 |
| 에디터는 오직 하나만? (26) | 2011.07.07 |
| 안드로이드OS 버전에 따라 사진첨부 결정한다 (30) | 2011.07.06 |
| 나눔고딕,스킨폰트를 나눔고딕으로 해보자 (29) | 2011.07.05 |
