친효애드온 : 티스토리 본문 오른쪽(우측) 상단 애드센스 1개 광고 넣기
이 애드온은 티스토리 본문의 상단 오른쪽에만 위치하는 1개짜리 애드센스 광고를 삽입하기 위해 만들었습니다. 본문의 우측 상단에만 자리를 잡습니다. 모바일 해상도에서는 200px X 200px 사이즈로 출력이 됩니다. 가로 해상도 768px 이상에서는 300px X 250px 사이즈로 출력이 되며, 가로 1000px 해상도 이상 부터는 336px X 280px 사이즈로 출력 됩니다. 사이즈는 변해도 위치는 늘 본문 우측에만 자리를 잡습니다.
애드센스 코드 세팅
코딩을 간소화 했습니다. 불필요한 스크립트를 최대한 빼고 애드센스 순정 코드만 그대로 사용함으로서 편의성을 높였습니다. 먼저 아래의 첨부파일을 다운로드 받습니다.
친효애드온 - 본문 상단 오른쪽 1개 반응형 애드센스.txt
다운을 받으시고 열어보시면 아래와 같은 코드가 들어 있습니다.
<div class="rgyTopRightAD">
<style type="text/css">
.rgyTopRightAD {
float: right;
width: 200px;
height: 200px;
margin: 0 5px 10px 5px;
}
@media (min-width: 768px) {
.rgyTopRightAD {
width: 300px;
height: 250px;
}
}
@media (min-width: 1000px) {
.rgyTopRightAD {
width: 336px;
height: 280px;
}
}
</style>
<!--여기에 애드센스 코드를 넣으세요-->
</div>
여기에서 빨간색으로 주석 처리가 되어 있는 부분을 지우시고 오리지널 애드센스 광고 코드를 그대로 붙여넣기를 해주시면 됩니다. 그리고 첨부파일의 전체 코드를 복사합니다.
세팅된 코드 삽입하기
세팅된 코드는 티스토리 플러그인에 있는 구글 애드센스 (반응형) 플러그인에서 사용하시면 됩니다. 먼저 플러그인을 찾습니다.
그리고 상단 광고가 활성화되는 위의 두 가지 형식 중 원하시는 것으로 선택하시고 아래의 글 상단에 넣을 반응형 광고 코드를 붙여넣으세요 칸에 그대로 붙여넣기를 하시고 저장하시면 됩니다.
정상적인 노출 예시
코드가 정상적으로 동작하는 경우는 아래와 같습니다. 모바일 (스마트폰) 해상도와 태블릿, 그리고 PC에서 보여지는 예시를 친효스킨의 경우에서 스크린샷 해봤습니다. 참고해 주시기 바랍니다.
먼저 모바일 해상도에서의 모습 입니다. 200 X 200 사이즈로 본문 우측 상단에 정상 노출 되고 있습니다.
가로 768px 이상부터 1000px 미만까지의 해상도에서 출력되는 모습 입니다. 애드센스 사이즈는 300 X 250 입니다.
마지막으로 가로 1000px 이상의 해상도에서 출력되는 모습 입니다. 사이즈는 336 X 280 사이즈 입니다.
티스토리 플러그인에서 테스트를 진행하였고 원하는 해상도에서 정상적으로 노출이 되고 있으니 타스킨에서도 정상적으로 동작할 것 입니다. 한번 사용해 보시기 바랍니다. 기타 문의사항은 댓글로 남겨주세요. 그리고 과도한 광고는 오히려 독입니다. 콘텐츠 퀄리티를 최대한 살리시면 광고 수익은 알아서 올라갈 것 입니다. 끝.
"친절한효자손 취미생활" 을 검색!
