aaaicu

업무를 하면서 배너 개발 요청을 받아서 처리한 경험이 있다.
요청 사이트에 배너를 개발하여 추가하고보니,
내가 관리하는 티스토리에도 적용이 가능할 것 같아 보였다.
스킨을 수정해서 배너를 추가하고 배너에 광고를 넣어보았다.

티스토리 블로거들에게 광고 꿀팁이 되었으면 하는 마음으로 광고배너 추가방법을 공유하고자한다.

1. 배너 만드는 방법 익히기

배너 만들기 포스팅한적이 있다. 
[Web 개발/HTML & CSS] - CSS의 position으로 배너 추가하기

포스트를 보고 먼저 익혀두면 스킨에 적용하기 편할 것 같다.

2. 배너 추가하기

1) 기준 태그 찾기

티스토리에서 배너의 기준이 될 태그를 찾아야한다.

크롬의 경우 F12를 눌러서 개발자 도구를 열고 Ctrl+Shift+C 를 눌러서 태그찾기 모드를 활성화 해주면 
기준이되는 요소를 찾기가 편할 것이다.

나 같은경우 id가 "content-inner"인 div태그를 기준으로 하기로 했다.
(https://kyome.tistory.com/68 게시글에서 id가 "contents"인 div 가 내 티스토리 스킨에서는 content-inner로 쓰인다고 할 수 있다. )

2) 스킨편집하기

티스토리 관리자 페이지에 접속(https://티스토리아이디.tistory.com/manage )
스킨편집 - html편집으로 접속

아까 찾아 놓은 id = "content-inner" 태그를 찾아서  style="position: relative;"를 추가해준다.

<div id = "content-inner" style="position: relative;" >

해당 태그가 닫기 전에, "content-inner"의 앞에 
광고판이 될 div를 추가해준다.

<div id = "content-inner" style="position: relative; >
~~~
~~~
~~~
<!--광고 div-->
<div id="side_banner" style="position: absolute; top: 20px; right: -180px; width: auto; height: auto; ">
		<div align="center">

		광고 코드

          
		</div>
</div>
</div>

3) 광고 코드 붙이기

광고 div를 만들었다면 거의다 끝났다.
이제 <div align="center"> 밑에 광고사가 주는 광고 코드를 복사 붙여넣기하면 된다.

3. 움직이는 배너 만들기

움직이는 배너는 위에 참고한 포스팅을 숙지한 후에 

[Web 개발/HTML & CSS] - jQuery로 움직이는 배너 만들기

포스트의 내용을 따라 적용하면 된다.

4. 응용하기

JQuery와 javascript를 할 줄 안다면 간단한 코드를 추가하여 광고 배너를 더 동적으로 수정할 수 있다.

현재 나의 티스토리를 보면 반응형에 맞게 광고의 위치가 바뀌고 
게시글위에 움직이는 배너는 제거 문구를 클릭하면 배너가 사라지게 해놓았다.


** 궁금한 점 댓글 달아주시면 답변 혹은 추가 포스팅해볼게요! 

Daum adfit(이하 애드핏)은 google adsense(이하 애드센스)에 비해서 승인이 잘 난다고 알려져있다.

이미 수차례 애드센스에게 거절당했기 때문에 애드핏 광고부터 올리기로 마음먹었다.

근데 생각처럼 쉽지 않았다.

다른 블로거들은 어떻게 그렇게 쉽게 광고를 붙인건지.. 

다른분들의 포스팅을 보니까 

티스토리 자체에서 제공하는 플러그인에 광고 코드를 삽입해서 저장하면 된다길래

그대로 시도했다. 

결과는 보류

수차례 시도했는데 다양한 사유로 보류처리되었다.

다양한 보류사유를 정리하자면 다음과 같다.

보류 사유 정리

1. 스킨이 광고를 가리면 안된다.

애드핏은 제공해주는 샘플광고 이미지가 조금이라도 가려지거나 잘리면 안된다.

원인은 반응형스킨이었다.

사용하고 있기 때문에 사이즈가 줄어들면 그에 맞게 광고도 반응형으로 노출할 수 있어야한다.

2. 모바일 환경에 적합하지 않다.

내 블로그의 방문자는 대부분 PC로 접속하기 때문에 PC플러그인에만 광고를 추가했다. (아래 이미지 참고)

근데도 모바일 환경을 고려하라니... 

이 역시도 반응형 스킨 때문으로 보인다. 

브라우저를 줄여보면 블로그는 모바일 블로그모드로 바뀌지만 

광고는 화면에서 잘린채 자리를 지키고 있기 때문이다.

3. 광고 수가 너무 많다.

한 화면에서 3개까지만 노출되어야하며 4개부터는 가독성을 떨어뜨린다고 판단하여 보류시킨다.

4. 게시물의 수가 부족하다.

찾아보니 최근 한달 간 5개이상의 게시물이 있어야 승인받는데 문제가 없다고한다.

해결

결국 플러그인으로 광고코드를 삽입해서 자동으로 추가하는 방식은 포기하기로했다.

광고가 본문에 자동으로 삽입되지만 반응형으로 광고가 움직이지 않으니.. 별다른 방법이 없었다.

결국 스킨에 직접 광고코드를 삽입해서 광고를 노출하기로 했다.

관리자페이지에서 스킨수정 - html 수정으로 들어가서 원하는 위치에 div를 만들고

광고사이즈에 맞게 div사이즈를 고정해서 content 아래에 삽입했다.

반응형에 맞게 CSS에 @Media 부분을 찾아서 모바일 모드일때는 div에 display:none;을 만들었고

PC모드일 때는 display:inline;이 되도록 해서 광고가 온전히 보여질때만 노출하도록 만들었다. 

결과

많은 시행 착오를 지나고 결국 애드핏 심사에서 승인을 받았다!

남들은 쉽게 하는거 같던데.. 멀리 돌아온 느낌을 지울 수 없다.. ㅋㅋㅋㅋ