티스토리 본문 상단에 애드센스 광고 2개 넣기

저번 포스팅에서 본문 상단 우측 광고를 하나 넣는 방법을 알아보았다. 이번에는 수익증대에 도움이 된다고 하여 많은 분들이 적용하고 있는 상단 광고 2개를 알아보도록 하겠다. 필자또한 최근에 상단광고 2개로 바꾸는등 여러가지 실험을 하고 있는 중이다. 본인의 블로그특성에 맞는 최적의 광고배치를 늘 연구하는 것이 블로거의 숙제다.

티스토리 본문 상단에 애드센스 광고 2개 넣기

본문상단에 2개의 광고가 보기좋게 붙어있고, 모바일에서는 1개의 광고가 출력되는 광고를 다는 방법을 찾고 오셨다면 환영한다. 본 포스팅을 차근차근 따라오면 멋지게 적용되어진 모습을 볼 수 있을 것이다. 먼저 광고가 달려있는 위치를 사진으로 확인해보자.

피시에서 출력되는 화면이다. 본문상단에 2개가 나란히 출력된다. 물론 모바일에서는 하나의 광고는 누락시켜 하나만 출력되게 만들었다. 이제 알아보도록 하자.

1. 반응형광고를 2개를 만들고 코드를 가져온다.

반응형코드 광고를 메모장에 옮겨온 사진이다. 위 사진에서 중요하게 쓸건 data-ad-client="■" 와 data-ad-slot="▲" 이다. 이 네모와 세모 기호안에는 각자 고유의 애드센스 아이디와 광고코드가 들어있고, 직관적으로 보기 쉽게 도형으로 표현하였다. 반응형광고는 2개를 만들어야한다.그럼으로 구해내야 되는 값은 3가지다. 왜냐하면 광고가 달라도 data-ad-client="■" 고유의 아이디 네모는 같음으로 2개의 광고를 만들면 새로운 data-ad-slot="▲▲" 를 얻을 수 있다. 

애드센스 고유 아이디 - data-ad-client="■"

데스크탑에서만 보여지는 왼쪽 광고 - data-ad-slot="▲"

데스크탑 오른쪽광고 , 모바일노출되는 광고 - data-ad-slot="▲▲"

이렇게 3가지의 값을 꼭 ! 구해내야 한다.

2. 아래의 코드 메모장을 다운받고 도형들안에 코드를 넣어준다.

본문상단2개 모바일은1개 광고.txt

도형을 다 넣어주면 전체 코드를 드레그해서 복사해준다.

3. 복사한 코드들을 블로그 HTML에 삽입해준다.

HTML 편집기를 키고 ctrl + f 를 눌러서 ##_article_rep_desc 를 검색해준다. 그리고 바로 위에 복사해둔 코드를 삽입하면 끝 ! 저장을 하고 나와보면 블로그 상단에 멋지게 설치된 광고 2개를 볼 수 있을 것이다. 모바일 또한 정상출력이 되고 있나 확인해주는 것을 잊지 말것 !

블로그와 애드센스 모든 꿀팁 총정리

티스토리 블로그 가이드북 

어디서든 " 희망이야기 " 검색 !