쿠팡 파트너스의 광고를 블로그 글의 좌측 혹은 우측에 배치하는 방법.

지난 23일, 모니터 팔 달아주느라 제 팔은 고장 날 지경이네요. 카멜마운트 PMA-2U 고중량 모니터 거치대 / 개봉기 / 장착기 포스트에 댓글로 문의가 하나 있었어요. "쿠팡 파트너스 링크는 어떻게 글 옆에 표기되게 하나요?"라는 문의였는데요.

저 같은 경우 구글 애드센스 외에도 수익을 얻기 위해서 쿠팡 파트너스에도 가입을 해서 블로그 본문에 가끔 달고 있는데 쿠팡 파트너스랑 쿠팡에서 운영하는 애드센스라고 생각하시면 됩니다. 차이라면 애드센스는 클릭을 통한 광고 수익이 주로 발생을 하고 적긴 하지만 조회만 이루어져도 수익이 발생하는 반면 쿠팡 파트너스는 조회나 클릭은 전혀 수익 발생이 되지 않고 클릭 후 구매까지 진행이 되어야 일정 수수료를 받는 방식의 광고 플랫폼입니다. 그 점 때문에 저는 쿠팡 파트너스로 얻는 수익은 0이네요
(；′⌒`)

어쨌든 그래서 그 문의에 답을 드려야 되는데 댓글로는 HTML에 대한 설명이 어려워서 이렇게 포스팅을 통해 답변을 드리기로 했기 때문에 한 번 글을 작성해 보려고요.

 

위에서 설명드렸던 내용을 보여드리면 바로 저렇게 네모 표시된 것처럼 이미지를 표시하는 방법인데요. 그냥 작은 이미지를 올리는 경우에는 저런 식으로 이미지 옆에 글이 써지지 않고 이미지 아래로 글이 써지기 때문에 공간 낭비가 심하고 블로그 본문이 이쁘지가 않죠. 그래서 HTML 태그를 이용해서 작업을 해줘야 되는데요. HTML 공부하실 게 아니니 저렇게 사용하기 위한 HTML 태그를 알려드리고 어떻게 활용해야 하는지만 간단히 정리해 볼게요.

<div style="float:left; margin:0px 0px 0px 10px;">
<style>
.right { width: 120px; height: 240px; }
@media(min-width: 728px) { .right { width: 120px; height:240px; } }
</style>
<!-- 쿠팡의 경우 이곳에 블로그용 태그를 복사 후 붙여넣기 하시면 되고
구글 애드센스의 광고를 붙여넣기 하셔도 동일하게 동작합니다. -->
</div>

위 HTML이 광고를 우측에 작성하는 HTML 태그인데요. 주석(회색 글씨) 부분에 쿠팡의 블로그용 태그 또는 구글 애드센스의 태그를 입력하시면 위 이미지처럼 우측에 광고가 보이게 됩니다.

 

그럼 반대로 하는 건 어떻게 하느냐?

<div style="float:left; margin:0px 10px 0px 0px;">

제일 첫 번째 문장에서 margin의 값 중 두 번째 값을 10으로 그리고 네 번째 값을 0으로 바꿔주시면 광고가 좌측에 글을 우측에 쓸 수 있게 되는 거죠. margin 이란 쉽게 말해서 여백이라고 생각하시면 되는데 순서대로 상단·오른쪽·하단·왼쪽의 여백을 지정해 준다고 생각하시면 됩니다. 그러니까 좌측에 광고 이미지를 넣었으니 글을 우측에 쓰기 위해서 광고 이미지와 글의 여백은 10px만큼 잡아준다는 뜻인 거죠. 이 태그를 이용해서 숫자를 변경해 가면서 블로그의 본문과의 간격을 한 번 정해놓으시고 이 태그를 서식으로 저장해 두세요. 그리고 나중에는 글을 쓰다가 이 태그를 쓰고 싶을 때 서식을 클릭해서 입력하고 주석 부분만 바꿔가면서 쓰시면 글을 쓰는데 조금 편하지 않을까요?

일단 저는 이렇게 사용 중이랍니다. 쉽게 쓴다고 썼는데 혹시 이해 안 되는 부분이 있다면 댓글 남겨주세요. 최대한 빠르게 답변해 드리도록 하겠습니다. 그럼 편안한 토요일 저녁 시간 보내세요.
Bye~ (￣▽￣)ノ