본문 바로가기
웹 개발

티스토리에 애드센스 넣기

by 똑똑한 영장류 2013. 1. 10.




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


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

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


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



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

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



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


그 다음이




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


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

그러다가, 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 상자 가운데에 위치하도록 수정해 봅시다. 이따가.... ㅋ


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


일단, <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 상자 가운데에 위치하도록 수정해 봅시다. 이따가.... ㅋ


댓글