티스토리 블로그에 애드센스 넣기 - 2. 좌우 고정 광고 스크립트

티스토리 블로그를 운영하다보면 대부분의 블로거 님들이 애드센스를 포스팅에 사용을 하고자 하시거나, 넣고 계실것 입니다. 하지만 본문의 위와 아래에 광고가 들어가는 플러그인으로 모든 욕구가 충족되지는 않죠.

그래서 대부분의 블로거 님들은 스크립트를 활용해서 본문 중간에 넣거나 좌우 여백을 활용해서 광고를 넣고 계실 것 같은데요

제 티스토리 블로그에는 크게 3가지 부분에 광고가 적용되어져 있습니다. 기본적으로 본문 상하(플러그인 활용), 본문 중간(자동 스크립트 활용), 그리고 마지막으로 좌우에 고정되어진 광고가 있습니다. 

플러그인은 너무 쉬워서 패스했고, 본문 중간에 자동으로 넣는다거나, 인피드광고를 활용하는 부분은 포스팅을 통해 설명을 드렸고요. 그 두번째 시간으로 좌우에 광고를 고정시켜서 넣는 스크립트를 알아보도록 하겠습니다. 

제 블로그에 설치된 광고에 관심이 많이 있으셨는데.. 그중에서도 좌우에 고정된 광고에 대해서 가장 궁금증이 많이 있으셨던 것 같습니다. 의외로 간단한 방법이기 때문에 스크립트를 모르셔도 하나씩 따라해 보시기 바랍니다. 

좌우 광고스크립트 넣을 공간을 먼저 만들자

일단은 광고를 넣는 스크립트를 진행하기 전에 광고가 들어갈만한 공간을 먼저 만들어야합니다. 사실 티스토리에서 제공하는 POSTER스킨 자체가 좌우에 공간이 그렇게 넓지는 않습니다. 

만약에 좌우에 160*600짜리 광고를 넣게되면 320px을 차지하는데.. 대부분의 분들이 와이드 모니터를 쓰신다고는 하지만 어떤분들은 아직도 해상도가 가로 1280px인 경우가 많습니다. 

현재의 포스터스킨 양쪽에 가로가 160px인 광고 2개를 넣으면 본문을 가려버린다

그렇게되면 1280px-320px=960px가 본문으로 사용할수 있는 넓이가 되는 것이지요. 광고와 본문사이의 여백을 고려하면 실제로 사용할 수 있는 본문의 공간은 900px정도 입니다. 

하지만 본문이 표시되는 container는 가로크기가 아마 100%으로 셋팅이 되어진듯합니다. 그래서 광고가 들어가게되면 본문을 가려버리는 현상이 발생을 합니다. 그렇다면 강제로 container의 크기를 줄여줘야겠지요

본문의 가로사이즈 조정

위의 이미지를 보시면 제가 강제로 CSS에 넣어준 내용입니다. 아무곳이나 위의 스크립트 내용을 전부다 넣어주시면 됩니다. 핵심은 max-width:850px입니다. 가로사이즈가 850px이상 커지지 않도록 막아주는 역할을 하게되는 것입니다.

(만약에 위와 같이 .container 스크립트가 보이지 않으신다면 위의 코드처럼 직접 입력해서 넣어주시면 됩니다. 아마 .container의 경우, 기본 코드라서 css에 포함이 안되어 있을 수 있습니다.)

자! 위의 작업을 해주셨다면 이제는 양쪽 좌우에 어느정도 여유공간이 생겼을 것입니다. 그러면 이제 남은 작업은 가로가 160px인 광고를 좌우에 박아 넣는 것인데요

여기서부터가 조금은 작업이 복잡할 수 있지만 최대한 쉽게 설명을 드려보도록 하겠습니다. 양쪽이 동일하니 한쪽만 말씀드릴께요

</body> 태그 뒤에 
<div> 광고 </div>
스크립트를 만들자

일단 티스토리 블로그 HTML편집으로 들어가셔서 </body> 뒤에 엔터를 치고 스크립트 하나를 만들껀데요 아래와 같이 치시면 됩니다. 

</body>  <div class = "side_fixed_ad">      [여기에 광고 스크립트를 넣으세요]  </div>

제가 붉은색으로 표시한 곳에 넣고싶은 가로 160PX의 광고 스크립트를 집어 넣으시면 됩니다. 저건 그냥 복사해서 붙여넣기라 굳이 크게 설명을 안했습니다. 

중요한 부분은 제가 파란색으로 표시한 부분인데요. 해당 광고 코드가 들어있는 div코드에 특정 속성을 부여하겠다는 뜻입니다. 속성을 부여할 css의 이름이 "side_fixed_ad"가 되는 것이지요

CSS편집으로 들어가서
화면에 고정시키는 코드를 넣자

자! 이제 거의 다했습니다. CSS코드는 아래와 같습니다. 코드가 길지 않으니 직접 치셔도 될 것 같습니다. 아래는 css에 추가하는 스크립트입니다. 

일단 명칭은 .side_fixed_ad라고 동일하게 들어가고 해당 속성은 {  } 사이에 넣어주게 되는데요. 가장 중요한 부분이 바로 position : fixed; 입니다. 위치를 고정시킨다는 이야기지요

.side_fixed_ad {    position : fixed;    top : 10px;    left : 0px;  }

그리고 top과 left는 고정시킬 위치를 뜻하는데요. 위의 코드로 설명을 드리자면 위에서 10px 떨어진곳 and 왼쪽에서 0px떨어진 곳에 해당 광고를 출력하라는 뜻이되는 것이지요

위에는 공간을 좀 두고, 왼쪽에 착 붙여넣는 것입니다. 그렇다면 오른쪽에 착 붙이려면 어떻게 해야할까요? 맞습니다. right : 0px; 을 적용해주게되면 오른쪽에 고정된 광고를 출력할 수 있습니다. 

이상으로 광고를 티스토리 블로그의 좌우에 고정시켜서 나타나게하는 스크립트에 대해서 알아보았습니다. 

도움이 되셨다면 공감과 댓글 부탁드려요~ 감사합니다. ^^

< 티스토리 블로그에 광고 넣는 고급기술 > 

티스토리 본문에 자동으로 애드센스 광고 넣는 방법1. 이미지 뒤에 붙이기

티스토리 본문에 자동으로 애드센스 광고 넣는 방법1. 이미지 뒤에 붙이기

티스토리 본문에 자동으로 애드센스 광고 넣는 방법 2. 원하는 위치에 붙이기

티스토리 본문에 자동으로 애드센스 광고 넣는 방법 2. 원하는 위치에 붙이기

티스토리 블로그에 애드센스 설정 방법 - 1. 글목록 중간에 인피드 광고 넣기

티스토리 블로그에 애드센스 설정 방법 - 1. 글목록 중간에 인피드 광고 넣기

 

#구글 애드센스 광고 인피드 광고 넣기 #구글 애드센스 광고 본문 중간에 자동으로 넣기 #구글 애드센스 광고 좌우 고정하기 #티스토리 블로그에 애드센스 넣기