블로그(블로거, 블로그스팟) 상단 및 하단에 광고를 2개 넣기
데스크탑 환경에서는 2개, 모바일 환경에서는 1개로 보이는 미디어(@media)쿼리를 이용한 광고 추가 방법을 안내해드리겠습니다. 천천히 따라해 보시면 누구든 가능하도록 최대한 서술해 보았으니 한 번 도전해 보세요. 애드센스 승인이 되어 있는 사용자분을 기준으로 합니다.
디스플레이 광고를 만들었으면 다음 화면에서 상기와 같은 HTML 코드를 받을 수 있습니다. 형식은 같으며 사용자에 따라 data-ad-client의 pub번호와 data-ad-slot 값이 상이할 것입니다.
화면 아래에서 파란색으로 표시가 된 [코드 복사]를 눌러 주세요. 화면 위에서 설명하고 있는 "페이지의 <body></body> 태그 사이에 광고 단위 코드를 복사해서 붙여넣으세요."를 진행하기 위하여 복사를 했습니다.
블로그 플랫폼마다 HTML이 다르기 때문에 붙여넣기를 진행할 body의 위치가 달라집니다. 해당 body 위치를 찾는 방법을 안내해드리겠습니다.
크롬 브라우저(chrome browser)를 기준으로 F12 를 누르시면 개발자 도구가 나타납니다. 우측 상단에 Elements라고 적혀있는 부분의 왼쪽에 보시면 마우스 표시(사진에 보시면 파란색 불빛이 들어와 있습니다)를 찾을 수 있습니다. 해당 마우스 표시는 페이지에 있는 엘리먼트를 찾아서 검사(inspect)하는 기능을 제공하는 역할을 합니다.
마우스 표시(검사 버튼)를 누르고 애드센스를 추가하고자 하는 포스트 상단 부분을 클릭해 주십시오. 별도로 클릭을 하지 않더라도 작성글에 마우스를 올려보시면 해당 위치의 HTML 코드를 확인할 수 있습니다..
예시 자료의 블로그 같은 경우, div.post-entry에 게시물 본문이 들어가는 것을 확인할 수 있습니다. 이 부분은 사용자마다 모두 다를 것이므로 여러분은 본인의 블로그 게시물 태그를 확인하셔야 합니다. div.post-entry 엘리먼트를 기억하고 넘어가겠습니다.
블로그에서 [테마]로 이동하여 [HTML 편집]을 선택합니다.
크롬개발자도구에서 검사도구로 확인했던 엘리먼트 [div.post-entry]를 찾아갑니다. 상기에서 언급했듯이 여러분은 명칭이 다를 수 있으므로 각자의 엘리먼트를 찾아가셔야 합니다.
[div.post-entry]에서 [div]는 분할(division) 태그를 나타냅니다. [.post-entry]는 클래스(class) 속성(attribute)이 post-entry라는 것을 뜻합니다. 그래서 post-entry로 검색하시면 바로 찾을 수 있습니다. 실제 포스팅의 본문은 <data:post.body/>에 들어가는데 구글 블로그에서 제공하는 치환자입니다. 이것은 티스토리, 네이버 블로그 등 플랫폼마다 다릅니다. 그리하여 post.body 상단에 광고 태그를 추가하면 원하는 바를 달성할 수 있습니다.
처음에 복사한 코드에서 변경한 부분
광고 태그를 그대로 복사하기 전에 [ins]태그 안의 [class]부분에 topfirst와 topsecond 이름을 추가하였습니다. 클래스명은 임의로 정한 것이며, 여러분이 편하신 이름을 아무거나 붙여주시면 됩니다. 클래스를 추가한 이유는 각 클래스별로 디스플레이 속성을 변경하여 데스크탑, 모바일 환경을 확인하여 광고를 적절히 띄우기 위함입니다.
또한 광고 태그에서 [ins]태그 안의 [style display]부분을 지우고 <style>부분으로 옮기는 작업을 진행하였습니다. 처음에는 그대로 하려고 했는데, 그냥 진행했더니 데스크탑에서도 광고가 1개로 보이는 현상이 있어서 수정을 진행해 보았습니다. 스타일을 옮기지 않고도 2개로 가능한 방법을 찾으셨다면 그대로 진행하시면 됩니다.
*아래 코드 그대로 복사하시면 안 됩니다.
data-ad-client 부분과 data-ad-slot 부분에 발급받은 코드가 동일하게 들어갈 수 있도록 해야 합니다. 그렇게 해야 본인의 광고가 송출될 것입니다. 참고하셔서 한 번 설정해 보시면 될 것입니다. 그리고 익숙하지 않으시다면 진행하시기 전에 꼭 HTML 백업을 해두십시오. 백업하는 습관은 언제라도 옳습니다.
코드 설명을 해드리겠습니다. 광고 코드 2개를 크게 div태그로 묶었으며 글자정렬과 하단 마진을 15px로 하였습니다. 그리고 첫 번째 광고의 디스플레이는 블럭, 두 번째 광고는 논으로 하였습니다. @media쿼리를 통하여 현재 사용자의 디스플레이 환경이 최소 768px이면 두 광고 모두 인라인-블록 속성으로 변경처리를 진행합니다.