블로그 하단 "카테고리의 다른글" 옆에 광고 넣기

블로그 하단 "카테고리 다른글" 옆에 광고 넣기

오랜만에 스킨을 아주 조금 만졌습니다. 
블로그 포스트 하단에 있는 "카테고리의 다른글" 옆에 애드센스 광고를 삽입하는 작업이었죠!

바로 요렇게요!

그런데 몇몇 이웃분들께서 카테고리 옆에 광고를 삽입하는 방법을 문의해오셔서
간단하게 방법을 설명하도록 하겠습니다.

이미 많은 분들이 블로그 하단 정리, 광고정리라는 제목으로 해서 방법을 올려놔서
다 알것이라는 예측이었으나 모양이 약간 다르다는 점에서 용기를 가지고 글을 올립니다. ^^

카테고리 옆에 광고글을 삽입하는 방법은 숟가락 하나님의 블로그 하단 정리하기와 위즈군님의 CSS로 티스토리 추천버튼 정렬하기!를 참조하였습니다.

 

이미 알려진 블로그 하단 정리방법들

 

위즈군(http://wiz.pe.kr/544)님 블로그에서 소개

위즈군님 블로그에서 소개

숟가락 하나님 블로그에서 소개(http://spoon1.tistory.com/159)

비슷비슷한데 모두들 추천버튼과 연관된 내용들입니다.

 

'카테고리 다른글' 옆에 광고 또는 배너넣기

이제 본론으로 들어가서 애드센스 광고를 글목록옆으로 넣는 방법을 설명하도록 하겠습니다. 이 방법을 적용하기 위해서는 글목록의 높이와 광고의 높이가 맞아야 보기가 좋습니다. 그래서 몇가지 준비를 해야 합니다.

사전준비 하기

1. 200 x 200 사이즈의 애드센스 광고 준비
2. 티스토리 플러그인 - 카테고리 글 더보기에서 목록 갯수를 6개로 설정

이제 아래와 같은 모양으로 꾸며보도록 하겠습니다.

케이가 꾸민 결과

style.css 수정

style.css의 제일 하단에 아래 소스를 추가합니다.

div.adsense200 {clear:none;width:210px !important;}
div.adsense200 tr {line-height:14px; height:14px;}
div.another_category {display:inline;float:right;clear:both;text-align:left;width:390px !important;overflow:hidden !important; margin-top:0px; border-right:1px solid #c3c9e0;}
div.another_category tr {line-height:20px; height:17px;}

위의 빨강색으로 표시된 line-height:20px 은 카테고리 글목록의 줄간격입니다. 광고와 잘 맞지 않는 경우 적당하게 조절해서 맞추면 됩니다. 소스를 요청하시는 분들이 계서서 소스첨부합니다.

style_src.txt

skin.html 수정

skin.html에서 ##_article_rep_desc_## 을 찾아서 그 아래에 애드센스 코드를 삽입하면 됩니다. (아래참조)

<div id="adsense200">
   200 x 200  사이즈의 애드센스 광고 코드를 여기에 삽입 
</div>

끝입니다.

- 티스토리 블로그꾸미기 - 메뉴,사이드바,리스트,애드센스등