본문을 안곂치게
언젠가 플로팅 광고에대하여 포스팅을 한적이 있습니다. 그때 적었던 내용은 플로팅광고를 픽셀로 지정을 하여 해상도가 좋은 모니터에서는 블로그본문이나 사이드바에 곂치지 않으나 해상도가 떨어지는 모니터에서는 곂쳐서 보일수 있는 위험성이 있었습니다. 그래서 이번에는 어떠한 해상도의 모니터에서도 본문이나 사이드바에 같이 곂쳐보이지 않게 하는 플로팅광고 소스를 올립니다.
* 주의 - 플로팅광고는 설치를할실때 항상 조심해야하며 본문을 가려서는 절대 안됩니다. 티스토리의 정책위반이며 애드센스 광고를 가리게 된다면 애드센스 위반입니다. 또한 광고 업체측으로 부터 플로팅 광고를 달아도 되는지 꼭 확인하시고 설치하시길 바랍니다. 허용이 된는곳도있고 x표를 달아야 되는곳도 있으며 플로팅자체가 안되는것도 있으니 꼭확인하시고 설치하시길 바라며 절대 본문을 가리거나 사이드바를 가리게 설치하시면 너무 위험한 행동이니 하지 마시길 바랍니다.
위에 첨부해놓은 파일이 플로팅광고 소스이며 위의 소스를 HTML의 style.css 쪽에다가 넣습니다. 저는 나중에 알아보기 쉽게하기위하여 가장아래부분에 넣어 놓았습니다.
위의 소스코드는 광고 소스를 넣는 코드입니다. 다운받으셔서 열게되면은 "광고소스"라고 적힌부분에 광고 소스를 넣습니다. 그리고 사이드바 메뉴로 가셔서 HTML배너출력을합니다. 거기에 붙여 넣어주시면 완료가 됩니다.
소스 넣는 부분은 여기까지며 위치수정에 대해 알아보겠습니다.
저의 모니터인 1600 * 900 해상도의 모니터입니다. 보시면 우측에 플로팅 광고가 떠있는 모습이 보입니다. 저상태에서 우측에서 더이상좌측으로는 넘어오지 않습니다. 이것은 위에 소스에 보시면 padding:-right: -670px; 이부분이 있습니다. 즉 모든 모니터의 중앙을 중심으로 오른쪽으로 몇 픽셀을 떨어지게 할건지 입니다. 그말은 아무리 낮은 해상도에서도 그모니터의 가운데를 중심으로 잡아서 우측으로 밀어내기때문에 낮은해상도에서는 아예보이지가 않게됩니다. 그리고 top:25%; 이부분은 모니터의 상단부분에서 몇퍼센트를 띄울건지입니다. 여기는 픽셀로 지정하시지 마시고 위처럼 퍼센트로 지정하시는게 훨씬좋습니다.
지금 위에 스샷은 가로를 요즘에 거의 찾아보기힘든 1024px 모니터로 줄인 모습입니다. 보시면 아시겠지만 광고가 보이지 않습니다. 아래부분에 우측으로 이동할수있어서 우측으로 당기면 있을거라고 생각하시지만 우측으로 당겨도 나오지 않습니다. 모니터의 해상도가 광고가 표시될수있는 총 픽셀에 못미쳐서 아예나오지가 않는겁니다.
이런식으로 플로팅을 설치하시면되시고 설치하시기전에 항상 제가 위에 적어놓았듯이 어디 부분에 위반사항이 있는건아닌지 꼭 확인하시고 설치하시길 바랍니다.
감사합니다.
'〃 IT > 〃 블로그정보' 카테고리의 다른 글
하루가 지나다시 네이버 검색누락된 글들 (2) | 2014.03.14 |
---|---|
블로그 사이드바에 트위터 위젯달기 (0) | 2014.02.25 |
티스토리 블로그에 페이스북 댓글창을 만들어봅시다. (0) | 2014.02.24 |