로그인

검색

Extra Form
추천지수 6

애드센스와 카카오 애드핏의 경우 사이드 고정위치에 fixed로 위치하는 플로팅 배너가 허용이 됩니다. 두 광고 서비스는 예전에는 비허용이었으나 현재는 금지사항 항목에서 사라져서 금지하지 않고 있습니다.

 

저희 라이믹스 팁 사이트 PC 우측에 고정된 위치에 스크롤을 내려도 광고는 계속 보이는 플로팅은 아주 간단하게 구현이 됩니다.

 

 

<div class="float_right">
<div style="position:fixed;">
광고코드
</div>
</div>

 

 

CSS에 

 

.float_right {
    position: absolute;
    top: 8px;
    right: 0;
    box-sizing: border-box;
    width: 160px;
    height: 600px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16), 0 1px 2px rgba(0, 0, 0, 0.23);
    margin-right: -170px;
}

 

 

고정되는 높이,광고의 폭,높이에 따라서 수치는 적당히 조정하시면 됩니다.

Who's 꿀팁관리소장

profile
라이믹스로 커뮤니티 사이트를 운영하는 비개발자 운영자 입니다.
파트너쉽 맺으실 사이트 운영자분 환영합니다.
3 추천
  • 웅돌프 2020.08.09 13:58
    정말 필요해서 찾던건데 감사합니다.
  • profile
    꿀팁관리소장 2020.08.09 14:49
    To.웅돌프
    도움이 되신다니 다해이네요^^
  • 웅돌프 2020.08.09 18:16
    질문이 있습니다.

    위 코드로 따라 했는데요.


    라이믹스 꿀팁 사이트는 창을 줄여도 배너가 본문을 가리지 않는데요.

    적용한 저에 사이트에 경우 창을 줄이게 되면 배너가 본문을 가리게 됩니다.


    추가해야 하는 코드가 있을까요?

  • profile
    꿀팁관리소장 2020.08.09 18:40
    To.웅돌프
    창을 줄인다는게 어떤 의미인지 잘 모르겠네요. 그리고 배너를 사이드에 배치 해서 본문을 가리지는 않을텐데요.
    사이트 방문해 봐도 별 문제점을 못찾겠습니다.
  • 웅돌프 2020.08.09 18:58
    To.꿀팁관리소장
    크롬 브라우저를 전체창으로 했을때는 배너위치가 우측에 올바르게 있는데
    브라우저 창 사이즈를 줄이게 되면 본문을 가리게 되더라구요.

    아마 박스가 배경색이랑 맞지 않아서 지웠는데.. 그것 때문일수도 있겠네요.

    일단은 임시조치로

    <!-- 본문가리지 않는 플로팅배너 모듈 -->
    <A style="POSITION: fixed; MARGIN-LEFT: -600px; TOP: 175px; LEFT: 50%;">
    <table style="border:0px width:120px;">
    <tr><td>
    게재할 광고 스크립트 여기에 넣으세요
    </td></tr></table>
    </A>
    <!-- 모듈 끝 -->

    이렇게 완료 했습니다.
  • profile
    꿀팁관리소장 2020.08.09 19:00
    To.웅돌프
    본문쪽을 가린다면 뭔가 이상한거구요. 그 상태로 보여주셔야 뭐가 문제인지 확인이 가능할 것 같네요.

    지금 적용하신건 엘리먼트도 a 태그를 사용하고 좀 뭔가 많이 이상하네요.
    뭐 보이는거만 제대로 보이면 상관은 없긴 하지만요.


    table 속에 넣을 필요도 없구요.



    저희 사이트를 기준으로 보시면


    헤더

    콘텐츠영역

    우측광고(플로팅영역)

    푸터


    이런 위치에 소스를 넣었습니다. 소스의 위치도 나름 영향을 줍니다.

  • 웅돌프 2020.08.09 19:47
    To.꿀팁관리소장
    레이아웃 -> 편집 -> html 쪽에 넣었는데
    혹시 이게 문제였을까요?
  • profile
    꿀팁관리소장 2020.08.09 19:49
    To.웅돌프
    그건 상관 없지만 좋지 않은 습관입니다.
    파일 자체를 수정하시는 습관을 가지셔야 합니다.

    제가 보기엔 제가 위에 댓글 달아드린 소스 위치에 넣으셨다면 문제가 없이 잘 되어야 할 것 같습니다.
    더쿠나 다른 사이트도 플로팅 구현할때 저희와 같이 간단하게 구현합니다.
  • profile
    꿀팁관리소장 2020.08.09 20:07
    To.웅돌프
    그리고 지금 레이아웃을 반응형으로 쓰고 계시는데 크기가 작은 창에서는 보이지 않도록 css에서 따로 처리를 한게 아니라면 모바일에서는 아예 코드가 동작하지 않도록 처리를 해주는게 좋습니다.

    광고 엘리먼트에 cond="!Mobile::isMobileCheckByAgent()" 의 조건을 추가해 주면 모바일 단말기에서는 보이지 않습니다.

    PC에서 창을 일부러 좁혀서 문제가 생기는 것 까지 고려할 필요는 없을 것 같구요.

    이 댓글은 참고적으로 알려드리는 댓글이며 반응형을 사용할때 PC에서 보여지는게 모바일에서는 보이지 않도록 처리하는 것도 필요합니다.
  • s
    saho14 2022.01.18 09:04

    소장님 양측에 배너를 달았는데 모바일에서 보면 배너가 글목록과 겹쳐지는 현상이 생겼는데

    모바일 스킨설정에서 변경해야할 점이 있나요??? (스케치북을 사용하고 있습니다)

  • profile
    꿀팁관리소장 2022.01.18 09:09
    To.saho14
    아니요. 가로 사이즈를 정하지 않고 위치를 고정하기는 어렵습니다.

사이트로 수익내기(48)

사이트로 수익을 내는 방법에 관한 이야기를 다룹니다.

  1. read more
  2. Read More
  3. Read More
  4. Read More
  5. Read More
  6. Read More
  7. Read More
  8. Read More
  9. Read More
Prev 1 2 3 Next
/ 3