애드센스 광고코드 1개로 PC, 스마트폰 사이즈 다르게 넣기

 애드센스 광고를 블로그에 넣을 때 보통은 300*250을 많이 넣습니다. 이는 구글에서 스마트폰용으로 광고 크기 제한을 300*80에서 300*250의 사이즈로 정했기 때문에 정책 위반을 피하기 위함 입니다. 그런데 본인의 블로그에서 PC로 봤을 때, 300*250의 광고 크기는 뭔가 맞지 않는 것 같아서 그냥 반응형으로 넣으면 휴대전화에서 볼 때는 300*250으로 잘 나오지만 PC에서 보면 블로그 폭에 맞추는 것 까진 좋은데 높이가 좀 아쉬울 때가 있습니다. 

 저도 위와 같은 생각으로 구글링 등을 열심히 몇일 하다보니 하나의 코드를 PC용 크기와 스마트폰용 크기가 따로 출력 되게 도와 주는 사이트를 찾았습니다. 

 Adsense Helper 라는 웹사이트 입니다. 링크 

 간략하게 사용법을 알려 드릴 테니 저랑 비슷한 고민을 했던 블로거 여러분들 잘 따라서 사용해 보시기 바랍니다. 시험 해봐을 때는 모든 반응형 코드(반응형, 자동 삽입형, 인피드형, 링크형)에서 다 됩니다. 일반 반응형 코드로 알려 드리겠습니다. 

 저도 HTML 문외한인데요. 직접 쳐넣고 그런거 없이 애드센스 코드를 넣어서 변환만 눌러주면 자동으로 HTML이 완성되서 결과값을 다시 복사해서 붙여 넣기만 하면 됩니다. 복붙 2번이면 클리어 되니까 따라 오세요.

 홈페이지에 접속하면 위와 같이 단촐한 화면이 나옵니다. 거기에서 두 번째 '고급 코드 생성기'를 클릭 합니다. 아래 와 같이 반응형 고급 코드 생성기라고 화면이 나타납니다.

 애드센스 내 광고에서 '반응형 코드'를 복사해서 코드를 여기에 삽입 하세요 밑에 붙여 넣기를 해줍니다. 

 설정 창을 보시면 광고 이름에는 영어만 쓸수 있구요. 텍스트만 넣으세요. 마침표 등의 특수문자가 들어가면 광고가 작동하지 않습니다. 밑에 기본 크기가 스마트폰에 보여지는 크기 입니다. 저는 PC와 스마트폰간의 차이를 보기 위해 200px X 200px로 정했습니다. 

 밑에 설정은 400px 이상일 때 정해주는 크기인데요. 대부분의 패드류로 불리는 태블릿에서 보여지는 사이즈입니다. 336*280이 적당 하더군요. 이 크기는 본인이 따로 정할 수 있습니다. 마지막에 768px 이상일 때는 보통 일반 컴퓨터 화면이라고 보시면 되고요. 저는 200px X 600px로 정해 봤습니다. 크기 설정을 마쳤으면 오른쪽 밑에  분홍생 확인을 누릅니다. 

 

 

 사이트 맨 아래에 위와 같이 생성된 코드라고 변형이 되어서 뜹니다. 이걸 드래그 해서 원하는 곳에 넣어 주시면 광고가 화면 픽셀수에 맞춰서 PC용, 스마트폰용 크기로 잘 출력이 됩니다. 저는 본문 중단에 넣어 봤습니다. 

PC에 출력되는 광고 화면입니다. 200 x 600 으로 설정한대로 잘 나옵니다.

스마트폰용 200 x 200 광고 출력 화면입니다. 

저도 HTML 까막눈이라 잘 몰랐는데요. PC 화면의 광고 출력을 보시면 좌측으로 너무 쏠렸습니다. 이렇 때 간단하게 중앙으로 광고 코드를 정렬하는 방법이 있는데요. 

HTML 편집기에서 광고 코드 바로 위에 

<center>라고 타이핑 하시고 코드 맨밑에 </center>라고 맺음 텍스트를 넣으면

 

 이렇게 이쁘게 가운데로 애드센스 광고가 정렬이 됩니다. 가운데 정렬 하는 법 찾는데도 오래 걸리더라고요. 최근에 티블로그 운용하면서 드는 생각이, 코딩을 배우자! 입니다. 후~ 건축시공 기술사도 준비 해야 하는데 말이죠. 그래도 코딩 기본 정도는 배우는 게 좋을 거 같습니다. 

 자 이 글을 따라서 본인이 원하는 크기로 자유 자재로 광고 크기를 조정해 보시기 바랍니다.