블로그 본문 상단 우측또는 좌측에 반응형 광고 추가.

 

** 블로그 본문 상단에 반응형 광고를 추가해보자!**

 

아래 화면은 구글에서 권장하는 광고 배치입니다.

왼쪽과 오른쪽 사이드바 위치에 따른 광고 배치입니다.

336X280 크기의 큰 직사각형 단위의 광고를 제일 노출이 많이 되는 상단에 배치했습니다. 

그리고 사이드메 메뉴에는 본능적으로 눈이 가기에 사이드바 위치에 따라 좌우 달리 해주면 됩니다. 

구글 사이트의 링크를 참고하면 상세 설명을 볼수있습니다.

 

저의 경우는 사이드바 메뉴가 좌측에 있지만 광고는 우측에 배치하였습니다.

나중에 바꿀수도 있겠지만 왼쪽에 컨텐츠가 오는게 가독성 측면에서 더 나은 느낌이 들어서 임의로 배치했습니다.

 

자 이제 한번 적용해 보도록 하겠습니다.

HTML 소스를 직접 수정하는것이라 어렵게 느낄수도 있지만 따라하면 그리 어렵지 않게 적용가능합니다.

 

https://support.google.com/adsense/answer/187653?hl=ko&ref_topic=29880

 

 

 

1. 먼저 구글에서 광고단위 -> 내광고 -> 새광고 단위를 클릭한 다음 반응형 웹을 선택하고 적당한 이름을 부여한 후 광고 단위를 생성합니다.

 

 

2. 아래와 같이 생성된 소스 코드를 복사해놓습니다.

 

 

3. 이제 자신의 티스토리 블로그의 관리 -> HTML/CSS 편집 화면으로 갑니다.

   <div class = "article"> 이 부분이 본문 내용이 들어가는 구간입니다.

   ##_article_rep_decs_## 이게 본문 내용입니다.

   <div class = "article"> 와 이 문장 사이에 구글에서 복사한 소스코드를 복사해서 넣어주면 됩니다. 

 

 

4. 그리고 위 화면에서 빨간색 부분 처럼 수정해주면 됩니다.

   adsbygoogle 이 부분에서 width : 336px; height : 280px; float: right, @media 를 추가해주었습니다.

   4-1. width, height는 광고의 크기입니다.

   4-2. float는 광고의 위치인데 float: left를 주면 왼쪽에 광고가 위치합니다.

   4-3. @media를 추가해주어야합니다.

         @media는 출력되는 기기의 해상도별 화면크기를 조정할때 추가해주는 구문입니다.

         작은 기기에서 광고가 나올경우를 감안해서

         @min-width: 350px 보다 작을경우 화면크기를 200x150으로 해주었습니다.

 

이제 모든 설정이 끝났습니다. 저장후 블로그를 확인해보면 아래화면과 같이 광고가 추가된것을 확인할수 있습니다.