**순서
(1) 본문 상단의 자동광고를 꺼두자.
(2) 구글 애드센스에서 2개의 디스플레이 광고 코드를 만들어 메모장에 저장해 둔다.
(참고) 내가 참고한 블로그에 올라온 내용으로 따라해보니 애드센스에서 만든 2개의 코드로 상하단 모두 가능했다. 처음에는 욕심이 나 상단 하단 두개씩 따로 만들어서 적용해봤는데 이럴 경우 하단 광고가 나타나지 않았다. 상단 광고 2개 만든것으로 하단으로 똑같이 만든다.)
(3) 본문 상단 광고 2개 나란히 만들기 (a-pub-의 뒤에 붙는 숫자와 data-ad-slot= 뒤에 붙는 숫자 중요)
(4) 본문 하단 광고 2개 나란히 만들기 (a-pub-의 뒤에 붙는 숫자와 data-ad-slot= 뒤에 붙는 숫자 중요)
##_article_rep_desc_##를 기준으로 위는 상단광고2개를 아래는 하단 광고 2개를 넣을 것이다.
애드센스 코드 2개를 사용한다.
*여러번 실패하고, 여러 방법을 검색해 해보면서 수정해나갔기 때문에 좀 복잡할 수도 있다. 상단 광고 2개 코드로도 하단 광고 2개를 더 만들 수 있다. 4개까지 안만들어도 되긴 하다.(내가 참고한 블로그의 코드를 사용할 경우 4개를 모두 만들어 적용해보면 하단 광고가 나오지 않았다.) 만들어 놓은 코드마다 다른것 같다.
북클럽 스킨을 사용해 코드를 적용했다.
*원래는 Odessey 스킨을 사용했었는데 위 내용을 따래해 상단, 하단 광고 2개 나란히 만들어 보니 웹페이지를 오른쪽으로 늘리면 이상하게 광고 2개가 세로로 정열이 되었다. 다른 블로그들을 보니 이렇게 나오지 않아 시간 낭비를 많이 했다. 결국 Odessey 스킨을 북클럽 스킨으로 변경했다. 북클럽 스킨을 보니 깔끔해 나쁘지 않았다. 스킨을 변경하니 적용했던 코드가 다 사라졌다. (삭제 할 예정이여서 오히려 좋긴 했다. 그런데 앞으로 이런 반응에 주의는 해야겠다.) 아무튼 북클럽 스킨으로 변경한 후 코드를 다시 넣어보니 웹페이지를 오른쪽으로 늘리면 세로로 배열되는 현상이 사라졌다.
★ 중요 - 본문 상단의 자동광고를 비활성화 해두자.
** 미리 설정 해둘게 있다.
수익>애드센스 관리에 들어가 광고 설정의 본문상단을 꺼두는 것이다. 왜냐면 모바일에서는 2개의 광고가 동시에 나오기 때문에 애드센스 정책 위반이라고 한다.
*필요한 것은 a-pub-의 뒤에 붙는 숫자와 data-ad-slot= 뒤에 붙는 숫자이다. a-pub-의 뒤에 붙는 숫자 모두 동일하며 data-ad-slot= 뒤에 붙는 숫자는 광고마다 다르다. 하다보면 '아~ 이것만 필요하구나'라고 느끼니 html을 모르더라도 포기하지 말자. 이 숫자를 잘 복사해 붙여넣기 한 다음 html에도 해당 자리에 그대로 붙여넣기 해주면 된다.
① 광고코드 2개 만들기
(1) 왼쪽 '광고' 메뉴를 클릭한다.
(2) 상단 '광고 단위 기준'을 클릭한다.
(3) '디스플레이 광고'를 클릭한다.
(4) 사각형을 클릭한다,
(5) 이름을 상관 광고 1로 입력한다.
(6) 광고 크기를 반응형으로 선택한다.
(7) 만들기 버튼을 클릭한다.
(8) 복사하기 버튼을 클릭해 메모장에 붙여넣기 해 둔다.
(9) 하단 완료 버튼을 클릭한다.
(10) 위와 같은 과정을 반복해 '상단 광고 2' 위와 같이 1개 더 만들어 코드를 같이 메모장에 저장해둔다.
② 상단 광고 2개 만들기 - 광코코드 붙여넣기
(11) 아래 TXT 파일을 다운로드 한다.
출처
구글 애드센스 상단 광고 2개 노출시키기 / 하단 광고 2개 노출 포함
구글 애드센스 상단 및 하단 광고 2개 노출시키기, 코드 삽입 구글 애드센스는 티스토리 광고 설정에서 상단광고를 설정할 경우 위 이미지와 같이 본문 상단에 1개의 광고가 송출됩니다. 이게 사
sonfreenote.tistory.com
(12~13) 먼저 저장해둔 2개의 코드 메모장을 열어 ca-pub 부분의 숫자와 slot 부분에 있는 숫자를 위 다운로드 한 TXT파일에 대입하여 붙여넣기 하여 저장한다.
복사해둔 코드에 있는 숫자만 복사하여 다운로드 받은 TXT파일의 따옴표 안에 붙여넣기 하면 된다. 이렇게 상단1~하단2까지 숫자를 복사하여 붙여넣기 하면 된다. 예를 들어 왼쪽 내가 만든 코드 속 (12번)의 숫자만 복사하여 오른쪽 XXX들 드래그 하여 그 자리에 붙여넣기 하는 것이다. 이렇게 광고 2개를 모두 붙여넣기 해서 메모장을 저장해둔다.
왼쪽은 애드센스에서 내가 복사해놓은 것이고, 오른쪽은 위 다운로드 받은 TXT파일이다.
data-ad-slot= 뒤에 붙는 숫자는 모두 같지만 헷갈리지 않게 붙여넣기를 모두 해줬다.
(16-17) 티스토리에서 원하는 블로그의 설정을 클릭한다.
(18) 꾸미기의 스킨편집을 클릭한다.
(19) html 편집 버튼 클릭한다.
(20) 팝업창이 뜨면 확인 버튼을 클릭한다.
(21) HTML코드가 보여지는데 코드 중 아무데나 클릭 한번 하자.
(22) ctrl+F를 누르고 ##_article_rep_desc_## 를 입력하면 검색되어 찾아진다.
(23) 2개가 검색되어 지는데 엔터를 눌러 두번째것을 찾는다. (북클럽 스킨 기준)
* 이부분도 꼭 2번째 것이여야 하는지 모르겠다. 여러 블로그를 참고하다보니 두번째로 적용해야 한다고 해 이렇게 했다.
나의 경우 왜 두번째 것을 찾았냐면 찾은 ##_article_rep_desc_## 을 기준으로 위에는 <div class="entry-content"가 있어야 하고, 아래는 <s_tag_label>이 있어야 한다. 그러니 위 아래 부분이 아래 이미지처럼 위 아래로 되어 있는 ##_article_rep_desc_## 을 찾아야 한다. 그래서 북스킨을 사용하는 나의 기준으로는 ##_article_rep_desc_##은 두번째 것이었다.(두번째 것으 꼭 찾아야 하는지는 나도 모르겠다.)
##_article_rep_desc_##를 기준으로 위는 상단광고2개를 아래는 하단 광고 2개를 넣을 것이다.
③ 상단 광고 2개 배열 : ##_article_rep_desc_## 위에 붙여넣기
상단 광고 2개 적용은 ##_article_rep_desc_## 위에 코드를 붙여넣자.
(22) 검색되어진 문구 위의 끝 문장에 커서를 두어 엔터를 쳐서 빈 공간을 만들어 준다.
이렇게까지 안해도 되는것 같은데 나의 경우 잘 몰라 먼저 빈공간을 만들고, 붙여넣기가 끝난 다음 빈공간을 다시 삭제했다.
(22) 빈 공간에 커서를 둔 후 위 (12~13번)에서 숫자들을 붙여넣기 한 메모장의 상단광고 내용들을 복사해 붙여넣기 한다.
** 붙여넣으면 이렇게 된다.
(23) 싱딘 적용 버튼을 클릭한다.
(24) 팝업창이 뜨면 확인 버튼을 클릭한다.
글을 열어보고 티스토리 상단에 광고 2개가 잘 만들어졌는지 확인해본다.
④ 하단 광고 2개 만들기 - 광코코드 붙여넣기
(25-28) 상단광고를 붙여넣기 한 방법과 동일한데 다운로드 받은 파일의 하단광고에 대입해 붙여넣기 해주는 것이다.
위 11번에서 다운로드 받은 TXT파일을 열어 에드센스에서 만들어 놓은 상단광고 코드 2개의 ca-pub의 숫자와 slot의 숫자를 복사하여 붙여넣기 한다.
(29) 스킨편집의 HTML 편집으로 들어간다.
(30) HTML코드가 보여지는데 아무데나 클릭 한번 하자.
(31) ctrl+F를 누르고 ##_article_rep_desc_## 를 입력하면 검색되어 찾아진다.
③ 하단 광고 2개 배열 : ##_article_rep_desc_## 아래에 붙여넣기
(32) ##_article_rep_desc_## 바로 아래에 (25~28)에서 만들어 놓은 하단 광고 2개를 모두 복사해 붙여넣기 한다.
(33) 붙여넣기 하면 아래와 같이 된다.
(34) 상단 적용 버튼을 클릭한다.
(35) 스킨편집 완료 팝업창이 뜨면 확인 버튼을 클릭한다.
티스토리 블로그의 본문을 열어 하단 광고2개가 잘 배열되어 나타나는지 확인한다.
