![[HTML/CSS] 티스토리 스크롤내려도 항상 보이는 반응형 플로팅 애드센스 광고 배너 만들기 / 양쪽 사이드바 추가 방법 / Book Club 스킨 / 수익 극대화](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbd5vOR%2FbtqFN3XiBQd%2FjfberhzRewZGdpWhE5C6jk%2Fimg.png)
이번에는 티스토리 블로그에 스크롤을 내려도 항상 애드센스 광고가 화면에 떠서 고정되어있는 플로팅 배너를 만들어볼 것이다.
현재 사용하고 있는 Book Club 스킨의 모습이다. 순정과 다른점이 있다면 스킨 설정에서 사이드바 위치가 좌측이라는점? 이건 개인차니 편한곳에 하면된다. 나는 일단 사이드바가 좌측에 있는걸 선호해서 좌측으로 바꾸고 시작하겠다.
글을 읽다보면 저 빨간 공간이 남아도는데 저기다 광고를 넣을 수 있지 않을까? 생각을 하다가 넣어보니까 별거 없더라. 그래서 그 방법을 공유하려고 한다!
1. 전체크기 늘이기
일단 현재 티스토리 컨텐츠 박스의 가로크기를 늘려야한다. 자 사실 좌측 슬라이드 밑에 광고 하나 다는건 크기 변경이 필요없다. 이미 사이드바 영역이 있기때문에 거기 밑에 새로 다는건 뭐 어렵지 않으니까, 그런데 기존 크기를 유지한 상태에서 광고가 하나 더들어면 div가 자리가 없어 계단식으로 깨지게된다. 그게 아니면 사이드바나 글이 나오는 컨텐츠 영역을 줄여야 하는데 그럼 가독성이 너무 없어진다. 그러므로 Full Size상태의 크기를 늘려주자.
자 먼저 관리자 페이지에서서 꾸미기 -> 스킨편집에 들어와서 1번 박스에 있는 html 편집을 눌러주자.
1. CSS 버튼을 눌러주자!
2. 그다음 Ctrl+F 키를 눌러 검색을 해주자.
3. 검색어는 1080이다. 1080px인것을 모두 조회해 1400px로 바꿔줄 것이다.
바꿔야할 부분은 저렇게 7군데다.(순정 스킨기준) 저 옆에 줄번호는 CSS 수정유무에 따라서 차이가 날 수 있다. 검색은 그냥 컨트롤+F눌러서 계속 검색하면 된다. 저 1080을 모두 1400px로 바꿔주자!
바꾸면 이런 모습이 된다. 일단 저장을 하자..!
처음에 비해 사이드 영역이 아주 넓어진것을 확인할 수 있다. 이제 저걸 조금 줄여서 우측에 광고를 넣을 자리를 만들꺼다.
2. 사이드영역 조정
자 잘보면 너비를 조정함으로써 저 사이드영역을 구분해주는 친구가 깨진것을 볼 수 있다 저친구를 바로잡아주자.
.layout-aside-left #container .content-wrap:before {
위 코드를 Ctrl+F를 이용해 CSS에서 찾아보자
저 margin-left 를 -256px에서 -455px로 바꿔주자! 이 값을 바꾸고 뭐가 바뀌는지보고 향후에 자기가 조정할 사람은 조정하면된다. 여기서 나온 가이드는 최소 블로그답게 보여주기 위한 셋팅이다.
자 이렇게 바꼈을 것이당
#container .content-wrap:before그 다음 위 코드를 한번 더 검색한다.
저 두 퍼센테이지를 바꿔줄 것이다. 잘 보면 저 두 비율의 합이 100%이고 보면 위에 것이 글이 나오는 컨텐츠 영영의 비율, 아래가 사이드바의 비율일 것으로 추측할 수 있다. 이건 무슨 코드냐면, 반응형으로 동작했을때 어떻게 도식할껀지에 대한 퍼센테이지 이다. 이걸 각각 70%, 30% 로 조정해준다. 이게 가장 자연스러웠던 것 같다.
모두 바꿨으면 적용을 누르자. 그리고 화면을 보면 아직 약간 이상할텐데 일단 계속 진행하면 된다.
3. 좌측 사이드바 너비 줄이기
#aside
맨 위에 커서를 대고 위 코드를 검색한다. 아마 아주 많이 검색될텐데 가장 첫번째로 검색되는 것을 고치면된다.
저 21.x %를 17%로 바꿔주자!
그리고 적용하고 화면을 확인해보자
뭔가 많이 좁아진 것을 알 수 있다. 그리고 가운데 수직선이 지나면서 화면이 깨져보이는데 이건 우측 슬라이드를 추가하면 괜찮아진다. 이제 우측 영역을 추가해보자!
4. 좌측 사이드바 광고 추가
이번엔 HTML 영역으로 이동하자.
<footer id="footer">
그리고 위 코드를 검색해주자.
그럼 이렇게 조회가 될껀데 저 빨간 네모박스 태그 사이에 아래 태그를 추가하자.
<!-- 2020-07-18 플로팅 배너 시작-->
<s_sidebar_element>
<div class="banner">
<div id="chase" style="top:0px;">
//여기에 애드센스 코드를 넣으세요!
</div>
</div>
</s_sidebar_element>
<!-- 2020-07-18 플로팅 배너 끝-->
나는 저기 코드에 "일치하는 컨텐츠 광고" 를 넣었다.
뭐 추가하면 이런모슥이 될 것이다. 안에 광고코드는 본인들꺼를 넣으면 된다.
5. 우측 사이드바 광고 추가
<div class="content-wrap">
HTML에서 위 코드를 검색하자
이런식으로 검색이 될껀데 우린 저 빨간 상자안에 있는 태그 사이에 코드를 넣을꺼다.
<!-- 오른쪽 사이드바 시작-->
<aside id="asideRight" class="asideRight">
<div id="chaseRight" style="top:0px;">
<div class="sidebar-1">
//광고 1
</div>
<div class="sidebar-1">
//광고 2
</div>
<div class="sidebar-1">
//광고 3
</div>
</div>
</aside>
<!-- 오른쪽 사이드바 끝 -->
이런식으로 복붙한다. 만약 길게 배너 하나만 붙일꺼면 광고 1 div 태그만 사용하고 나머지 광고2, 광고3 div 뭉텅이는 지우면된다. 나는 길쭉한 배터는 좌측에 있음으로, 작은 배너 여러개를 노출시킬 것이다.
6. 우측 슬라이드 CSS 추가
CSS로 이동을 해주자. 그리고 맨 마지막줄로 내려가 아래 코드를 추가해주자
/** 오른쪽 배너 CSS **/
@media (max-width: 1400px){
#asideRight { display : none;}
}
#asideRight {
float: right;
margin-left: 0;
padding: 80px 20px;
height:100%;
width: 160px;
}
머 이정도가 될 것이다. 한번 적용을 해보자!
7. 상단 고정 스크립트 삽입
</style>html에서 위 코드를 검색하자
저기 검색될텐데 저 style 끝 태그와 head 끝 태그 사이에 코드를 하나 넣어주자.
<!-- 2020-07-18 플로팅 배너 시작-->
<script type="text/javascript">
$(window).scroll(function(event){
if(jQuery(window).scrollTop() > jQuery(".banner").offset().top) {
jQuery("#chase").css("position", "fixed");
}
else if((jQuery(window).scrollTop() < jQuery(".banner").offset().top)) {
jQuery("#chase").css("position", "static");
}
});
</script>
<!-- 2020-07-18 플로팅 배너 끝-->
<!-- 2020-07-18 플로팅 배너 시작 : 오른쪽 배너-->
<script type="text/javascript">
$(window).scroll(function(event){
if(jQuery(window).scrollTop() > jQuery(".asideRight").offset().top) {
jQuery("#chaseRight").css("position", "fixed");
}
else if((jQuery(window).scrollTop() < jQuery(".asideRight").offset().top)) {
jQuery("#chaseRight").css("position", "static");
}
});
</script>
<!-- 2020-07-18 플로팅 배너 끝 오른쪽 배너-->위코드가 이제 스크롤을 내려도 상단에 떠있게 하는 친구다
그럼 대략 이런 모습으로 들어간다. 이것도 적용을 해보자!
8. 기타 마감작업
#content {CSS에서 위 코드를 검색해주자.
이 친구가 보일텐데 값을 바꿔주자.
#content {
float: left;
width: 68%;
padding: 72px 15px 0 60px;
box-sizing: border-box;
}이코드는 화면이 뛰틀리는걸 잡아주는 설정이다. 이제 적용하고 확인!
9. 최종 검수
자 이제 스크롤을 내려도 좌우로 광고가 따라붙게 된다 ㅎㅎ
자 창크기를 줄이면 자동으로 우측 배너가 없어지게 된다. 거기서 더 줄이면 최종적으로 좌측 배너도 사라지게 되면서 반응형 웹이 만들어진다 ㅎㅎ
궁금한게 있으면 댓글 남겨주세요
[HTML/CSS] 티스토리 스크롤내려도 항상 보이는 반응형 플로팅 애드센스 광고 배너 만들기 / 양쪽 사이드바 추가 방법 / Book Club 스킨 / 수익 극대화
#HTML #CSS #티스토리 #스크롤 #내려도 #항상 #보이게 #반응형 #플로팅 #애드센스 #광고 #배너 #만들기 #하는법 #방법 #양쪽 #사이드바 #모듈 #추가 #BookClub #스킨 #편집 #수익 #극대화