본문 바로가기

TECH/블로그TIP!

티스토리 블로그 메인(티 에디션)에 애드샌스 배치하는 방법

얼마전 티스토리가 개편 되면서 티스토리에 메인페이지를 만들 수 있는 티 에디션을 서비스 하기 시작 했습니다. 그 전에는 메인 페이지를 만드는것을 플러그인으로 처리 했는데 정식으로 서비스하기 시작 한거죠.
티 에디션이 생기면서 메인페이지에 자유도가 높아져서 에드센스를 사용할 수 있게 되었습니다.


티에디션에 애드센스 넣는 방법

김군의 블로그 메인 페이지는 티 에디션이 적용되어 있습니다. 기본적으로 제공 되는 포멧이 있어서 메인페이지를 구성하기가 아주 쉽죠. 이미지 배너로 애드센스를 적용해 두면 디자인을 헤치지도 않고 본문과 연관된 광고가 나오기 때문에 연관성이 높은 광고가 나오게 됩니다.

티에디션은 티스토리 블로그 관리자 화면에서 좌측 LNB메뉴 중 화면 설정을 선택하면 티 에디션 설정을 해 줄 수 있습니다. 여기서는 티에디션의 사용 유/무만 체크할 수 있으니 사용하기로 선택해 주면 됩니다.

티 에디션 설정을 해고 나면 우측 상단에 티에디션 버튼이 보이게 됩니다. 티에디션 버튼을 클릭하면 티에디션의 컨텐츠를 배치하고 설정 할 수 있습니다.

 

애드센스를 티에디션 메인에 넣기 위해서는 빈 컨텐츠가 하나 필요 합니다. 다른 컨텐츠 그룹 위에 있는 플러스 아이콘을 터치하면 바로 위쪽으로 빈 컨텐츠 영역을 생성 할 수 있습니다. 컨텐츠 영역을 생성하고 나면 티에디션 에딧박스에서 디자인을 선택해 줍니다. 디자인을 선택하기 전에 먼저 아이템을 선택해 주어야 디자인 탭을 선택할 수 있으니 아무거나 선택해서 적용해 주면 됩니다.

디자인 탭에서 HTML 버튼을 클릭하면 코드를 직접 수정 할 수 있습니다. 우리는 필요한 코드는 없으니 박스 안에 있는 코드는 모두 선택해서 삭제 하고 그곳에 애드센스에서 가져온 광고코드를 넣어 주고 저장 하면 바로 적용이 됩니다. 참 쉽죠?^^


애드센스 나란히 정렬 시키기

광고코드를 삽입 하면 끝나기는 하지만 광고 하나만 넣기에는 자리가 많이 남죠? 보통 2개를 넣게 되는데 블로그 마다 사이즈가 다르지만 이게 사이즈가 애매 합니다. 보통 최소 600 정도 이고 그 보다 더 넓은 분들도 계실 텐데 600px 정도의 화면을 기준으로 생각해 봐도 250x250을 넣더라도 상당히 자리가 많이 남아서 보기가 안좋습니다.
제 블로그는 320 직사각 배너를 사용 했는데 그렇게 했더니  자리가 딱 맞아서 배너 하나가 밑으로 떨어지더라구요. 기호에 따라서는 긴 직사각 배너를 사용하셔도 되지만 2개를 넣으실 분들은 참고 하시면 되겠습니다.

2개의 배너를 넣기 위해서는 2개의 코드를 넣어 주면 됩니다. 물론 같은 코드 2개를 넣어 주면 되죠. 하지만 그냥 코드를 넣으면 아래로 떨어지게 되니 간단히 HTML을 손 봐주어야 합니다.

위의 광고 코드 삽입 방법과 동일 하지만 코드를 넣을 때 HTML코들 넣어 주어야 합니다.

애드센스 광고 코드를 DIV라는 태그로 감싸주고  그 중간에 광고 코드를 넣어 주면 됩니다. 헌대 저렇게 해도 320짜리 배너를 넣으면 아래로 떨어지는 결과를 가져 옵니다. 자리가 충분하지 않아서 인데요. DIV 태그에 약간의 꼼수를 부리면 320짜리 배너 2개를 딱 맞게 넣을 수 있습니다.

지금 김군이 사용하는 배너 코드 입니다. 애드센스 배너를 감싸고 있는 DIV에 스타일을 좀 더 준것 인대요. 풀이해 보면 가로를 293px로 하고 그것이 넘어가면 숨기라는 내용 입니다. 그리고 첫 애드센스 배너를 감싸고 있는 박스는 우측으로 5px만큼의 공간을 띄어 주라는것이죠.

이미지로 표현해 보면 이해가 쉬운데 이런 모습이 됩니다. 이렇게 해서 320짜리 배너2개를 600px 안에 넣을 수 있게 되었던거죠. 배너가 약간 가리기는 하는데 예전부터 제가 코드를 살짝 수정해서 적용해 왔지만 아직까지 구글에서 제재가 가해 진적은 없습니다. 부정클릭이 거의 없기도 하고 또 제 애드센스 수입이 그다지 많지 않아서인지 별 이야기는 없내요...ㅎㅎㅎ 파일로 첨부 하니까 필요하신 분들은 다운로드 받아서 사용하시면 됩니다.


장황하게 설명이 되었지만 실제로 해 보면 상당히 쉽습니다. HTML코드라면 현기증이 나시는 분들도 있겠지만 그다지 어려운 일은 아니니 꼭 한번 도전해 보시길 바랍니다.^^

Comments. 15