고래 스킨 4.0에서 커스텀 설정한 부분은 이렇습니다.
좌측에 쿠팡 2개, 세로 형태로 긴 카카오애드 핏 광고 1개가 플로팅 모듈(고정 광고)입니다.
스크롤할 때에도 좌측에 계속 보이게 됩니다. 모바일상에서는 보이질 않습니다.
하단의 이미지에서 보면 노란색으로 체크되어있는 영역입니다.
여기서 팁을 드리자면 플로팅 모듈은 여러 개를 만들 수도 있다는 것입니다.
쿠팡 광고를 서로 가까이 배치해서 산만하지 않게 광고효과를 조금 더 주고자 했습니다.
플로팅 모듈, 고정 광고 삽입 (HTML 수정)
플로팅 모듈은 자신의 블로그 <head>, </head> 사이에 넣어주면 됩니다.
넣어보고 LEFT, TOP 값 등을 수정해서 자신의 블로그에서 보기 좋은 위치로 조절해 주면 됩니다.
그 후 광고 태그를 넣어줍니다.
<!-- 플로팅 모듈 시작 -->
<A style="POSITION: fixed; MARGIN-LEFT: -756px; TOP: 10px; LEFT: 50%;">
<table style="background-color:#f9f9f9; border:0px solid #336699; width:160px;">
<!-- 광고 시작 -->
이곳에 자신의 광고 태그를 넣어준다.
<!-- 광고 끝 -->
</table>
</A>
<!-- 플로팅 모듈 끝 -->
사이드바를 고정하는 법 (CSS 수정)
우측에 핑크색 영역의 사이드바는 스크롤 시 움직이는데 카테고리 부분은 스크롤에서 넘어가고 광고가 시작되는 지점에서 스크롤이 멈추며 광고와 하단에 블로그 인기글을 보여주게 됩니다.
광고와 더불어 블로그 인기글이 보이니까 광고를 볼 수도 있고 블로그의 다른 글로도 유도할 수 있겠다고 생각됩니다.
사이드바를 고정하려면 CSS를 수정해야 합니다.
#container #main #sidebar {
margin-left: 15px;
max-width: 300px;
align-self: flex-start;
top: -30rem;
flex:1;
position: sticky;
position: -webkit-sticky;
}
"top: -30rem;" 값을 조절해서 "-"값을 줘야 카테고리 메뉴가 끝난 후 광고가 보이게 됩니다. 이 수치를 조절해서 본인의 블로그에서 적절하게 표시되도록 조절하면 됩니다.
모바일 화면에서 썸네일 이미지 크기 키우기
고래스킨 기본 설정에서 모바일 화면 전환 시 썸네일 이미지가 너무 작아서 보기 좋지 않았었습니다. 썸네일 이미지 크기를 조절하려면 CSS 부분에서 아래 문구를 찾아서 width와 height 값을 수정해 주어야 합니다.
@media only screen and (max-width: 600px) {
.thumnail img {
width: 90px;
height: 90px
}저는 위 처럼 90px로 수정해 주었습니다.
썸네일 이미지가 커지니 발란스가 맞아 보기가 좋습니다.
