당분간 티스토리 블로그에 애드센스 광고 삽입과 관련된 포스팅을 연속해서 올리려고 합니다. 지난 시간에 티스토리 본문 상단에 애드센스 광고를 삽입하는 방법을 살펴보았습니다. 오늘은 티스토리 본문 작성 중 본문의 중간에 광고를 삽입하는 방법을 살펴보겠습니다. 본문 상단에 광고를 삽입하는 방법은 티스토리에서 지원하는 플러그인을 통해서 쉽게 삽입하는 방법을 제공했으나 본문 중간에 애드센스 광고를 삽입하기 위해서는 HTML/CSS 편집 기능을 이용해야 합니다.
오늘도 본문 중간에 삽입할 광고를 먼저 생성해 놓는 것이 편합니다. 참고로 본문 중간에 삽입할 광고의 크기와 형태를 먼저 정해야 하는데 저는 반응형 광고를 생성하고 그 코드를 본문 중앙에 삽입을 했습니다. 이유는 제 블로그에 접속하는 사용자 중 절반이 모바일 환경이라는 것을 구글 애널리틱스가 분석해줬기 때문입니다.
이전 과정은 이 포스팅의 하단에 있는 이전 글 보기를 통해서 조회가 가능합니다. 이제 본격적으로 내용 확인이 앞서서 본문 중간에 삽입하는 광고가 무엇인지 제 블로그의 레이아웃을 통해서 살펴보겠습니다. 아래 검은색 박스로 표시된 부분은 모두 수익형 광고입니다. 일부는 구글 애드센스이고 일부는 텐핑도 있습니다. 그중 오늘의 주제는 아래 화살표가 있는 곳입니다. 참고로 저는 본문의 내용이 바뀌는 부분 또는 가능한 본문의 중앙에 애드센스 광고를 삽입했습니다.
먼저 애드센스 계정으로 접속 후 본문에 삽입할 반응형 광고 코드를 복사합니다. 애드센스 계정에 접속 후 본문에 사용할 반응형 광고를 선택합니다. 이전 포스팅에서도 말씀드렸듯이 저는 나름 다양한 시도를 위해서 광고를 다양한 형태로 미리 생성을 해 두었습니다. 그리고 제 기준에서 식별이 가능하도록 이름을 붙여 놓았습니다. 오늘 사용할 코드는 반영형 본문 1이라는 이름으로 생성한 광고입니다. 아래 그림에서와 같이 코드 가져오기를 클릭합니다.
코드 가져오기를 클릭하면 아래와 같이 광고 코드 안내 창이 열립니다. 여기서 광고 코드가 있는 곳을 마우스로 클릭하면 그림에서와 같이 코드가 선택이 되고 마우스 오른쪽 버튼을 클릭해서 아래 그림과 같이 코드 내용을 클립보드로 복사를 할 수 있습니다.
이제 복사한 코드를 HTML 소스코드에 삽입을 하면 됩니다. 오늘 이용할 소스 코드는 아래 링크를 클릭해서 다운로드합니다.
본문 중간에 애드센스 광고 코드 삽입하기.txt다운 받은 소스 파일을 열어서 아래의 그림에서와 같이 '여기에 본문에 삽입할 애드센스 광고 코드를 삽입합니다' 이 문구를 지우고 복사한 애드센스 광고 코드를 삽입합니다. 붙여넣기(Ctrl + V)를 하시면 됩니다. 아래 그림과 같이 HTML/CSS 편집에서 삽입할 소스코드가 완성이 되었습니다.
이제 소스코드 전체를 선택(Ctrl + A) 후 아래 그림과 같이 마우스 오른쪽 버튼 클릭 후 속성 창에 복사(C) 또는 복사하기(Ctrl + C) 단축기를 이용해서 전체 코드를 클립보드로 복사합니다.
이제 티스토리의 관리자 페이지에서 HTML/CSS 편집을 클릭해서 편집 모드 창을 띄웁니다. 아래 그림에서와 같이 HTML을 선택합니다. 다음 복사한 소스코드를 삽입할 위치를 빠르게 검색하기 위해서 먼저 편집창 안쪽에 마우스를 클릭 한 후 Ctrl + F를 누르면 아래 그림의 노란색 부분과 같이 '검색 :'이라는 부분이 표시가 됩니다. 이곳에 'article_rep_desc'를 입력해서 소스코드를 붙여넣기 할 기준이 되는 곳을 찾습니다.
소소코드는 아래 그림에서와 설명과 같이
당분간 티스토리 블로그에 애드센스 광고 삽입과 관련된 포스팅을 연속해서 올리려고 합니다. 지난 시간에 티스토리 본문 상단에 애드센스 광고를 삽입하는 방법을 살펴보았습니다. 오늘은 티스토리 본문 작성 중 본문의 중간에 광고를 삽입하는 방법을 살펴보겠습니다. 본문 상단에 광고를 삽입하는 방법은 티스토리에서 지원하는 플러그인을 통해서 쉽게 삽입하는 방법을 제공했으나 본문 중간에 애드센스 광고를 삽입하기 위해서는 HTML/CSS 편집 기능을 이용해야 합니다. 오늘도 본문 중간에 삽입할 광고를 먼저 생성해 놓는 것이 편합니다. 참고로 본문 중간에 삽입할 광고의 크기와 형태를 먼저 정해야 하는데 저는 반응형 광고를 생성하고 그 코드를 본문 중앙에 삽입을 했습니다. 이유는 제 블로그에 접속하는 사용자 중 절반이 모바일 환경이라는 것을 구글 애널리틱스가 분석해줬기 때문입니다. 이전 과정은 이 포스팅의 하단에 있는 이전 글 보기를 통해서 조회가 가능합니다. 이제 본격적으로 내용 확인이 앞서서 본문 중간에 삽입하는 광고가 무엇인지 제 블로그의 레이아웃을 통해서 살펴보겠습니다. 아래 검은색 박스로 표시된 부분은 모두 수익형 광고입니다. 일부는 구글 애드센스이고 일부는 텐핑도 있습니다. 그중 오늘의 주제는 아래 화살표가 있는 곳입니다. 참고로 저는 본문의 내용이 바뀌는 부분 또는 가능한 본문의 중앙에 애드센스 광고를 삽입했습니다. 먼저 애드센스 계정으로 접속 후 본문에 삽입할 반응형 광고 코드를 복사합니다. 애드센스 계정에 접속 후 본문에 사용할 반응형 광고를 선택합니다. 이전 포스팅에서도 말씀드렸듯이 저는 나름 다양한 시도를 위해서 광고를 다양한 형태로 미리 생성을 해 두었습니다. 그리고 제 기준에서 식별이 가능하도록 이름을 붙여 놓았습니다. 오늘 사용할 코드는 반영형 본문 1이라는 이름으로 생성한 광고입니다. 아래 그림에서와 같이 코드 가져오기를 클릭합니다. 코드 가져오기를 클릭하면 아래와 같이 광고 코드 안내 창이 열립니다. 여기서 광고 코드가 있는 곳을 마우스로 클릭하면 그림에서와 같이 코드가 선택이 되고 마우스 오른쪽 버튼을 클릭해서 아래 그림과 같이 코드 내용을 클립보드로 복사를 할 수 있습니다. 이제 복사한 코드를 HTML 소스코드에 삽입을 하면 됩니다. 오늘 이용할 소스 코드는 아래 링크를 클릭해서 다운로드합니다. 다운 받은 소스 파일을 열어서 아래의 그림에서와 같이 '여기에 본문에 삽입할 애드센스 광고 코드를 삽입합니다' 이 문구를 지우고 복사한 애드센스 광고 코드를 삽입합니다. 붙여넣기(Ctrl + V)를 하시면 됩니다. 아래 그림과 같이 HTML/CSS 편집에서 삽입할 소스코드가 완성이 되었습니다. 이제 소스코드 전체를 선택(Ctrl + A) 후 아래 그림과 같이 마우스 오른쪽 버튼 클릭 후 속성 창에 복사(C) 또는 복사하기(Ctrl + C) 단축기를 이용해서 전체 코드를 클립보드로 복사합니다. 이제 티스토리의 관리자 페이지에서 HTML/CSS 편집을 클릭해서 편집 모드 창을 띄웁니다. 아래 그림에서와 같이 HTML을 선택합니다. 다음 복사한 소스코드를 삽입할 위치를 빠르게 검색하기 위해서 먼저 편집창 안쪽에 마우스를 클릭 한 후 Ctrl + F를 누르면 아래 그림의 노란색 부분과 같이 '검색 :'이라는 부분이 표시가 됩니다. 이곳에 'article_rep_desc'를 입력해서 소스코드를 붙여넣기 할 기준이 되는 곳을 찾습니다. 소소코드는 아래 그림에서와 설명과 같이 를 기준으로 바로 위 또는 아래에 코드를 삽입할 수 있습니다. 위에 코드를 삽입할 경우 본문 상단에 광고가 나타나고 아래에 광고를 삽입할 경우 본문 하단에 광고가 나타납니다. 참고로 저는 소스코드를 를 기준으로 했을 때 어느 곳에 소스코드를 붙여넣기를 했나요? 넵... 바로 아래쪽입니다. 그러면 광고가 어느 쪽에 자리를 잡을까요? 넵... 본문의 아래쪽입니다. 과연 그럴까요? 확인해 보겠습니다. 내용 확인을 위해서 작성 중인 포스팅에 대해 미리보기를 해 보았습니다. 아래 그림에서 녹색 박스로 표시된 부분입니다. 자세하게 보면 2개의 배너형 애드센스 광고가 있는 것을 확인할 수 있습니다. 위에 있는 광고는 다음 시간에 살펴볼 프러그인을 통햇 생성된 광고이고 아래쪽에 있는 광고가 조금 전 붙여 넣은 소스코드가 생성한 광고입니다. 질문이 없나요? 제 설명을 잘 따라왔다면 이 시점에 질문이 있어야 합니다. 그래도 없나요? 그럼 제가 계속 설명을 하겠습니다. 우리는 이 포스팅의 제목에서와 같이 본문 중간에 애드센스 광고를 삽입하기로 했습니다. 그런데 소스코드를 넣고 나니 광고는 본문의 하단에 자리를 잡았습니다. 이게 어떻게 된 것일까요? 이제 마지막 과정을 살펴보겠습니다. 본문 아래에 위치한 저 광고를 본문 작성 중 원하는 위치로 호출하는 방법입니다. 다시 소스 코드를 자세히 보겠습니다. 아까는 그냥 복사하기와 붙여넣기 밖에 설명이 없었습니다. 이제 간략하게 소스코드의 내용을 살펴보겠습니다. 소스 코드의 관계만 잘 이해하면 됩니다. 지금부터는 이 코드만 잘 아시면 됩니다. 아래 코드 중에서도 붉은색 부분만 잘 아셔도 됩니다. 위/아래 코드는 애드센스 광고를 본문 내용과 위/아래 공백을 만들기 위한 코드입니다. 가능하면 본문 내용에 겹치지 않도록 하기 위해서 함께 사용합니다. 그럼 가운데 붉은색으로 표시된 코드는 어떤 기능을 할까요? 바로 광고를 삽입할 위치를 결정하는 코드입니다. <div id="abc">라는 코드가 본래 <div id="xyz">라는 코드를 호출하여 불러냅니다. 따라서 본문 내용 중에 이 코드를 만나게 되면 기본적으로 본문의 아래에 있었던 광고가 호출을 받은 곳으로 이동을 하게 됩니다. 호출이 없으면 어떻게 될까요? 당연히 원래 있던 본문의 아래에 있게 됩니다. <p><br /><p> <div id="abc"></div> <p><br /><p> 이제 광고를 호출하는 방법도 배웠으니 광고를 삽입해 보겠습니다. 먼저 지금 작성하는 포스팅에서 광고를 삽입할 위치를 결정합니다. 앞서 설명했지만 저는 본문 길이의 중앙 부위 또는 본문의 내용이 변경되는 지점에 광고를 삽입합니다. 아래 화살표 부분이 오늘 제가 본문 중간에 삽입할 광고입니다. 지금부터는 HTML 편집을 통해 위의 호출 코드를 입력해야 합니다. 코드를 삽입할 위치를 빨리 찾기 위해서 삽입할 위치의 아래쪽 글귀를 잘 봐 둡니다. 아래에 '이제 복사한 코드를'이라는 문장이 시작이 됩니다. 먼저 아래 그림과 같이 글쓰기 화면에서 우측 상단에 있는 HTML 체크 박스를 클릭 후 체크를 설정합니다. 그런 다음 아까 잘 봐 두었던 삽입 위치인 '이제 복사한 코드를'이란 곳을 찾아야 하는데 HTML 코드가 섞이다 보니 위치를 찾기가 쉽지 않습니다. 그래서 검색 기능을 이용해야 합니다. Ctrl +F를 누른 후 아래 그림과 같이 검색창에서 '이제 복사한 코드를'이라는 문구를 입력합니다. 편집기에서 해당 문구를 찾았습니다. 바로 그 문구 위쪽에 호출 코드를 직접 입력합니다. 아래 파란색 부분이 코드를 입력한 부분입니다. 이제 다시 글쓰기 화면에서 HTML 체크 박스를 클릭하여 체크를 해제합니다. 다시 작성 중인 포스팅 본문입니다. 호출 코드를 삽입하기 전과 삽입 후 달라진 것이 있나요? 호출 코드를 작성했는데 아직 광고가 보이지 않습니다. 놀라지 않아도 됩니다. 광고는 글을 발행 또는 미리보기를 해야 확인할 수 있습니다. 그런데 자세히 보셨다면 차이점을 발견할 수 있습니다. 위에서 호출 코드를 삽입하기 전과 아래의 그림을 다시 한번 자세히 살펴보세요. 차이점을 찾으셨나요? 찾으셨다면 아래에 댓글로 남겨주세요. 비밀입니다. 포스팅을 발행하기 전에 본문 중간에 애드센스 광고가 정상적으로 노출이 되는지 확인하고 싶으면 미리보기를 클릭하시면 됩니다. 새로운 탭이 열리면서 작성 중인 글에 대해 현재까지 글쓰기가 진행된 모습을 보여줍니다. 아래 그림에서와 같이 애드센스 광고가 본문 중간에 노출이 되는 것을 볼 수 있습니다. 바로 우리가 호출했던 그곳에... 이제 본문 중간에 애드센스 광고를 삽입하는 과정을 순서대로 쭉 살펴보았습니다. 최대한 따라 하기 쉽게 설명을 했습니다. 여기까지 따라오는데 문제는 없었을 것으로 생각합니다. 혹시 질문이 없나요? 있어야 하는데... 저의 경우 이렇게 본문 중간에 애드센스 광고를 삽입하기 위해 소스 코드를 입력하고 나서 고민이 생겼습니다. 소스 코드 삽입 후 새롭게 작성하는 포스팅은 <div id="abc"></div> 호출 코드를 원하는 위치에 삽입하여 본문 중간으로 광고를 이동시켰는데 소스 코드를 삽입하기 이전에 작성한 글들은 어떻게 하죠? 참고로 저는 150건의 글이 있었는데 하루 날을 잡아서 모두 수작업으로 위치를 설정했습니다. 그래서 본문의 글을 작성하기 전에 전체적인 레이아웃과 어떻게 광고를 운영할지 정하는 게 먼저입니다. 잘 아시는 분이 있다면 가이드를 받고 설계를 하는 것이 좋겠죠. 좀 앞서가는 분이라면 다른 질문이 하나 더 나와야 합니다. 그 질문은 댓글을 통해서 접수가 되기를 기대해 봅니다. 없으면 말고...
참고로 저는 소스코드를
당분간 티스토리 블로그에 애드센스 광고 삽입과 관련된 포스팅을 연속해서 올리려고 합니다. 지난 시간에 티스토리 본문 상단에 애드센스 광고를 삽입하는 방법을 살펴보았습니다. 오늘은 티스토리 본문 작성 중 본문의 중간에 광고를 삽입하는 방법을 살펴보겠습니다. 본문 상단에 광고를 삽입하는 방법은 티스토리에서 지원하는 플러그인을 통해서 쉽게 삽입하는 방법을 제공했으나 본문 중간에 애드센스 광고를 삽입하기 위해서는 HTML/CSS 편집 기능을 이용해야 합니다. 오늘도 본문 중간에 삽입할 광고를 먼저 생성해 놓는 것이 편합니다. 참고로 본문 중간에 삽입할 광고의 크기와 형태를 먼저 정해야 하는데 저는 반응형 광고를 생성하고 그 코드를 본문 중앙에 삽입을 했습니다. 이유는 제 블로그에 접속하는 사용자 중 절반이 모바일 환경이라는 것을 구글 애널리틱스가 분석해줬기 때문입니다. 이전 과정은 이 포스팅의 하단에 있는 이전 글 보기를 통해서 조회가 가능합니다. 이제 본격적으로 내용 확인이 앞서서 본문 중간에 삽입하는 광고가 무엇인지 제 블로그의 레이아웃을 통해서 살펴보겠습니다. 아래 검은색 박스로 표시된 부분은 모두 수익형 광고입니다. 일부는 구글 애드센스이고 일부는 텐핑도 있습니다. 그중 오늘의 주제는 아래 화살표가 있는 곳입니다. 참고로 저는 본문의 내용이 바뀌는 부분 또는 가능한 본문의 중앙에 애드센스 광고를 삽입했습니다. 먼저 애드센스 계정으로 접속 후 본문에 삽입할 반응형 광고 코드를 복사합니다. 애드센스 계정에 접속 후 본문에 사용할 반응형 광고를 선택합니다. 이전 포스팅에서도 말씀드렸듯이 저는 나름 다양한 시도를 위해서 광고를 다양한 형태로 미리 생성을 해 두었습니다. 그리고 제 기준에서 식별이 가능하도록 이름을 붙여 놓았습니다. 오늘 사용할 코드는 반영형 본문 1이라는 이름으로 생성한 광고입니다. 아래 그림에서와 같이 코드 가져오기를 클릭합니다. 코드 가져오기를 클릭하면 아래와 같이 광고 코드 안내 창이 열립니다. 여기서 광고 코드가 있는 곳을 마우스로 클릭하면 그림에서와 같이 코드가 선택이 되고 마우스 오른쪽 버튼을 클릭해서 아래 그림과 같이 코드 내용을 클립보드로 복사를 할 수 있습니다. 이제 복사한 코드를 HTML 소스코드에 삽입을 하면 됩니다. 오늘 이용할 소스 코드는 아래 링크를 클릭해서 다운로드합니다. 다운 받은 소스 파일을 열어서 아래의 그림에서와 같이 '여기에 본문에 삽입할 애드센스 광고 코드를 삽입합니다' 이 문구를 지우고 복사한 애드센스 광고 코드를 삽입합니다. 붙여넣기(Ctrl + V)를 하시면 됩니다. 아래 그림과 같이 HTML/CSS 편집에서 삽입할 소스코드가 완성이 되었습니다. 이제 소스코드 전체를 선택(Ctrl + A) 후 아래 그림과 같이 마우스 오른쪽 버튼 클릭 후 속성 창에 복사(C) 또는 복사하기(Ctrl + C) 단축기를 이용해서 전체 코드를 클립보드로 복사합니다. 이제 티스토리의 관리자 페이지에서 HTML/CSS 편집을 클릭해서 편집 모드 창을 띄웁니다. 아래 그림에서와 같이 HTML을 선택합니다. 다음 복사한 소스코드를 삽입할 위치를 빠르게 검색하기 위해서 먼저 편집창 안쪽에 마우스를 클릭 한 후 Ctrl + F를 누르면 아래 그림의 노란색 부분과 같이 '검색 :'이라는 부분이 표시가 됩니다. 이곳에 'article_rep_desc'를 입력해서 소스코드를 붙여넣기 할 기준이 되는 곳을 찾습니다. 소소코드는 아래 그림에서와 설명과 같이 를 기준으로 바로 위 또는 아래에 코드를 삽입할 수 있습니다. 위에 코드를 삽입할 경우 본문 상단에 광고가 나타나고 아래에 광고를 삽입할 경우 본문 하단에 광고가 나타납니다. 참고로 저는 소스코드를 를 기준으로 했을 때 어느 곳에 소스코드를 붙여넣기를 했나요? 넵... 바로 아래쪽입니다. 그러면 광고가 어느 쪽에 자리를 잡을까요? 넵... 본문의 아래쪽입니다. 과연 그럴까요? 확인해 보겠습니다. 내용 확인을 위해서 작성 중인 포스팅에 대해 미리보기를 해 보았습니다. 아래 그림에서 녹색 박스로 표시된 부분입니다. 자세하게 보면 2개의 배너형 애드센스 광고가 있는 것을 확인할 수 있습니다. 위에 있는 광고는 다음 시간에 살펴볼 프러그인을 통햇 생성된 광고이고 아래쪽에 있는 광고가 조금 전 붙여 넣은 소스코드가 생성한 광고입니다. 질문이 없나요? 제 설명을 잘 따라왔다면 이 시점에 질문이 있어야 합니다. 그래도 없나요? 그럼 제가 계속 설명을 하겠습니다. 우리는 이 포스팅의 제목에서와 같이 본문 중간에 애드센스 광고를 삽입하기로 했습니다. 그런데 소스코드를 넣고 나니 광고는 본문의 하단에 자리를 잡았습니다. 이게 어떻게 된 것일까요? 이제 마지막 과정을 살펴보겠습니다. 본문 아래에 위치한 저 광고를 본문 작성 중 원하는 위치로 호출하는 방법입니다. 다시 소스 코드를 자세히 보겠습니다. 아까는 그냥 복사하기와 붙여넣기 밖에 설명이 없었습니다. 이제 간략하게 소스코드의 내용을 살펴보겠습니다. 소스 코드의 관계만 잘 이해하면 됩니다. 지금부터는 이 코드만 잘 아시면 됩니다. 아래 코드 중에서도 붉은색 부분만 잘 아셔도 됩니다. 위/아래 코드는 애드센스 광고를 본문 내용과 위/아래 공백을 만들기 위한 코드입니다. 가능하면 본문 내용에 겹치지 않도록 하기 위해서 함께 사용합니다. 그럼 가운데 붉은색으로 표시된 코드는 어떤 기능을 할까요? 바로 광고를 삽입할 위치를 결정하는 코드입니다. <div id="abc">라는 코드가 본래 <div id="xyz">라는 코드를 호출하여 불러냅니다. 따라서 본문 내용 중에 이 코드를 만나게 되면 기본적으로 본문의 아래에 있었던 광고가 호출을 받은 곳으로 이동을 하게 됩니다. 호출이 없으면 어떻게 될까요? 당연히 원래 있던 본문의 아래에 있게 됩니다. <p><br /><p> <div id="abc"></div> <p><br /><p> 이제 광고를 호출하는 방법도 배웠으니 광고를 삽입해 보겠습니다. 먼저 지금 작성하는 포스팅에서 광고를 삽입할 위치를 결정합니다. 앞서 설명했지만 저는 본문 길이의 중앙 부위 또는 본문의 내용이 변경되는 지점에 광고를 삽입합니다. 아래 화살표 부분이 오늘 제가 본문 중간에 삽입할 광고입니다. 지금부터는 HTML 편집을 통해 위의 호출 코드를 입력해야 합니다. 코드를 삽입할 위치를 빨리 찾기 위해서 삽입할 위치의 아래쪽 글귀를 잘 봐 둡니다. 아래에 '이제 복사한 코드를'이라는 문장이 시작이 됩니다. 먼저 아래 그림과 같이 글쓰기 화면에서 우측 상단에 있는 HTML 체크 박스를 클릭 후 체크를 설정합니다. 그런 다음 아까 잘 봐 두었던 삽입 위치인 '이제 복사한 코드를'이란 곳을 찾아야 하는데 HTML 코드가 섞이다 보니 위치를 찾기가 쉽지 않습니다. 그래서 검색 기능을 이용해야 합니다. Ctrl +F를 누른 후 아래 그림과 같이 검색창에서 '이제 복사한 코드를'이라는 문구를 입력합니다. 편집기에서 해당 문구를 찾았습니다. 바로 그 문구 위쪽에 호출 코드를 직접 입력합니다. 아래 파란색 부분이 코드를 입력한 부분입니다. 이제 다시 글쓰기 화면에서 HTML 체크 박스를 클릭하여 체크를 해제합니다. 다시 작성 중인 포스팅 본문입니다. 호출 코드를 삽입하기 전과 삽입 후 달라진 것이 있나요? 호출 코드를 작성했는데 아직 광고가 보이지 않습니다. 놀라지 않아도 됩니다. 광고는 글을 발행 또는 미리보기를 해야 확인할 수 있습니다. 그런데 자세히 보셨다면 차이점을 발견할 수 있습니다. 위에서 호출 코드를 삽입하기 전과 아래의 그림을 다시 한번 자세히 살펴보세요. 차이점을 찾으셨나요? 찾으셨다면 아래에 댓글로 남겨주세요. 비밀입니다. 포스팅을 발행하기 전에 본문 중간에 애드센스 광고가 정상적으로 노출이 되는지 확인하고 싶으면 미리보기를 클릭하시면 됩니다. 새로운 탭이 열리면서 작성 중인 글에 대해 현재까지 글쓰기가 진행된 모습을 보여줍니다. 아래 그림에서와 같이 애드센스 광고가 본문 중간에 노출이 되는 것을 볼 수 있습니다. 바로 우리가 호출했던 그곳에... 이제 본문 중간에 애드센스 광고를 삽입하는 과정을 순서대로 쭉 살펴보았습니다. 최대한 따라 하기 쉽게 설명을 했습니다. 여기까지 따라오는데 문제는 없었을 것으로 생각합니다. 혹시 질문이 없나요? 있어야 하는데... 저의 경우 이렇게 본문 중간에 애드센스 광고를 삽입하기 위해 소스 코드를 입력하고 나서 고민이 생겼습니다. 소스 코드 삽입 후 새롭게 작성하는 포스팅은 <div id="abc"></div> 호출 코드를 원하는 위치에 삽입하여 본문 중간으로 광고를 이동시켰는데 소스 코드를 삽입하기 이전에 작성한 글들은 어떻게 하죠? 참고로 저는 150건의 글이 있었는데 하루 날을 잡아서 모두 수작업으로 위치를 설정했습니다. 그래서 본문의 글을 작성하기 전에 전체적인 레이아웃과 어떻게 광고를 운영할지 정하는 게 먼저입니다. 잘 아시는 분이 있다면 가이드를 받고 설계를 하는 것이 좋겠죠. 좀 앞서가는 분이라면 다른 질문이 하나 더 나와야 합니다. 그 질문은 댓글을 통해서 접수가 되기를 기대해 봅니다. 없으면 말고...
내용 확인을 위해서 작성 중인 포스팅에 대해 미리보기를 해 보았습니다. 아래 그림에서 녹색 박스로 표시된 부분입니다. 자세하게 보면 2개의 배너형 애드센스 광고가 있는 것을 확인할 수 있습니다. 위에 있는 광고는 다음 시간에 살펴볼 프러그인을 통햇 생성된 광고이고 아래쪽에 있는 광고가 조금 전 붙여 넣은 소스코드가 생성한 광고입니다.
질문이 없나요? 제 설명을 잘 따라왔다면 이 시점에 질문이 있어야 합니다. 그래도 없나요? 그럼 제가 계속 설명을 하겠습니다. 우리는 이 포스팅의 제목에서와 같이 본문 중간에 애드센스 광고를 삽입하기로 했습니다. 그런데 소스코드를 넣고 나니 광고는 본문의 하단에 자리를 잡았습니다. 이게 어떻게 된 것일까요?
이제 마지막 과정을 살펴보겠습니다. 본문 아래에 위치한 저 광고를 본문 작성 중 원하는 위치로 호출하는 방법입니다. 다시 소스 코드를 자세히 보겠습니다. 아까는 그냥 복사하기와 붙여넣기 밖에 설명이 없었습니다. 이제 간략하게 소스코드의 내용을 살펴보겠습니다.
소스 코드의 관계만 잘 이해하면 됩니다. 지금부터는 이 코드만 잘 아시면 됩니다. 아래 코드 중에서도 붉은색 부분만 잘 아셔도 됩니다. 위/아래 코드는 애드센스 광고를 본문 내용과 위/아래 공백을 만들기 위한 코드입니다. 가능하면 본문 내용에 겹치지 않도록 하기 위해서 함께 사용합니다.
그럼 가운데 붉은색으로 표시된 코드는 어떤 기능을 할까요? 바로 광고를 삽입할 위치를 결정하는 코드입니다. <div id="abc">라는 코드가 본래 <div id="xyz">라는 코드를 호출하여 불러냅니다. 따라서 본문 내용 중에 이 코드를 만나게 되면 기본적으로 본문의 아래에 있었던 광고가 호출을 받은 곳으로 이동을 하게 됩니다. 호출이 없으면 어떻게 될까요? 당연히 원래 있던 본문의 아래에 있게 됩니다.
<p><br /><p>
<div id="abc"></div>
<p><br /><p>
이제 광고를 호출하는 방법도 배웠으니 광고를 삽입해 보겠습니다. 먼저 지금 작성하는 포스팅에서 광고를 삽입할 위치를 결정합니다. 앞서 설명했지만 저는 본문 길이의 중앙 부위 또는 본문의 내용이 변경되는 지점에 광고를 삽입합니다. 아래 화살표 부분이 오늘 제가 본문 중간에 삽입할 광고입니다. 지금부터는 HTML 편집을 통해 위의 호출 코드를 입력해야 합니다. 코드를 삽입할 위치를 빨리 찾기 위해서 삽입할 위치의 아래쪽 글귀를 잘 봐 둡니다. 아래에 '이제 복사한 코드를'이라는 문장이 시작이 됩니다.
먼저 아래 그림과 같이 글쓰기 화면에서 우측 상단에 있는 HTML 체크 박스를 클릭 후 체크를 설정합니다. 그런 다음 아까 잘 봐 두었던 삽입 위치인 '이제 복사한 코드를'이란 곳을 찾아야 하는데 HTML 코드가 섞이다 보니 위치를 찾기가 쉽지 않습니다. 그래서 검색 기능을 이용해야 합니다. Ctrl +F를 누른 후 아래 그림과 같이 검색창에서 '이제 복사한 코드를'이라는 문구를 입력합니다. 편집기에서 해당 문구를 찾았습니다. 바로 그 문구 위쪽에 호출 코드를 직접 입력합니다. 아래 파란색 부분이 코드를 입력한 부분입니다.
이제 다시 글쓰기 화면에서 HTML 체크 박스를 클릭하여 체크를 해제합니다. 다시 작성 중인 포스팅 본문입니다. 호출 코드를 삽입하기 전과 삽입 후 달라진 것이 있나요? 호출 코드를 작성했는데 아직 광고가 보이지 않습니다. 놀라지 않아도 됩니다. 광고는 글을 발행 또는 미리보기를 해야 확인할 수 있습니다.
그런데 자세히 보셨다면 차이점을 발견할 수 있습니다. 위에서 호출 코드를 삽입하기 전과 아래의 그림을 다시 한번 자세히 살펴보세요. 차이점을 찾으셨나요? 찾으셨다면 아래에 댓글로 남겨주세요. 비밀입니다.
포스팅을 발행하기 전에 본문 중간에 애드센스 광고가 정상적으로 노출이 되는지 확인하고 싶으면 미리보기를 클릭하시면 됩니다. 새로운 탭이 열리면서 작성 중인 글에 대해 현재까지 글쓰기가 진행된 모습을 보여줍니다. 아래 그림에서와 같이 애드센스 광고가 본문 중간에 노출이 되는 것을 볼 수 있습니다. 바로 우리가 호출했던 그곳에...
이제 본문 중간에 애드센스 광고를 삽입하는 과정을 순서대로 쭉 살펴보았습니다. 최대한 따라 하기 쉽게 설명을 했습니다. 여기까지 따라오는데 문제는 없었을 것으로 생각합니다. 혹시 질문이 없나요? 있어야 하는데... 저의 경우 이렇게 본문 중간에 애드센스 광고를 삽입하기 위해 소스 코드를 입력하고 나서 고민이 생겼습니다. 소스 코드 삽입 후 새롭게 작성하는 포스팅은 <div id="abc"></div> 호출 코드를 원하는 위치에 삽입하여 본문 중간으로 광고를 이동시켰는데 소스 코드를 삽입하기 이전에 작성한 글들은 어떻게 하죠? 참고로 저는 150건의 글이 있었는데 하루 날을 잡아서 모두 수작업으로 위치를 설정했습니다. 그래서 본문의 글을 작성하기 전에 전체적인 레이아웃과 어떻게 광고를 운영할지 정하는 게 먼저입니다. 잘 아시는 분이 있다면 가이드를 받고 설계를 하는 것이 좋겠죠.
좀 앞서가는 분이라면 다른 질문이 하나 더 나와야 합니다. 그 질문은 댓글을 통해서 접수가 되기를 기대해 봅니다. 없으면 말고...