블로그 사이드바(sidebar) 좌, 우측 넓이(width)수정하고 구글 애드센스, 올블릿 등 광고 넣기

지난번에는 티스토리 블로그 3단형 스킨에서 우측 사이드바에 있는 기본 모듈을 좌측으로 옮기는 방법에 설명을 드렸고 이번에는 3단형 스킨의 좌측 사이드바와 우측 사이드바 넒이를 수정하여 애드센스 광고나 원하는 광고를 넣는 방법에 대해서 설명드리겠습니다.

위의 참고하는 스킨은 현재 제가 사용하는 3단형 NaVyMoD 스킨으로 좌, 우측 사이드바 모두 200px 사이즈입니다.

사이드바 넒이를 수정하는 이유는 블로그에 설치하는 광고 사이즈가 다양하기 때문에 사이드바에 광고를 넣을 경우 사이드바 넒이를 수정하는 것은 불가피하기 때문입니다.

티스토리 블로그에서 사용하는 광고중 올블릿 광고만 250px X 250px이고 구글 애드센스 광고는 300px X 250px, 250px X 250px 등 다양한 사이즈의 광고가 있습니다.

사이드바에 넣을 광고가 250px 또는 300px일 경우 사이드바에 넣은 후 블로그 레이아웃이 오류가 생기거나 아니면 노출되는 광고가 제대로 노출이 안되고 가려져서 보이는 경우가 있기때문에 사이드바에 광고를 넣을경우 꼭 사이드바 넒이를 수정해 주셔야 합니다.

사이드바 좌, 우측 넒이를 수정하고 광고를 넣은 참고 이미지로 좌측 사이드바는 올블릿 250px 넓이의 광고를 적용한 것이고 우측 사이드바는 300px의 구글 애드센스를 적용한 것입니다.

그럼 사이드바 좌, 우측의 넓이를 수정하기 위해 관리자(admin) - HTML/CSS 편집에서 style.css 창으로 이동합니다.

위 참고 이미지는 사이드바 넒이(width)를 수정하고 캡쳐한 이미지이고 위의 태그소스는 스크롤을 내리다 보면 /* 블로그 레이아웃 */ 목록에 아래와 같은 소스가 있을 것입니다.

#wrapBody {

clear: both;

width: /*@post-width:400*/ 1006px /*@*/;

}

#sidebar1 {

float: left;

width: 200px;

padding-top: 15px;

overflow: hidden;

display: inline;

}

#sidebar2 {

float: right;

width: 200px;

overflow: hidden;

display: inline;

}

 

#wrapBody width 소스는 전체 넒이를 뜻하고 #sidebar1의 width 태그소스는 좌측 사이드바 넓이를 뜻하고  #sidebar2의 width는 우측 사이드바 넓이를 뜻합니다.

좌측 사이드바 넒이든 우측 사이드바 넒이든 넓이(width)를 수정하고 늘어났으면 늘어난 만큼 줄였으면 줄인만큼 #wrapBody width 태그소스의 넒이도 같이 수정해 주셔야 합니다.

제가 광고를 넣기 위해 사이드바 넓이를 수정한 것을 예를 들어 설명하면  #sidebar1의 넓이(width)를 250px로 수정하고 #sidebar2의 넓이(width)를 300px 수정한 다음 #wrapBody의 width: /*@post-width:400*/ 1006px /*@*/;소스에서 변화된 사이드바의 px값만큼 1006px 값을 수정해주어야 하는데 좌측 50px 늘어났고 우측 100px 늘어났으니 합이 150px를 늘려 주어야 하기 때문에 1006px를 1150px로 수정하시고 저장하시면 됩니다.

writey by 7istory.tistory.com