티스토리에 구글 애드센스 광고 넣기

지금까지는 포스팅 상단에 가로로 길쭉한 애드센스 광고를 넣어 왔습니다.

그러다가, view 애드박스를 달고나니, 이녀석이 우측상단에 딱! 위치하는 바람에 이 길쭉한 구글 애드센스 광고 상자는 한줄 아래로 내려오고 좌측상단이 텅 비어버리네요.

그래서, 스킨을 수정해서 view 애드박스 왼쪽에 새로 구글 애드센스 광고 상자를 넣어주기로 했습니다.

우선, google.com/adsense/ 로 가서 300x250 짜리 광고 단위를 하나 더 만들었습니다.

사각형 모양의 광고 코드를 준비를 해놓고, 티스토리 관리자 메뉴에서 HTML/CSS편집 으로 갑니다.

skin.html 을 쭉~ 보면서 내려가다가, <div class="article"> 을 찾습니다.

그 다음이 가 있네요. 이게 아마 포스팅 글 내용을 출력하는 부분인거 같네요. 확인은 안 해봤으니, 아니면, 말고..ㅋ

일단, <div class="article"> 바로 뒤에 준비한 구글 광고 스크립트를 붙여넣기를 합니다.

그 다음, [저장] 을 눌러 수정한 스킨을 저장해줍니다.

블로그를 확인하니, 새로 붙인 애드센스 광고가 상단 전체를 차지하고, view 애드박스는 그 다음 줄에 나타나네요. 빈 곳이 더 늘어나서 더 허접해져버리는군요.

그래서, 다시 skin.html 을 수정하러 갑니다.

붙여넣기 했던, 애드센스 스크립트를 <div> </div> 로 감싸도록 합시다.

애드센스를 감싸는 이 div 에 스타일을 적용해서 이쁘게 보이도록 할 겁니다.

우선 개발자 도구로 view 애드박스를 찍어보니, 가로 250px, 세로 268px 군요.

div 에 스타일을 먹여봅시다.

<div style="width:368px; height:266px; border:1px solid #CACDF0;float:left;text-align:center;margin-bottom:20px"><script   광고 스크립트...블라블라...</div>

왼쪽에 애드센스 상자가 잘 나오네요..

광고 박스가 div 안에서 상단으로 붙는데, 세로로도 div 상자 가운데에 위치하도록 수정해 봅시다. 이따가.... ㅋ