제가 지금 사용하고 있는 스킨은 어포스트님의 반응형 2단 보더리스 스킨입니다. 무료로 배포되고 있는 스킨 중 가장 심플하고 이쁘다고 생각합니다. 스킨을 적용한 후에 글 상단과 사이드바에 애드센스 광고를 추가했습니다. 아직 수익은 전혀 없습니다. 글 주제가 주제인지라 페이지뷰가 100도 안 나오고 있습니다.
포기하지 않고 방문자가 많은 개발 블로그를 분석하면서 벤치마킹을 하고 있습니다. 글보다 스킨을 분석하는 게 더 재미있는데 그중에 JB Factory의 유료 스킨이 너무 예쁘더라고요. 특히 블로그 첫 화면과 글 페이지의 깔끔함이 너무 마음에 들었습니다. 하지만 수익이 없는 상태에서 블로그 스킨에 돈을 투자하기 아까워서 내 스킨은 내가 고친다!라는 생각으로 공부 중입니다.
그러다가 친절한 효자손님이 무료로 배포한 친효코드를 받았는데 거기 인피드 광고 코드가 있었습니다. 저도 다른 블로그 돌아보면서 인피드 광고를 삽입하고 싶다고 생각하던 찰나여서, 바로 제 스킨에 관련 코드를 추가했습니다.
인피드 광고 삽입 방법은 다음과 같습니다.
1. 애드센스에서 인피드 광고 유형 만들기
저는 구글 시스템에서 추천하는 스타일로 만들었습니다.
2. 스킨의 index.html 파일 수정하기
<head>~</head> 태그 내에 다음 코드를 추가합니다.
<script>
var Infeed = 0;
var InfeedAdSenseShow = 0; // 사용여부 (0:적용, 1:미적용)
var InfeedAdSenseInsert = 5; // 목록 몇개에 광고 표시할건지
var InfeedAdSense = '<ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout="image-side" data-ad-layout-key="-g3-p+2v-ip+xc" data-ad-client="" data-ad-slot=""></ins>';
</script>InfeedAdSense의 ''안의 내용은 아래의 사진에서 빨간색 박스로 되어있는 부분, <ins>~</ins> 내용을 복붙 합니다.
그리고 <s_index_article_rep>~</s_index_article_rep>의 뒷부분에 다음 코드를 추가합니다.
<script>
if (InfeedAdSenseShow) {
Infeed++;
if (Infeed % InfeedAdSenseInsert == 0) {
document.write(InfeedAdSense);
(adsbygoogle = window.adsbygoogle || []).push({});
document.write("<hr style='padding: 0; margin: 0; height: 1px; border: 0 none; color: #f5f5f5; background-color: #f5f5f5;'>");
}
}
</script>
그리고 코드를 적용합니다.
인피드 광고가 잘 삽입된 걸 확인할 수 있습니다.
다들 수익이 거의 안 난다고 하지만 뭔가 저는 수익이 안나는 광고 위치가 제일 마음에 들더라고요ㅠㅠ
수익도 중요하지만 글을 읽을 때 가독성이 더 중요하다고 생각해서, 거슬리지 않는 위치에 달려고 노력중입니다.
이걸 변경하면서 인덱스 페이지의 글 목록 스타일을 변경하려면 s_index_article_rep의 class 스타일을 변경해야 한다는 걸 알게 됐습니다. 스킨에서 글 목록의 크기가 너무 커서 margin인지 padding인지 모르겠지만 높이를 조금 줄이고 싶었어서 바로 변경했습니다.
위 코드는 제 스킨 코드인데요. 보시면 s_index_article_rep의 class가 post-item으로 되어있는 걸 확인할 수 있습니다. 바로 CSS로 넘어가서 post-item을 검색합니다.
post-item 위아래 공백을 줄이기 위해서 padding을 고쳤습니다. 원래 apost님이 배포한 코드에는 padding: 30px 0;으로 되어있는데 30px를 10px로 고쳤습니다.
스킨 변경은 날 잡고 하기보다는 그냥 그때그때 수정하고 있는데요, 어느 정도 파악하고 나면 첫 화면도 이쁘게 변경해보고 싶습니다.
잘못된 내용이 있다면 언제든지 댓글이나 메일로 알려주시면 감사하겠습니다.
이 포스팅이 도움이 되었다면 공감 부탁드립니다.
궁금한 점은 언제든지 댓글 남겨주시면 답변해드리겠습니다:D
'interest > BLOG' 카테고리의 다른 글
| 애드센스 핀번호 2번의 재발급, 주소 변경 (3) | 2020.10.09 |
|---|---|
| 파워포인트로 티스토리 블로그 썸네일 만들기(.ppt 파일 첨부) (0) | 2020.10.05 |
| 티스토리 글 삭제, 웹마스터 도구에 반영하기 (12) | 2020.05.20 |
| 크롬 광고 차단, Adblock 사용기 (1) | 2020.04.10 |
| 애드포스트 6개월 리뷰 (1) | 2020.02.14 |
