티스토리 본문 오른쪽 상단에 애드센스 광고 넣기

티스토리 블로그의 장점 중 하나를 말하자면 가입형 블로그이지만, HTML수정을 통해 설치형 블로그 못지않은 자유도를 부여해줍니다. 이런 장점의 일환으로 구글 애드센스 광고 또한 원하는 위치에 노출시킬 수 있는데요.

국내 블로거들을 돌아다녀보면 대부분은 본문 상단의 광고 두 개를 넣는 형식을 즐겨 쓰는 것 같습니다. 저 또한 그런 식으로 광고를 삽입했고요. 오늘은 신문사나 외국 사이트들이 즐겨 쓰는 본문 내의 오른쪽 상단에 애드센스 광고를 넣는 방법을 알아봤습니다.

✱ 본문 내 오른쪽 상단 광고 넣기

티스토리 블로그의 관리자 페이지에서 [꾸미기] ➔ [HTML/CSS편집] ➔ [HTML/CSS]에서 skin.html 창에 Ctrl+F 키를 이용하여 검색창을 여신 후 본문에 해당하는 article_rep_desc 을 검색 합니다.

본문 상단에 광고를 노출시킬려면 article_rep_desc 바로 위에 구글 애드센스 광고 코드를 div 태그를 이용하여 아래와 같이 넣어야 합니다.

‘article_rep_desc’ 바로 위에 추가

<!--애드센스 본문 오른쪽 배너-->
<div style="float:right; border:3px solid #E6E6E6; margin: 0px 0px 10px 10px;">

구글 애드센스 광고 코드

</div>
<!--애드센스 본문 오른쪽 배너 종료-->

▶ <div style="float:right; border:3px solid #E6E6E6; margin: 0px 0px 10px 10px;">

➔ float:right

• 광고를 오른쪽에(right) 위치합니다. 왼쪽으로 변경할려면, left를 변경하면 됩니다.

➔ border:3px solid #E6E6E6

• 광고테두리를 설정한 부분입니다. 테두리 두께는 3px이며 형태는 직선(solid), 색깔은 연한 회색(#E6E6E6)으로 했습니다. 테두리가 필요없으신 분은 이 부분을 삭제하세요.

➔ margin: 0px 0px 10px 10px

• 광고테두리 바깥쪽 여백을 왼쪽과 오른쪽에 각각 10px씩 주었습니다. 본인의 블로그에 맞게 여백을 조정하시면 됩니다.

※ div 태그에 대해서는 더 자세히 알려면 이전 포스팅을 참고하세요. (관련 글 :구글 애드센스 광고 바깥 테두리 넣기 (div 태그))

개인적으로 본문 오른쪽 상단의 광고가 블로그에 자연스럽게 배치된다고 생각했지만, 실행에 옮기진 않았습니다. 왜냐하면, 이미 배치되어 있는 광고 3개 중 하나를 변경해야 하고 그에 따른 레이아웃도 다시 잡아줘야 하기 때문입니다.

무엇보다 이 방식은 글 작성에 있어 서론 부분을 이미지가 아닌 글로 채워야 텍스트와 광고가 조화를 이루기 때문에 이미 작성된 기존의 글들의 레이아웃도 모두 수정해야 할 뿐더러, 앞으로 글을 작성함에 있어 이런 부분까지 신경 써야 한다는 불편함도 한 몫 거들었습니다.

처음부터 이런 컨셉으로 갈 생각이었다면 시도해 볼만은 한 것 같습니다.

▷ 관련 글타래 :

• 구글 애드센스 광고 설정 및 광고코드 생성하기
• 티스토리 블로그 사이드바에 애드센스 광고 넣기
• 티스토리 본문 상단 구글 애드센스 광고 2개 삽입
• 카테고리 다른 글 옆에 구글 애드센스 광고 삽입