이 블로그에 적용되어 있는 Square스킨은 반응형 스킨으로 반응형 애드센스 광고를 달 경우 자동으로 광고의 크기가 조절되어 보여지게 됩니다. 티스토리에서 기본으로 제공해주는 Google AdSense (반응형) 플러그인을 사용하여 아주 손쉽게 데스크탑과 모바일에 광고를 게재할 수 있습니다.
하지만 한가지 아쉬운 것이 그냥 플러그인에 애드센스 코드를 복사하여 붙여넣을 경우에는 본문 내용의 바깥쪽에 덩그러니 광고가 보여져서 광고에 쉽게 눈이 가지 않는 구조를 가지게 됩니다. 애드센스 광고로 수익을 올리는 블로그의 글들을 읽어보면 아래 사진과 같이 글의 오른쪽에 광고가 있을 경우에 수익이 높다고 하는데 어떻게 할 수 있는지 알아보도록 하겠습니다.
광고코드 작성
우선 광고코드를 작성해보겠습니다.
구글 애드센스에서 새로 반응형 광고코드를 만들거나 기존에 만든 것이 있다면 있는 것을 활용할 수도 있습니다.
아래와 같은 광고코드 가져오기 화면에서 빨간박스의 숫자와 파란박스 숫자만 따로 메모장으로 복사해 놓습니다.
애드센스 광고 코드 다운.txt위의 텍스트 파일을 다운받아 실행하면 아래와 같이 보일 것입니다.
처음에 따로 복사해 놓았던 개인식별코드와 광고코드를 메모장의 해당위치에 붙여 넣습니다.
이대로 사용할 수도 있지만 개인 취향이나 블로그 설정에 맞게 조정해야 할 수도 있습니다.
녹색 밑줄은
광고를 오른쪽으로 치우치게 하는 코드이며 margin-left : 10px 값은 광고와 광고 왼쪽의 본문사이의 여백의 크기입니다.
본 블로그에는 10px이 적용되어 있으며 블로그에 맞게 여백을 수정할 수 있습니다.
오렌지색 밑줄은
창의 넓이가 밑줄값 이상이면 데스크탑용 광고를 출력하고 그 미만이면 모바일 광고를 출력하는 기준입니다.
이 블로그에는 960px로 적용했습니다.
이 값도 각 블로그에 맞게 조정해 줄 수 있습니다.
보라색 박스는
각 경우에 출력되는 광고의 크기를 조절합니다.
데스크탑에서는 가장 광고효과가 좋다는 336 x 280px를 해주었고, 모바일에서는 150 x 300px로 하여 아래와 같이 미니 스카이스크래퍼광고 효과를 얻을 수 있을까해서 실험적으로 설정해 두었습니다.
이 값 역시 조정하여 적용할 수 있습니다.
<모바일에서 150 x 300 크기의 광고>
광고코드 적용
이제 작성한 광고코드를 실제로 적용하는 방법입니다.
다른 블로그에서는 이 코드를 HTML 코드의 특정위치에다 입력하라고 설명하지만 그럴 필요 없이 처음에 설명한 대로 그냥 티스토리 기본 제공 플러그인에 집어 넣으면 됩니다.
블로그 관리 -> 플러그인 설정 -> Google Adsense(반응형) -> 광고1(상단)
에 위의 사진과 같이 코드를 집어 넣고 저장을 해주면 광고가 삽입되는 것을 확인 할 수 있을 것입니다.
이상 본문상단 오른쪽에 애드센스 광고 넣는 방법이었습니다.
최근댓글