일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
- 추천인
- 행운퀴즈정답
- 오늘의퀴즈
- 오퀴즈
- 캐슬
- 토스정답
- Android
- 행운퀴즈
- 이벤트
- 오퀴즈정답
- 초성퀴즈정답
- 캐시워크
- ㄹㅂㅁㅇㅌ
- 자바
- 리브메이트
- 행퀴
- 퀴즈
- 토스
- 톹
- 캐웤
- 비트코인
- 캐시슬라이드
- 돈버는퀴즈
- spring게시판
- 정답
- 안드로이드
- java
- 초성퀴즈
- 캐시워크정답
- TOSS
- Today
- 252,060
- Total
- 18,363,256
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>
이렇게 저장하고 나면
이렇게 스크롤바를 움직여도 고정된 배너가 표시되는 것을 볼 수있습니다.
도움이 되셨다면, 하트버튼 눌러주시면 저에게 정말 큰 힘이 됩니다.
궁금한 점이 있으시다면, 댓글 달아주시면 알려드리도록 하겠습니다.
'정보' 카테고리의 다른 글
LG전자 브랜드위크(Brand Week) 최대 40% 즉시할인 무이자 혜택까지 (0) | 2020.04.13 |
---|---|
[SAMSUNG] 삼성 브랜드위크 최대 40% 할인 무이자 할인혜택까지 (0) | 2020.04.06 |
[Apple Brand Week] 아이폰/아이패드/아이맥/맥북 최대 24개월 할부 및 30만원 할인 (0) | 2020.03.26 |
코로나 19 경기도민 재난기본소득 1인당 10만원씩 지급 (0) | 2020.03.24 |
[꿀팁] 에브리타임(에타) 접근제한 정지 푸는방법!!(기간 확인) (2853) | 2020.03.07 |