IT정보

반응형 스킨으로 구글 애드센스 달기

YUNOLAND 2016. 2. 11. 15:29

구글 애드센스 광고효과가 제일 좋은 방법이 상단좌우, 하단좌우라는 글들을 보고 나도 적용하기 위해 정보를 많이 찾아봤지만 적용이 잘 안되어 가만히 방치해뒀다. 구정 설연휴를 보내고 돌아오니 일본은 건국기념일로 휴일, 그로인해 강제 6연휴를 보내고 있기에 업무관련 메일도 정리좀 하고, 갑자기 생각나 애드센스 광고를 다시 예쁘게 배치하고 싶어졌다. 구글링을 거쳐 드디어 원하는 위치에 원하는 크기로 달 수 있었다.


반응형 스킨을 사용하고 있기에 상단에 좌우 2개의 광고를 넣었을 경우 스마트폰으로 글을 열었을 때 화면이 좁아 상단2개의 광고가 위아래로 전화면에 보여 구글 애드센스 정책에 위반이 된다. 이 부분이 포인트인데 css편집에서 가로 최대치의 픽셀을 판단하여 스마트폰일 경우 두 광고중 하나를 보이지 않게 하고 나머지 하나를 가운데로 정렬시켜준다.


티스토리 관리자화면에서 HTML/CSS편집으로 가서 HTML을 편집하자.

개인적으로는 편집 프로그램(메모장 같은.. 본인은 sakura를 사용)에 소스 전체를 복사해서 붙여넣고 수정하며 관리하는 편이 편하다.


【1. HTML 편집


위 그림과 같이

구글 애드센스 광고효과가 제일 좋은 방법이 상단좌우, 하단좌우라는 글들을 보고 나도 적용하기 위해 정보를 많이 찾아봤지만 적용이 잘 안되어 가만히 방치해뒀다. 구정 설연휴를 보내고 돌아오니 일본은 건국기념일로 휴일, 그로인해 강제 6연휴를 보내고 있기에 업무관련 메일도 정리좀 하고, 갑자기 생각나 애드센스 광고를 다시 예쁘게 배치하고 싶어졌다. 구글링을 거쳐 드디어 원하는 위치에 원하는 크기로 달 수 있었다.


반응형 스킨을 사용하고 있기에 상단에 좌우 2개의 광고를 넣었을 경우 스마트폰으로 글을 열었을 때 화면이 좁아 상단2개의 광고가 위아래로 전화면에 보여 구글 애드센스 정책에 위반이 된다. 이 부분이 포인트인데 css편집에서 가로 최대치의 픽셀을 판단하여 스마트폰일 경우 두 광고중 하나를 보이지 않게 하고 나머지 하나를 가운데로 정렬시켜준다.


티스토리 관리자화면에서 HTML/CSS편집으로 가서 HTML을 편집하자.

개인적으로는 편집 프로그램(메모장 같은.. 본인은 sakura를 사용)에 소스 전체를 복사해서 붙여넣고 수정하며 관리하는 편이 편하다.


【1. HTML 편집


위 그림과 같이 를 찾아서 편집을 시작한다. 글의 본문을 나타내는 곳으로 그 위로 애드센스 코드를 달면 본문 상단, 그 아래로 애드센스 코드를 달면 본문 하단에 광고가 나타나게 된다. 본인은 PC에서는 상단 좌우측으로 2개, 하단 좌우측으로 2개, 스마트폰에서는 상단가운데 1개, 하단가운데 1개를 달 생각으로 이렇게 코드를 적었으나  위 아래로 삽입을 하는것이 중요하지 갯수는 개인의 스타일대로 바꿔도 상관없다.


각각 <!--광고좌측상단-->, <!--광고우측상단-->, <!--광고좌측하단-->, <!--광고우측하단-->에 생성된 코드를 복사해서 붙여주면 끝이다.


중요한건 여기서부터다. 반응형 스킨이기 때문에 스마트폰에서 화면사이즈가 자동으로 바뀌기 때문에 거기에 맞춰 광고삽입에도 변화를 주는 것이다.


【2. CSS 편집


HTML에 애드센스 코드를 삽입하는 위치의 생성자의 정의를 해주고 있다.

빨간 상자를 넣어준곳이 애드센스 정책을 피하는 가장 중요한 포인트다. 화면 사이즈의 최대가 991픽셀인 경우 우측상단과 우측하단의 광고는 보이지 않게 하고 나머지 두개는 가운데로 정렬해주고 있다.


그러면 실제 화면에서는 어떻게 출력되는지 확인해 보자.


【PC상단화면】: 화면상단 타이틀 바로 밑에 좌, 우로 광고가 하나씩 삽입 되어있다.



【PC하단화면】: 본문 하단에 좌, 우로 광고가 하나씩 삽입되어 있다.



【스마트폰 상단 화면】: 본문상단 타이틀 바로 밑 가운에 광고가 하나 삽입되어 있다.




 【스마트폰 하단 화면】: 본문 하단 가운데 광고가 하나 삽입되어 있다.


이렇게 구글 애드센스 광고가 삽입이 완료되었다. 

모두 정상적으로 완료된다면 PC화면에서는 구글 광고 2개, 스마트폰에서는 가변하는 동기식(가로로 길쭉한 모양)의 광고가 노출된다.



를 찾아서 편집을 시작한다. 글의 본문을 나타내는 곳으로 그 위로 애드센스 코드를 달면 본문 상단, 그 아래로 애드센스 코드를 달면 본문 하단에 광고가 나타나게 된다. 본인은 PC에서는 상단 좌우측으로 2개, 하단 좌우측으로 2개, 스마트폰에서는 상단가운데 1개, 하단가운데 1개를 달 생각으로 이렇게 코드를 적었으나 

구글 애드센스 광고효과가 제일 좋은 방법이 상단좌우, 하단좌우라는 글들을 보고 나도 적용하기 위해 정보를 많이 찾아봤지만 적용이 잘 안되어 가만히 방치해뒀다. 구정 설연휴를 보내고 돌아오니 일본은 건국기념일로 휴일, 그로인해 강제 6연휴를 보내고 있기에 업무관련 메일도 정리좀 하고, 갑자기 생각나 애드센스 광고를 다시 예쁘게 배치하고 싶어졌다. 구글링을 거쳐 드디어 원하는 위치에 원하는 크기로 달 수 있었다.


반응형 스킨을 사용하고 있기에 상단에 좌우 2개의 광고를 넣었을 경우 스마트폰으로 글을 열었을 때 화면이 좁아 상단2개의 광고가 위아래로 전화면에 보여 구글 애드센스 정책에 위반이 된다. 이 부분이 포인트인데 css편집에서 가로 최대치의 픽셀을 판단하여 스마트폰일 경우 두 광고중 하나를 보이지 않게 하고 나머지 하나를 가운데로 정렬시켜준다.


티스토리 관리자화면에서 HTML/CSS편집으로 가서 HTML을 편집하자.

개인적으로는 편집 프로그램(메모장 같은.. 본인은 sakura를 사용)에 소스 전체를 복사해서 붙여넣고 수정하며 관리하는 편이 편하다.


【1. HTML 편집


위 그림과 같이 를 찾아서 편집을 시작한다. 글의 본문을 나타내는 곳으로 그 위로 애드센스 코드를 달면 본문 상단, 그 아래로 애드센스 코드를 달면 본문 하단에 광고가 나타나게 된다. 본인은 PC에서는 상단 좌우측으로 2개, 하단 좌우측으로 2개, 스마트폰에서는 상단가운데 1개, 하단가운데 1개를 달 생각으로 이렇게 코드를 적었으나  위 아래로 삽입을 하는것이 중요하지 갯수는 개인의 스타일대로 바꿔도 상관없다.


각각 <!--광고좌측상단-->, <!--광고우측상단-->, <!--광고좌측하단-->, <!--광고우측하단-->에 생성된 코드를 복사해서 붙여주면 끝이다.


중요한건 여기서부터다. 반응형 스킨이기 때문에 스마트폰에서 화면사이즈가 자동으로 바뀌기 때문에 거기에 맞춰 광고삽입에도 변화를 주는 것이다.


【2. CSS 편집


HTML에 애드센스 코드를 삽입하는 위치의 생성자의 정의를 해주고 있다.

빨간 상자를 넣어준곳이 애드센스 정책을 피하는 가장 중요한 포인트다. 화면 사이즈의 최대가 991픽셀인 경우 우측상단과 우측하단의 광고는 보이지 않게 하고 나머지 두개는 가운데로 정렬해주고 있다.


그러면 실제 화면에서는 어떻게 출력되는지 확인해 보자.


【PC상단화면】: 화면상단 타이틀 바로 밑에 좌, 우로 광고가 하나씩 삽입 되어있다.



【PC하단화면】: 본문 하단에 좌, 우로 광고가 하나씩 삽입되어 있다.



【스마트폰 상단 화면】: 본문상단 타이틀 바로 밑 가운에 광고가 하나 삽입되어 있다.




 【스마트폰 하단 화면】: 본문 하단 가운데 광고가 하나 삽입되어 있다.


이렇게 구글 애드센스 광고가 삽입이 완료되었다. 

모두 정상적으로 완료된다면 PC화면에서는 구글 광고 2개, 스마트폰에서는 가변하는 동기식(가로로 길쭉한 모양)의 광고가 노출된다.



위 아래로 삽입을 하는것이 중요하지 갯수는 개인의 스타일대로 바꿔도 상관없다.


각각 <!--광고좌측상단-->, <!--광고우측상단-->, <!--광고좌측하단-->, <!--광고우측하단-->에 생성된 코드를 복사해서 붙여주면 끝이다.


중요한건 여기서부터다. 반응형 스킨이기 때문에 스마트폰에서 화면사이즈가 자동으로 바뀌기 때문에 거기에 맞춰 광고삽입에도 변화를 주는 것이다.


【2. CSS 편집


HTML에 애드센스 코드를 삽입하는 위치의 생성자의 정의를 해주고 있다.

빨간 상자를 넣어준곳이 애드센스 정책을 피하는 가장 중요한 포인트다. 화면 사이즈의 최대가 991픽셀인 경우 우측상단과 우측하단의 광고는 보이지 않게 하고 나머지 두개는 가운데로 정렬해주고 있다.


그러면 실제 화면에서는 어떻게 출력되는지 확인해 보자.


【PC상단화면】: 화면상단 타이틀 바로 밑에 좌, 우로 광고가 하나씩 삽입 되어있다.



【PC하단화면】: 본문 하단에 좌, 우로 광고가 하나씩 삽입되어 있다.



【스마트폰 상단 화면】: 본문상단 타이틀 바로 밑 가운에 광고가 하나 삽입되어 있다.




 【스마트폰 하단 화면】: 본문 하단 가운데 광고가 하나 삽입되어 있다.


이렇게 구글 애드센스 광고가 삽입이 완료되었다. 

모두 정상적으로 완료된다면 PC화면에서는 구글 광고 2개, 스마트폰에서는 가변하는 동기식(가로로 길쭉한 모양)의 광고가 노출된다.