지난번 스크롤되는 view추천/구독 버튼을 블로그에 다는 방법을 포스팅했었답니다.
[IT.컴퓨터.인터넷.취미/블로그 꾸미기] - 티스토리 블로그에 view추천/구독 스크롤 버튼 달기
이번에는 이 방법을 응용해서 구글 광고배너를 스크롤되게 다는 방법에 대해 설명할까 합니다.
스크롤 버튼 복습
지난 포스트에서는 skin.html, style.css 두 곳에 소스를 추가해줘야 하는 조금은 번거로울 수 있는 방법이었죠.
skin.html에 들어가는 소스에는
버튼이미지의 위치, 하이퍼링크, 마우스오버 효과 등의 정보가 들어가구요.
style.css에 들어가는 소스에는
버튼박스의 크기와 위치를 지정하는 정보가 들어갔지요.
이번에는 skin.html에 추가되는 소스만으로 같은 기능을 할 수 있는 방법으로 설명할게요.
한가지소스에 버튼(이미지)정보와 링크, 크기, 위치등의 모든 정보가 들어가는 방법입니다.
기본 소스 설명
스크롤 이미지배너(광고)에 필요한 아주 간단하게 필요한 기능만 넣은 소스는 아래와 같습니다.
<A style="POSITION: fixed; MARGIN-LEFT: -654px; TOP: 0px; LEFT: 50%"> 구글 광고 코드(광고를 만들면 생성되는 코드를 그대로 넣으시면 된답니다.)
헛!! 이렇게 간단하다니....
일단 제가 적용해본 광고는 가로 120px, 세로 600px의 이미지배너 광고입니다.
위의 소스에서 중요하게 보실 부분은 광고의 위치를 결정하는 부분인데요.
top:0px 상단에서 이미지 윗부분까지의 거리가 0px 즉 상단에 딱 붙어서 시작되구요.
left: 50% 가로위치의 기준점이 왼쪽에서 오른쪽으로 50%지점 즉, 정가운데가 기준점이구요.
margin-left: -654px 위의 기준점(정 중앙에서) 왼쪽여백이 -654px 즉 가운데서 왼쪽으로 654픽셀의 위치가 되는 것입니다.
블로그에 이미지배너 스크롤 적용하기
자 그럼 위에서 설명드린 내용으로 블로그에 직접 적용해서 비교를 해보겠습니다.
포스팅을 위해서 만든 것이며 실제 적용은 하지않는 광고입니다.
※ 광고 소스를 넣을 위치
지난번 view추천 버튼은 본문안에 꼭 들어가야 한다고 설명했었죠.
하지만 이미지배너 스크롤은 <body>와 </body> 사이에 어떤 곳에 집어넣어도 상관 없답니다.
저는 본문에 포함된 광고 바로 아래부분에 소스를 넣어봤습니다.
브라우저 화면을 캡쳐했는데요.
왼쪽에 광고 보이시죠? 처음에 설명했던 위치(top:0px;left: 50%;margin-left: -654px)를 적용했습니다.
광고가 상단에는 딱 붙어있고 가운데에서 왼쪽으로 치우쳐 있습니다.
그럼 이번에는 왼쪽 여백의 위치를 변경해서 이미지배너가 어떻게 이동되는지 살펴볼게요.
margin-left:0px 일때 광고는 중앙에서 보여지게 됩니다.
margin-left:530px 일때 광고가 오른쪽에서 보이죠?
top, margin-left의 위치를 적당히 변경하면서 광고의 위치를 조절하시면 되겠습니다.
이미지배너 스크롤에 대한 설명은 이정도면 된 것 같네요... 음... 이해 되시겠죠?ㅎㅎ
구글애드센스 정책을 참고하세요!! - 7. 26. 00:10 추가
이웃 블로거께서 댓글로 애드센스에서 허용하지 않는 방식의 광고라는 말씀을 해주셨는데요.
확인해보니 애드센스정책에 위반될 소지가 있을 것 같습니다.
애드센스 정책의 일부분인데요. 표시한 부분의 행위가 스크롤배너라고 할 수는 없지만
유사한 행위가 될 수 있을 것 같구요.
애드센스에서는 광고코드를 웹페이지에 html태그로 가공없이 삽입 할 것을 요구하고 있네요.
따라서 이 포스트의 팁은 애드센스가 아닌 다른 광고게재시 참고로 활용하시는게 좋을 것 같습니다.
수익을 위해 블로그에 광고를 걸어두는 것은 꼭 필요한 일입니다.
그래도 방문자가 컨텐츠에 집중할 수 있도록 블로거의 배려도 필요하지 않을까요?
그래도 방문자가 컨텐츠에 집중할 수 있도록 블로거의 배려도 필요하지 않을까요?
