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를 할 줄 안다면 간단한 코드를 추가하여 광고 배너를 더 동적으로 수정할 수 있다.

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


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

티스토리에 개발 관련 포스팅을 꾸준히 하기 시작하면서 '블로그에 광고 붙이기'라는 새로운 도전거리가 생겼다.

실제로 광고 수익이 얼마나 나는지도 궁금했고 

나의 블로그를 통해 소소한 수익이 들어온다면 값진 보상이라고 생각했다.

근데, 결코 쉽지 않았다.

이전 포스팅에서 설명했듯 구글광고는 생각보다 훨씬 깐깐했고 

그나마 대체광고 정도로 생각했던 다음의 애드핏도 간신히 승인을 얻어냈다. 

(티스토리 애드핏 승인 : 보류사유 정리(승인 꿀팁) )

그렇지만.. 애드고시라고 부를정도로 승인을 안 내어주는 구글광고가 탐났다. 👀

가치 있는 인벤토리: 콘텐츠가 스크랩됨

나에게 가장 많이 돌아온 애드센스 측의 보류 사유는 내 콘텐츠가 스크랩됐다는 것이다.

하지만 모든 콘텐츠는 내가 작성했고 혹시 다른 콘텐츠를 가져올 경우에는 출처를 밝혔기때문에 더 억울했다.

** 애드핏 VS 애드센스 (승인 시)

애드핏과 애드센스 승인과정에서 차이점이 있다면, 

애드핏이 조금 더 친절한 피드백을 해준다는 것이다.

애드핏은 사람이 검토결과를 써주는 것 같은 느낌을 받았고 

애드센스는 봇을 돌려서 검토피드백을 주는 걸로 보였다.

‘어디 부분이 스크랩된 것 같으니 어떻게 고쳐라’가 없으니 스스로 검토하고 수정하는 방법 밖에 없다.

주요 수정 사항

스스로 검토한 주요 수정 사항은 다음과 같다.

1. 백준 알고리즘 문제 풀이 수정

백준알고리즘 코딩 테스트 문제를 풀어서 포스팅한 부분이 있다.

문제부분을 복사해서 붙여넣고, 문제를 풀어 해설한 포스팅이었다.

아무래도 스크랩은 여기서 문제 부분을 말하는 것 같았다.

그래서 문제부분을 모두 URL로 바꾸고 문제 풀이부분만 올렸다.

2. 참고 코드 수정

개발 공부를 하면서 참고할 만한 코드를 부분적으로 가져온 부분이 있었다.

참고할 코드를 삭제하면 게시물 자체가 의미가 없어지기 때문에 

코드별로 주석을 달았다.

내가 이해하는대로 설명을 기록했다.

3. 꾸준한 포스팅

스크랩한 게시물이 많다는 애드센스의 피드백은

글 전체 중에서 스크랩된 게시물의 비율 따져서 판단할 것으로 생각했다. 

그렇다면 전체 글의 수를 늘리면 스크랩된 글의 비율이 줄어들 것이라고 생각했다.

위의 내용처럼 1번과 2번을 수정하고도 애드센스 측에 여러번 거절 당했지만

3번 내용처럼 꾸준히 포스팅을 하니 어느날 갑자기 애드센스에서 승인을 해주었다!

감동이었다.. 애드고시 드디어 통과