본문 바로가기

PC/인터넷 정보

테두리있는 애드센스 광고 배치



애드센스 블로그 수익은 스킨에 의해 많이 달라지지만 광고배치 또한 매우 중요합니다. 가장 많이 사용하시는게 상단 2개배치, 하단1배치를 가장 많이 사용하시는거 같고 요즘은 상단 1개, 하단 1개, 사이드 1개로 많이 하시는거 같습니다. 저또한 지금 상단2, 하단1로 사용하고 있습니다. 클릭률은 지금이 조금더 높은거 같습니다. 오늘 포스팅할 내용은 모바일 광고와 PC광고에 애드센스 광고를 깔끔하게 넣는 방식입니다. 아래 스샷들을 비교해 보시고 참조해 주세요





일반적인 테두리 없이 구글 애드센스 코드만 적용했을 때입니다. (PC버젼과 모바일 두개노출)

가장 편한방법이지만 본문과의 흡수를 생각한다면 이렇게 놓겠지만 

텍스트 광고가 나올 때 본문내용의 공백때문에 뭔가 비여서 허전해 보입니다.




테두리를 광고소스 두군대 삽입했을 때입니다. (PC버젼과 모바일 두개노출)

이렇게 보여주는것도 나름 테두리가 있어서 나쁘진않지만

광고와 광고가 만나는곳에 쌍선이 노출됩니다. (개인적으로 안좋아함)





테두리하나가 PC광고 모바일 광고를 동시에 감싸기 했을 때입니다. (PC버젼과 모바일 두개노출)

PC에서 볼 때는 테두리가 모바일광고 PC광고를 포함한 테두리가 생기고 모바일로 볼때는 모바일광고만 테두리가 생기는 겁니다. 처음에는 테두리를 빼고 광고를 넣었는데 조금 산만해 보여서 광고에 테두리를 쳤습니다. 



이해를 돕기 위해 테두리 색을 바꿔봤습니다.






구글 애드센스 모바일광고 와 PC광고 테두리 합처서 넣기


PC버젼 광고는 HTML/CSS에서 코드를 삽입하고 모바일용은 포스팅 본문안에 코드를 삽입하셔야합니다. (모바일버젼에 광고를 노출시키기 위해서는 본문내용안에 HTML로 광고 소스를 넣어야합니다.)


1. PC버젼 광고 HTML/CSS 코드 넣기



Step 1. skin.html에서 ctr+F로 Skin.html 안에 



애드센스 블로그 수익은 스킨에 의해 많이 달라지지만 광고배치 또한 매우 중요합니다. 가장 많이 사용하시는게 상단 2개배치, 하단1배치를 가장 많이 사용하시는거 같고 요즘은 상단 1개, 하단 1개, 사이드 1개로 많이 하시는거 같습니다. 저또한 지금 상단2, 하단1로 사용하고 있습니다. 클릭률은 지금이 조금더 높은거 같습니다. 오늘 포스팅할 내용은 모바일 광고와 PC광고에 애드센스 광고를 깔끔하게 넣는 방식입니다. 아래 스샷들을 비교해 보시고 참조해 주세요





일반적인 테두리 없이 구글 애드센스 코드만 적용했을 때입니다. (PC버젼과 모바일 두개노출)

가장 편한방법이지만 본문과의 흡수를 생각한다면 이렇게 놓겠지만 

텍스트 광고가 나올 때 본문내용의 공백때문에 뭔가 비여서 허전해 보입니다.




테두리를 광고소스 두군대 삽입했을 때입니다. (PC버젼과 모바일 두개노출)

이렇게 보여주는것도 나름 테두리가 있어서 나쁘진않지만

광고와 광고가 만나는곳에 쌍선이 노출됩니다. (개인적으로 안좋아함)





테두리하나가 PC광고 모바일 광고를 동시에 감싸기 했을 때입니다. (PC버젼과 모바일 두개노출)

PC에서 볼 때는 테두리가 모바일광고 PC광고를 포함한 테두리가 생기고 모바일로 볼때는 모바일광고만 테두리가 생기는 겁니다. 처음에는 테두리를 빼고 광고를 넣었는데 조금 산만해 보여서 광고에 테두리를 쳤습니다. 



이해를 돕기 위해 테두리 색을 바꿔봤습니다.






구글 애드센스 모바일광고 와 PC광고 테두리 합처서 넣기


PC버젼 광고는 HTML/CSS에서 코드를 삽입하고 모바일용은 포스팅 본문안에 코드를 삽입하셔야합니다. (모바일버젼에 광고를 노출시키기 위해서는 본문내용안에 HTML로 광고 소스를 넣어야합니다.)


1. PC버젼 광고 HTML/CSS 코드 넣기



Step 1. skin.html에서 ctr+F로 Skin.html 안에  검색해서 찾아주세요.


Step 2. 사각 박스안에 포스팅 좌측에 넣을 애드센스 광고 코드 삽입 (전 336*280 광고입니다.)


<div class="google_ad" >

   구글애드센스 광고 코드 삽입

</div>


     


Step 3lstyle.css에  google_ad{float:left;margin: 20px 10px 5px 2px;입력

20px(위여백) 10px(우측여백) 5px(아래여백) 2px(좌측여백) 입니다 자신의 스킨에 맞게 조정하세요.





2. 모바일 광고 포스팅 본문에 광고 소스 넣기


Step 1. 포스팅 작성시 HTML체크해서 편집모드로 들어갑니다.


Step 2. 포스팅 최상단에 Div구문으로 아래와 같이 모바일 구글광고 소스를 넣어 주세요

<div style="border:1px solid #ddd; height:300px; text-align:center; padding-top:20px;">

   

   모바일 구글애드센스 광고 코드 삽입


</div>

테두리두께(border), 테두리색상(solid #xxx), 박스높이(height)와 내부여백(padding)값은 스킨에 맞게 수정해 주세요





구글 애드센스 모바일광고 와 PC광고 확인하기


적용완료된 모습입니다. 모바일광고는 서식에 넣어서 사용하시면 편합니다. 



이상으로 애드센스광고 테두리 넣기 포스팅을 마치겠습니다.


검색해서 찾아주세요.


Step 2. 사각 박스안에 포스팅 좌측에 넣을 애드센스 광고 코드 삽입 (전 336*280 광고입니다.)


<div class="google_ad" >

   구글애드센스 광고 코드 삽입

</div>


     



애드센스 블로그 수익은 스킨에 의해 많이 달라지지만 광고배치 또한 매우 중요합니다. 가장 많이 사용하시는게 상단 2개배치, 하단1배치를 가장 많이 사용하시는거 같고 요즘은 상단 1개, 하단 1개, 사이드 1개로 많이 하시는거 같습니다. 저또한 지금 상단2, 하단1로 사용하고 있습니다. 클릭률은 지금이 조금더 높은거 같습니다. 오늘 포스팅할 내용은 모바일 광고와 PC광고에 애드센스 광고를 깔끔하게 넣는 방식입니다. 아래 스샷들을 비교해 보시고 참조해 주세요





일반적인 테두리 없이 구글 애드센스 코드만 적용했을 때입니다. (PC버젼과 모바일 두개노출)

가장 편한방법이지만 본문과의 흡수를 생각한다면 이렇게 놓겠지만 

텍스트 광고가 나올 때 본문내용의 공백때문에 뭔가 비여서 허전해 보입니다.




테두리를 광고소스 두군대 삽입했을 때입니다. (PC버젼과 모바일 두개노출)

이렇게 보여주는것도 나름 테두리가 있어서 나쁘진않지만

광고와 광고가 만나는곳에 쌍선이 노출됩니다. (개인적으로 안좋아함)





테두리하나가 PC광고 모바일 광고를 동시에 감싸기 했을 때입니다. (PC버젼과 모바일 두개노출)

PC에서 볼 때는 테두리가 모바일광고 PC광고를 포함한 테두리가 생기고 모바일로 볼때는 모바일광고만 테두리가 생기는 겁니다. 처음에는 테두리를 빼고 광고를 넣었는데 조금 산만해 보여서 광고에 테두리를 쳤습니다. 



이해를 돕기 위해 테두리 색을 바꿔봤습니다.






구글 애드센스 모바일광고 와 PC광고 테두리 합처서 넣기


PC버젼 광고는 HTML/CSS에서 코드를 삽입하고 모바일용은 포스팅 본문안에 코드를 삽입하셔야합니다. (모바일버젼에 광고를 노출시키기 위해서는 본문내용안에 HTML로 광고 소스를 넣어야합니다.)


1. PC버젼 광고 HTML/CSS 코드 넣기



Step 1. skin.html에서 ctr+F로 Skin.html 안에  검색해서 찾아주세요.


Step 2. 사각 박스안에 포스팅 좌측에 넣을 애드센스 광고 코드 삽입 (전 336*280 광고입니다.)


<div class="google_ad" >

   구글애드센스 광고 코드 삽입

</div>


     


Step 3lstyle.css에  google_ad{float:left;margin: 20px 10px 5px 2px;입력

20px(위여백) 10px(우측여백) 5px(아래여백) 2px(좌측여백) 입니다 자신의 스킨에 맞게 조정하세요.





2. 모바일 광고 포스팅 본문에 광고 소스 넣기


Step 1. 포스팅 작성시 HTML체크해서 편집모드로 들어갑니다.


Step 2. 포스팅 최상단에 Div구문으로 아래와 같이 모바일 구글광고 소스를 넣어 주세요

<div style="border:1px solid #ddd; height:300px; text-align:center; padding-top:20px;">

   

   모바일 구글애드센스 광고 코드 삽입


</div>

테두리두께(border), 테두리색상(solid #xxx), 박스높이(height)와 내부여백(padding)값은 스킨에 맞게 수정해 주세요





구글 애드센스 모바일광고 와 PC광고 확인하기


적용완료된 모습입니다. 모바일광고는 서식에 넣어서 사용하시면 편합니다. 



이상으로 애드센스광고 테두리 넣기 포스팅을 마치겠습니다.



Step 3lstyle.css에  google_ad{float:left;margin: 20px 10px 5px 2px;입력

20px(위여백) 10px(우측여백) 5px(아래여백) 2px(좌측여백) 입니다 자신의 스킨에 맞게 조정하세요.





2. 모바일 광고 포스팅 본문에 광고 소스 넣기


Step 1. 포스팅 작성시 HTML체크해서 편집모드로 들어갑니다.


Step 2. 포스팅 최상단에 Div구문으로 아래와 같이 모바일 구글광고 소스를 넣어 주세요

<div style="border:1px solid #ddd; height:300px; text-align:center; padding-top:20px;">

   

   모바일 구글애드센스 광고 코드 삽입


</div>

테두리두께(border), 테두리색상(solid #xxx), 박스높이(height)와 내부여백(padding)값은 스킨에 맞게 수정해 주세요





구글 애드센스 모바일광고 와 PC광고 확인하기


적용완료된 모습입니다. 모바일광고는 서식에 넣어서 사용하시면 편합니다. 



이상으로 애드센스광고 테두리 넣기 포스팅을 마치겠습니다.