Gomdori

[Tistory/티스토리] Adsense/Adfit 광고 고정 배너 Floating banner 만들기(움직이지 않는 사이드 배너) 본문

정보

[Tistory/티스토리] Adsense/Adfit 광고 고정 배너 Floating banner 만들기(움직이지 않는 사이드 배너)

Ghomdori 2020. 3. 28. 10:32

안녕하세요.

오늘은 움직이지 않는 배너 Floating banner

만드는 방법에 대한 포스팅을 작성하도록 하겠습니다.

 

해당 포스팅에 대한 내용은 오른쪽 / 왼쪽 사이드 배너에 애드센스(Adsense) / 애드핏(Adfit) 등에 적용시킬 수 있습니다.

티스토리(Tistory) 스킨편집에 가서 Html 편집에서 CSS로 들어갑니다.

그리고 아무대나 해당 코드를 삽입해줍니다.

.float_banner   {
    position:fixed;
    border:1px solid #cecece;
    height:auto;
    width:auto;
    margin-left:1500px;
    margin-top:50px;
    padding:0   
}

여기서 margin-left 는 왼쪽에서 얼마나 떨어지는 지를 정해줄 수 있습니다.

저같은 경우는 오른쪽 사이드배너로 활용하기 위해서 margin-left:1500px 를 주었습니다.

margin-top은 위에서 얼마나 떨어져 있는지를 서술합니다.

저는 50px만큼 떨어지게 설정하였습니다.

이렇게 Floating banner를 설정해주게 되면, 스크롤바를 움직여도 해당 배너는 고정되어 어느 순간이든

고정된 위치에서 화면에 노출됩니다.

이렇게 CSS 설정에 해당 소스를 추가하였으면, [HTML]탭으로 이동합니다.

그리고 표시하고 싶은 곳에 해당 내용을 추가하여 저장을 하면 끝입니다.

<div class="float_banner">
	여기에 Adsense 광고 소스코드 OR Adfit 광고 소스코드 OR 쿠팡파트너스 광고 소스 코드
</div>

이렇게 저장하고 나면

 이렇게 스크롤바를 움직여도 고정된 배너가 표시되는 것을 볼 수있습니다.

도움이 되셨다면, 하트버튼 눌러주시면 저에게 정말 큰 힘이 됩니다.

궁금한 점이 있으시다면, 댓글 달아주시면 알려드리도록 하겠습니다.

Comments