본문 바로가기

SNS와 블로그

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

반응형

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

이번 포스팅에서는 티스토리 애드센스 상단 광고 2개 넣기 방법을 알아보겠습니다. 티스토리는 애드센스 광고를 달 수 있어서 유튜브처럼 수익을 낼 수 있습니다. 


유명한 블로거는 웬만한 대기업 연봉보다 많은 돈을 티스토리 애드센스 광고로 벌고 있습니다. 그래서 많은 사람들이 애드센스에 관심을 갖고 있습니다.


티스토리 블로그를 보면 아래와 같이 상단에 2개의 광고가 나오는 블로그가 있습니다. 그러면 지금부터 티스토리 애드센스 상단 광고 2개 넣는 방법을 알아보겠습니다. 

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

여기서 주의해야 할 점이 있습니다. 모바일에서는 상단에 광고가 2개가 나오게 되면 애드센스 정책 위반이라고 합니다. 따라서 모바일에서는 상단에 광고가 1개만 나와야 합니다. 


PC에서는 2개, 모바일에서는 1개가 나와야 하는 것입니다. 이렇게 화면 크기에 따라서 다른 광고가 나오게 하려면 미디어쿼리를 이용해야 합니다. 


애드센스 상단 광고 2개 넣기

1. 애드센스 사이트 들어가기

애드센스 상단 광고 2개 넣기 위해서는 애드센스에서 새로운 광고 단위를 만들어보겠습니다. 아래처럼 애드센스 사이트로 들어갑니다. 그리고 자신의 애드센스 계정으로 로그인합니다. 


2. 광고단위 만들기

왼쪽 메뉴에서 <광고>를 선택합니다. 그리고 <광고 단위 기준>-<디스플레이 광고>를 순서대로 클릭합니다. 


광고단위를 이름을 정하겠습니다. 이 포스팅에서는 '티스토리 상단 왼쪽'이라고 정했습니다. 


광고는 반응형을 정했습니다. 반응형을 사용하면 블로그의 크기에 맞게 광고가 나옵니다. 


사각형 모양인 경우 아래와 같이 보입니다. 


<만들기> 버튼을 클릭합니다. 


광고단위 만들기가 완료되었습니다. 아래처럼 코드가 나오는데 이것을 블로그에 넣으면 광고가 나옵니다. 


3. 펍 번호와 슬롯번호 잘 기억하기

애드센스는 계정마다 번호가 있습니다. 마치 주민등록번호와 같습니다. 이것을 펍 번호라고 합니다. 'ca-pub-" 뒤에 나오는 번호가 펍 번호입니다. 한 애드센스 계정이 광고를 만들면 이 펍 번호는 같게 됩니다. 


그리고 'data-ad-slot='위에 나오는 번호가 슬롯 번호입니다. 이 번호로 광고단위를 구분해줍니다. 이 펍 번호와 슬롯번호를 잘 기억해둡니다. 


'data-full-width-responsive' 속성을 'false'로 바꾸면 광고가 화면에 꽉 차지 않습니다. 그리고 'data-ad-language' 속성을 'ko'로 정하는 코드를 추가하면 한국어(ko)에 맞는 애드센스 광고가 잘 나오게 할 수 있습니다. 


상단에 다른 종류의 광고가 2개 나오게 하려면 광고단위를 하나 더 만들어야 합니다. 


새로 만든 광고단위는 펍 번호는 같겠지만 슬롯번호는 다르게 됩니다. 


아래와 같이 새로운 광고 단위가 만들어졌습니다. 


4. 첨부파일에 펍 번호와 슬롯번호 입력하기

첨부파일을 다운받아서 메모장으로 엽니다. 그러면 아래와 같이 코드가 있습니다. 이것은 CSS 코드와 애드센스 광고코드입니다. CSS는 블로그(HTML)가 어떻게 보일지 정해줍니다. 

애드센스 상단 PC 2개 모바일 1개.txt


<div style="text-align: center;">는 안에 들어있는 것을 가운데 정렬해줍니다. 


'.adsense_1'은 클래스입니다. 이 클래스를 사용하는 것은 display 속성을 inline-block으로 정합니다. 그리고 가로를 300px로, 세로를 250px로 정해줍니다. 


@media가 들어간 부분이 바로 미디어쿼리입니다. 화면 크기에 따라서 다르게 보일 수 있게 해줍니다. 'max-width:300px' 는 최대 크기가 300px이라는 뜻입니다. 이 말은 화면 크기가 300px보다 작을 때라는 뜻입니다. 


화면 크기가 300px보다 작으면 '.adsense_1'를 사용하는 것은 가로를 300px, 세로를 250px로 정한다는 뜻입니다.


아래는 화면 크기가 900px보다 크고 999px보다 클 때 가로와 세로의 크기를 정하는 미디어쿼리 코드입니다. 이렇게 미디어쿼리로 화면에 따라서 다르게 보이도록 할 수 있습니다. 


아래로 내리다보면 아래와 같이 'adsense_1'이라고 적힌 곳이 있습니다. 이것이 바로 'adsense_1' 클래스를 말합니다. ■에는 펍 번호를, ○에는 왼쪽 애드센스 광고 슬롯번호를 붙여넣습니다. 


'adsense_empty'라는 클래스도 있습니다. 광고 2개 사이에 어느 정도 공간이 있도록 만들기 위해 사용합니다.


화면 크기가 800px보다 크면 세로(공간)를 20px로 정합니다. 

@media (min-width:800px) {

                .adsense_empty {

                    width: 20px;

                   }

                }


이 값을 바꾸면 광고 2개 사이의 거리가 달라집니다. 


'adsense_2'는 오른쪽 광고입니다. 이 광고는 모바일에서는 보이지 말아야 합니다. 따라서 화면이 799보다 작으면 보이지 않게 해야 합니다. 'display:none'을 하면 화면에서 보이지 않게 됩니다. 


마찬가지로 펍 번호와 슬롯번호를 붙여넣습니다. 


CSS와 미디어쿼리에 관한 설명은 유튜브에 자세히 나와있습니다. 관심있는 분은 유튜브에 검색하셔서 공부해보시면 좋을 것 같습니다.


5. 코드를 플러그인에 붙여넣기

이제 코드를 복사해서 플러그인에 붙여넣으면 됩니다. 


구글 애드센스(반응형) 플러그인을 엽니다. 


그리고 상단에 코드를 붙여넣고 <변경사항 적용>을 클릭합니다. 


그러면 아래와 같이 PC에서는 상단에 2개의 애드센스 광고가 나옵니다. 

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


그리고 모바일에서는 광고가 1개만 나옵니다. 

모바일 상단 1개 광고


이번 포스팅에서는 티스토리 애드센스 상단 광고 2개 넣기 방법을 알아봤습니다. 나중에 CSS를 배우면 블로그를 여러분의 취향에 맞게 꾸밀 수 있습니다. 블로그 본문 크기가 너무 작으면 광고 2개가 안 나올 수도 있습니다. 이 점을 잘 생각하시고 코드를 사용하시기 바랍니다. 감사합니다.


추천 포스팅


반응형