[블로그만들기]카테고리의 다른 글’ 옆에 애드센스 광고를 삽입

[블로그만들기]카테고리의 다른 글’ 옆에 애드센스 광고를 삽입

티스토리 블로그 포스트 하단에 있는 ‘카테고리의 다른 글’ 옆에 애드센스 광고를 삽입해봤습니다.

‘카테고리의 다른 글’ 옆의 적당한 애드센스 광고사이즈는 200×200정도 인 것 같습니다. 마침 이전의 카테고리 다른 글을 손보면서 날짜부분을 없애버린 터라 여백도 남고 해서 크게 시간들일 필요 없이 광고를 삽입했습니다.

 

1. style.css 편집

티스토리 블로그의 관리자 페이지에서 [꾸미기]➔[스킨]➔[HTML/CSS 편집]으로 가서 Style.css 편집탭의 맨 하단에 아래의 소스를 추가합니다.

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

 

자신의 스킨에 따라서 몇가지를 설정해야 합니다.

➔ 셋째 줄 width:395px 부분은 ‘카테고리 다른 글'의 가로 사이즈입니다. 자신의 본문 가로 폭에 따라 애드센스 광고가 밀려버리기 때문에 미리보기로 확인하면서 적절한 사이즈를 입력하면 됩니다.

➔ 마지막 줄의 line-height:17px 은 줄간격입니다. height:24px; 이 부분을 조정하니 카테고리 다른 글의 세로 사이즈가 변경 되기에, 애드센스 배너와 잘 어울리도록 이 두 부분을 적당히 조정했습니다.

 

2. Skin.html 편집

다음 위의 skin.html 편집 란에서 Ctrl+F 단축키를 이용해 본문에 해당하는 article_rep_desc 을 검색해서 위치를 확인 한 후에 바로 아래에 다음의 코드를 추가하면 됩니다.

<div id="adsense200">
애드센스 광고 코드
</div>

모든 입력을 마치고 저장을 하면 맨위의 그림과 같이 ‘카테고리의 다른 글’ 옆에 ‘구글 애드센스 광고’가 노출됩니다.