본문 왼쪽에 세로 애드센스 광고 넣기

본문 왼쪽에 애드센스 광고를 넣는 방법이에요. 왼쪽에 사이드바가 있다면 사이드바에 넣으면 되겠지만 오른쪽 사이드바를 사용하는 경우에는 본문 왼쪽에 애드센스를 넣기가 어렵잖아요. 그래서 이 때 사용할 수 있는 html 소스를 만들어봤어요.

이 글의 스크롤을 내리다 보면 중간 왼쪽에 광고가 하나 보이죠? 바로 이 위치에 광고를 넣는 방법입니다.

사람들의 시선이 오른쪽보다는 왼쪽에 머무르는 시간도 많고, 제일 먼저 눈에 띄는 곳도 왼쪽이니까 오른쪽 사이드바에 비해서 조금 더 효과가 좋은 광고 배치죠. 수익차이가 많이 나지는 않지만 그래도 늘어나는 건 확실해요.

본문 왼쪽에 세로 광고 넣기

광고 코드

애드센스 광고를 3개 다 사용하고 있어서 대신 광고 대신 그냥 네모난 상자만 넣어봤어요. 왼쪽에 바로 보이는 네모 상자에요.

애드센스 120x600 광고를 사용한다고 했을 때, width:120px은 광고의 가로 길이, height:600px은 광고의 세로 길이에요.

이 소스에서 가장 중요한 건 positon:absolute와 margin-left에요. positon은 위치를 어떻게 할 건지 묻는 건데, 그냥 absolute로 하시면 돼요. fixed로 하면 고정된 광고가 나오는데, 이는 애드센스 정책 위반이에요.

margin-left는 왼쪽 여백을 말하는데, 숫자가 클수록 왼쪽 여백이 커져요. 그런데 숫자 앞에 -가 붙어있으면 원래 기준보다 왼쪽으로 더 들어가요. -157px이니까 기준 선보다 왼쪽으로 157px만큼 간 곳에 위치하게 돼죠.

margin-left = - (본문의 왼쪽 여백 + 본문의 테두리 선 두께 + 광고의 가로 길이 + 광고 테두리 선 두께)

저는 본문의 왼쪽 여백이 35px, 본문 테두리 선은 1px, 광고의 가로길이 120px, 광고 테두리 선은 1px이라 -157px이 나온 거예요.

세로 높이는 top:10px 처럼 넣으시면 돼요.

위 소스를 [샵샵_article_rep_desc_샵샵] 바로 위에 넣고, margin-left와 top을 바꿔가면서 광고의 위치를 조절하면 되겠습니다.

주의할 점

이 광고를 사용할 때는 왼쪽 광고 + 본문 + 오른쪽 사이드바의 길이가 일반적인 해상도 안에서 모두 보여야 합니다. 해상도에 따라 왼쪽의 광고가 보이지 않게 되면 애드센스 정책 위반이 될 수 있거든요. 따라서 저처럼 본문의 가로 길이가 긴 분들은 사용하지 마시고, 본문 가로 길이가 짧은 분들만 사용하세요.

본문 상단에 광고를 넣고 있다면 상단 광고와 왼쪽 광고가 한 화면에 나오는 것은 피하세요. 클릭율이 많이 떨어집니다. top을 이용해서 광고 위치를 아래로 내려야 합니다.

오른쪽 사이드바의 광고를 대체한다고 생각하세요. 오른쪽 사이드바에도 광고가 있거나 화려한 위젯이 있다면 왼쪽 광고의 효율이 떨어집니다.

그리드형