구글 애드센스 광고 갯수 제한이 없어지기 전에는 모바일에서는 보통 글 위와 글 아래에 두 개의 광고를 다는게 일반적이었습니다.
하지만 제한이 풀린 이후에는 더 많은 광고를 달 수 있게 되었습니다.
이번 글에서는 Square스킨과 같은 반응형 스킨에서 데스크탑 상태에서는 카테고리 다른 글 목록 왼쪽에 광고가 나타나고 모바일 상태에서는 카테고리 다른 글 보기 아래쪽에 광고가 나타나게 하는 방법에 대해 알아보겠습니다.
<데스크탑에서 애드센스광고>
<태블릿에서 애드센스광고>
<모바일에서 애드센스 광고>
위의 사진들에서 볼 수 있듯이 동일한 광고코드를 가지는 반응형 광고가 데스크탑(336X280), 태블릿(468X280), 모바일(300X280)에서 각각 다른 크기로 보이게 됩니다. 방법은 HTML과 CSS에 아래의 코드를 붙여 넣기만 하면 되는데 입맛과 자기 블로그에 맞게 수정하는 방법을 알려드리겠습니다.
애드센스 HTML 코드 작성
우선 첫번째로 구글 애드센스 광고코드를 HTML에 붙여 넣는 방법입니다.
우선 애드센스에서 기존의 사용하지 않는 광고가 있으면 그 광고의 개인식별코드와 광고코드를 아니면 새로운 광고 단위를 만들어서 따로 복사해 둔 뒤 아래의 HTML 코드에 붙여 넣은 뒤 완성된 코드를 복사합니다. 여기에서 필요한 것은 개인식별코드와 광고코드 뿐이므로 광고는 굳이 반응형 광고를 만들 필요는 없으며 버려두었던 광고코드를 재활용하여도 상관 없습니다.
HTML 텍스트 복사용 다운로드 파일.txt블로그 관리 --> 꾸미기 --> HTML/CSS 편집 창을 열어 HTML 편집기에서 CTRL+F로 "article_rep_desc" 를 검색하여 아래와 같이 붙여 넣기를 합니다.
애드센스 CSS 코드 작성
CSS :
/*구글 - 카테고리 - 우 광고*/
@media (min-width:960px) { div.another_category {display:block;float:left;clear:both;
!important; max-width:495px;margin-top:0px;padding-bottom:5px;}}
@media (min-width:960px) { .adslot_1 { width: 336px; height: 280px;} }
@media (max-width:960px) { .adslot_1 { width: 468px; height: 280px;} }
@media (max-width:468px) { .adslot_1 { width: 300px; height: 280px;} }
위의 코드에서 495px은 데스크탑 상태에서 카테고리 목록의 크기로 적용된 블로그의 크기에 맞게 조절할 필요가 있습니다.
최근댓글