반응형

이번에는 Square 스킨 수정하기 두번째로 사이드바에 애드센스 광고 삽입하는 방법에 대해 알아보겠습니다. 

애드센스 광고다는 방법은 관련 글도 엄청 많고 어렵지도 않으므로 별로 쓰고 싶지 않았지만 사실 애드센스 광고 다는 법을 알리기 보다는 Square 스킨을 사용하는 분들에게 팁으로 애드센스 광고 크기에 맞춰서 Square 스킨을 수정하는 방법을 알려 드리고자 함이 더 큰 목적입니다.


   사이드바에 애드센스 광고 삽입



- 블로그 관리 -> 플러그인 -> 플러그인 설정 창을 엽니다.

- [관리및 통계] 분류의 [배너출력] 클릭 확인 클릭해줍니다. ( 맨위의 분류▽ 를 마우스로 한번 클릭해주면 정렬되어 쉽게 찾을 수 있습니다.)

- "이 플러그인은 사이드바에 배치해야 사용이 가능합니다. 사이드바 설정 페이지로 이동하시겠습니까?" 라는 메시지가 나오면 확인해서 이동해줍니다.

- [HTML 배너출력]을 사이드바에 추가

- 추가된 [HTML 배너출력] 모듈의 편집창을 열어 이름과 애드센스 광고 코드를 넣고 [사용자 모듈에 저장] 체크하면 [모듈보관함]에 저장되어 사용할 수 있습니다. 

- 저장하면 사이드바에 광고가 삽입 된 것을 확인 할 수 있습니다.




동영상에서 HTML 소스에 <center>  ...  </center>를 추가해 주었습니다.

보통 사이드바에 달리는 광고 크기는 300px x 600px이나 160px x 600px의 세로로 길쭉한 모양입니다.

이 블로그에 적용된 Square 스킨의 사이드바의 크기는 딱 300px로 만약 160px x 600px 크기의 광고를 넣을 경우에는 사이드바의 크기가 광고크기보다 커서 광고가 한쪽으로 치우쳐서 보기 싫은데 광고코드 삽입시에 <center>광고코드</center>와 같이 center 태그를 추가하여 가운데 정렬을 해주도록 합니다. 



   Square 스킨 사이드바 크기 조절



300px x 600px 크기의 배너인 경우에는 아래 사진과 같이 광고 오른쪽 끝부분과 사이드바 스크롤바가 겹쳐서 보여집니다. 

왠지 보기도 싫고 구글 정책에 위반되지나 않을까 걱정이 되기도 합니다. 




저는 그냥 쉽게  사이드바 크기를 좀 더 크게 해서 해결 했습니다. 


블로그 관리 -> 꾸미기 -> HTML/CSS 편집 창을 엽니다. 

CSS 편집 창에서 

Ctrl + F 를 눌러 sidebar를 검색하거나, 51번 라인으로 갑니다. 


01


위의 그림과 같이 width : 300px을 320px 고쳐 줍니다. 그러면 아래 그림처럼 바뀌어 스크롤바와 겹치지 않게 됩니다.



끝으로 CSS 편집창의 51번 라인에서 사이드바에 다양한 옵션을 줄 수 있습니다. HTML을 맛만 본 상태여도 배경색이라든지 여러가지 입맛에 맞게 수정이 가능 하므로 참고하시기 바랍니다.

반응형