티스토리 상단 애드센스 2개 넣는법
Posted at 2013. 2. 4. 09:00 | Posted in 인터넷/블로그 팁여러가지 테스트 결과 제 블로그는 상단에 2개의 애드센스가 있을때 가장 좋은 클릭율이 나오고 있습니다. 특히 모바일쪽 클릭도 무시할 수가 없는 수준입니다.
보통 상단에 1개의 광고를 넣고 모바일에서도 보이게 하려면, 상단 애드센스를 티스토리 본문에 서식을 이용해서 넣는 방법을 사용합니다. 하지만 이 경우는 상단에 1개의 광고를 넣었을때 효과가 좋은 블로그에서나 가능한 것이고, 저처럼 상단에 2개를 넣어야 효과가 좋을때는 사용이 힘들죠.
일반적으로 상단에 2개의 광고를 배치하는 방식을 보면 본문이 아닌 스킨에 테이블을 이용해서 2개를 넣는 방법을 사용합니다. 하지만 이렇게 하면 모바일에서는 애드센스 광고가 나오지를 않습니다.
PC에서만 애드센스 2개를 보여주게 하는 코드. 모바일에서는 애드센스가 보이지 않음.
<div>
<TABLE border="0" cellspacing="4" cellpadding="4" width="100%">
<TR>
<TD width="50%">
좌측 애드센스 광고 코드 넣을 곳
</TD>
<TD align = "left" width="50%">
우측 애드센스 광고 코드 넣을 곳
</TD>
</TR>
</TABLE>
</div>
<br>
그러나 지금부터 알려드릴 방법을 사용하면, PC에서는 2개의 광고가 나오고 모바일에서는 1개의 광고가 보이게 됩니다. 현재 제 블로그에 적용되어 있는 방식입니다.
그럼 지금부터 시작해보겠습니다.
티스토리 상단에 PC와 모바일 모두 보일 수 있는 애드센스 광고 2개 넣기
티스토리 관리자-꾸미기-HTML/CSS 편집으로 가서 우측창의 skin.html 에서 ##_article_rep_desc_## 을 검색합니다.
그리고 아래 그림에서 노랗게 표시된 부분, 즉 ##_article_rep_desc_## 의 바로 윗부분에 다음 코드를 넣습니다. 애드센스 광고 코드 넣을 부분에는 각자 자신의 애드센스 코드를 넣어주시면 됩니다.
<!-- 상단 우측 애드센스 광고 시작 -->
<div style="float:right; margin:0px 0px 10px 3px">
애드센스 스크립트 넣을 부분
</div>
<!-- 상단 우측 애드센스 광고 종료 -->
이렇게 하면 2개의 애드센스중 우측에 들어갈 애드센스가 만들어진 것입니다. 자 이제 두번째로 좌측에 들어갈 광고를 배치해 보겠습니다. 좌측에 들어갈 애드센스는 모바일과 PC 모두에서 보여집니다.
티스토리 관리자-글쓰기에 들어가서 새 글을 작성하는데 양식을 서식으로 지정합니다. 그리고 HTML에 체크를 합니다.
이제 다음 코드를 넣습니다. 애드센스 광고 코드 넣을 부분에는 각자 자신의 코드를 넣어주시면 됩니다.
<!-- 상단 좌측 애드센스 광고 시작 -->
<div style="text-align:center; MARGIN: 0px 2px 10px 0px;">
애드센스 광고 코드 넣을 부분
</div>
<!-- 상단 좌측 애드센스 광고 종료 -->
글 복사가 안되시는 분들을 위해 코드를 다운로드 해서 사용할 수 있도록 첨부합니다.
자 이제 글을 작성할때마다 가장 윗부분에 서식을 이용해서 입력을 해주시면 PC에서 보면, 제 블로그에서 보이는 것 처럼 2개가 보이고, 모바일에서는 1개의 광고가 노출이 됩니다. 서식을 넣는 방법은 우측 하단에 있는 서식을 클릭한 후에 작성한 서식 제목을 클릭해주면 (여기에서는 본문 상단 광고) 글쓰는 곳의 커서가 있는 위치에 광고가 삽입 됩니다.
정리를 해보면 스킨에 넣은 우측 애드센스는 PC에서만 보이고, 서식을 이용해서 본문에 삽입한 좌측 애드센스는 PC와 모바일 양쪽에서 보이게 됩니다. 따라서 PC에서 접속을 하던 모바일에서 접속을 하던간에 모두 애드센스 광고를 노출 시켜줄 수가 있게 됩니다. 샘플을 보시려면 모바일에서 제 블로그에 들어와보시면 곧바로 확인이 가능하실겁니다.
발생가능한 문제 해결
그런데 가끔 좌측 배너가 한칸 정도 내려가서 보일때가 있습니다. 이는 글을 작성한후에 <BR>태그가 저절로 들어가서 생기는 문제로, 이런 문제가 발생하면 문제가 있는 글에서 HTML 체크를 한 후에, 소스의 가장 윗 부분에 들어가 있는 잘못된 <BR> 태그를 확인해서 삭제해 주시면 해결이 됩니다.
자 이제 코드 한방으로 PC와 모바일 모두에서 애드센스를 노출시키는 방법에 대해 알아봤습니다. 애드센스를 사용하는 블로그의 경우에는 블로거가 임의로 조절해서 수익을 증가시킬 수 있는 것은, 스킨과 애드센스 위치 정도뿐입니다. PC와 모바일 모두에서 애드센스를 노출 시켜서 조금이라도 더 많은 수익 얻어가시기 바랍니다~
'인터넷 > 블로그 팁' 카테고리의 다른 글
워드프레스 업로드 제한될때 확인할 내용 (1) | 2014.07.07 |
---|---|
티스토리 카테고리 목록에 애드센스 광고 넣기 (11) | 2013.02.03 |
구글 애널리틱스에서 페이스북 좋아요 추적 방법 (3) | 2012.11.22 |