오랜만에 블로그 운영관련 포스팅을 하게 되었습니다. 요즘 애드센스는 거의 방치상태로 두었는데요, 수익은 뭐 그렇게 기대하지 않고 있습니다. 별로 궁금해하시지 않을꺼 같아서 비공개합니다.
2014/02/18 - [블로거/운영하기] - 티스토리 본문 상단/하단에 애드센스 삽입하기
2014/02/19 - [블로거/운영하기] - 티스토리 반응형 스킨에 구글 애드센스 삽입하기
이전에 했던 포스팅입니다. 오늘은 여기에 추가해서 티스토리 본문 우측에 애드센스 삽입하는 방법에 관하여 포스팅해보겠습니다. 물론 반응형 스킨을 사용하고 있기 때문에 본문상단에 일반적으로 많이 하시는 300사이즈 광고 두 개, 또는 336사이즈 한 개를 배치하는 레이아웃은 사용하고 있지 않습니다. 어느 것이 더 효율이 좋다 나쁘다는 지금 제 블로그 상황에서는 큰 차이를 보여주지 않는 거 같아서요. 오히려 모바일이나 테블릿 등등에 최적화 되면서 본문에 살포시 녹아가는 '본문 우측 애드센스 삽입'을 더 선호하는 것 같습니다.
본문 우측 삽입 방법
티스토리 블로그에서 애드센스를 삽입하는데 가장 먼저 찾아야 할 것은 애드센스 광고를 삽입할 위치 입니다. 위치는 티스토리 본문 내용이 뿌려지는(?) 위치를 찾아야 하는데, 티스토리 관리자메뉴에서 '꾸미기'->'HTML/CSS 편집'을 클릭 한 후에 CTRL+F 를 하고 "article_rep_desc"을 찾습니다. (치환자 라고 합니다.)
그리고 table 태그를 삽입해서 광고를 삽입하도록 하면 됩니다. 소스 첨부합니다.
애드센스 본문우측 삽입.txt이 소스를 티스토리 본문 치환자 앞부분에 붙여주시고, 본인만의 애드센스 코드를 삽입해주시면 됩니다. 또 한가지 이 코드를 삽입하실 때 고려할 점이, 이 방법이 필요하신 분들은 아마도 반응형 웹을 사용하고 계신 분들이 대부분일 껍니다. 따라서 이 코드만 이용해서는 디스플레이 기기에 따른 유연한 광고 출력이 힘드므로 꼭, @media 선언을 해주셔서 최대 효과를 누리시길 바랍니다.
제가 현재 사용하고 있는 @media 타입은
.my_adslot { width: 180px; height: 150px; }
@media(min-width: 400px) { .my_adslot { width: 200px; height: 200px; } }
@media(min-width: 500px) { .my_adslot { width: 300px; height: 250px; } }
입니다. 아래는 PC화면에서와 모바일에서 보여지는 본문 우측 애드센스 모습입니다. ^^
티스토리 편집상 글상자가 광고와 겹치는 경우가 있는데, 이 부분은 조금 더 연구를 해봐야 할 것 같습니다. ^^
