본문 바로가기

Blog 이야기

[티스토리 블로그] 애드센스 본문 상단 좌측 또는 상단 우측에 삽입하는 법

아래 캡쳐한 블로그 포스팅은 애드센스가 상단 좌측에 배치되어 있는 형태입니다. 이와 같은 형태로 많은 분들이 블로그 또는 홈페이지의 본문 상단 좌측 또는 상단 우측에 배치하는 것을 볼 수 있습니다.

이런 광고 배치가 상단 두개 배치보다는 좀더 광고 클릭을 유발할 수 있다라는 얘기가 있지만 아직 저는 이에 대한 명확한 데이터를 가지고 있는 것은 아닙니다. 다만, 본문 글과 같은 레벨상에 존재하는 애드센스는 광고라는 이미지를 조금은 탈피할 수 있지 않나 라는 지극히 개인적인 생각은 있습니다.


<애드센스가 본문 상단 좌측에 배치되어 있는 예>


그렇다면 본문 상단 좌측에 애드센스는 어떻게 배치할 수 있을까요?

제가 티스토리 블로그를 사용하고 있는 관계로 티스토리를 예로 들어 설명할께요.

사실 배치하는 방법은 너무 간단합니다. 본문 상단에 애드센스를 배치하기 위해서는 skin.html 에서 

아래 캡쳐한 블로그 포스팅은 애드센스가 상단 좌측에 배치되어 있는 형태입니다. 이와 같은 형태로 많은 분들이 블로그 또는 홈페이지의 본문 상단 좌측 또는 상단 우측에 배치하는 것을 볼 수 있습니다.

이런 광고 배치가 상단 두개 배치보다는 좀더 광고 클릭을 유발할 수 있다라는 얘기가 있지만 아직 저는 이에 대한 명확한 데이터를 가지고 있는 것은 아닙니다. 다만, 본문 글과 같은 레벨상에 존재하는 애드센스는 광고라는 이미지를 조금은 탈피할 수 있지 않나 라는 지극히 개인적인 생각은 있습니다.


<애드센스가 본문 상단 좌측에 배치되어 있는 예>


그렇다면 본문 상단 좌측에 애드센스는 어떻게 배치할 수 있을까요?

제가 티스토리 블로그를 사용하고 있는 관계로 티스토리를 예로 들어 설명할께요.

사실 배치하는 방법은 너무 간단합니다. 본문 상단에 애드센스를 배치하기 위해서는 skin.html 에서 를 찾아 그 위에 애드센스 코드를 배치하면 됩니다.



여기에서 상단 좌측에 애드센스를 넣고 싶을 때는 아래 코드처럼 넣어야 합니다.


<!-- 애드센스 광고(상단좌측) -->

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


(에드센스 코드 넣기)


</div>



에드센스 상단좌측.txt


(텍스트 파일을 다운 받아 애드센스 코드를 넣고 티스토리 skin.html에 넣으시면 됩니다.)


div style의 float:left가 본문 좌측으로 코드를 이동시켜 줍니다. 그리고 그 다음의 margin은 광고 배치 후 광고 주변의 여백을 의미합니다. 광고를 넣고 글이 광고에 딱 붙어서 표현되면 좀 보기 그렇잖아요. 그래서 광고 사면의 여백을 표시해주게 되는데 margin: 이후 순서대로 상,우,하,좌 의 여백을 뜻합니다.


광고 배치 후 미리보기를 통해 여백의 적정성을 조금씩 조정하면서 사용해보시면 될 것 같습니다.



반대로 상단 우측은 어떻게 할까요?

float:right 라고 쓰면 되겠죠?


<!-- 애드센스 광고(상단우측) -->

<div style="float:right;margin:10px 5px 10px 10px">


(애드센스 코드 넣기)


</div>



에드센스 상단우측.txt


(텍스트 파일을 다운 받아 애드센스 코드를 넣고 티스토리 skin.html에 넣으시면 됩니다.)





를 찾아 그 위에 애드센스 코드를 배치하면 됩니다.



여기에서 상단 좌측에 애드센스를 넣고 싶을 때는 아래 코드처럼 넣어야 합니다.


<!-- 애드센스 광고(상단좌측) -->

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


(에드센스 코드 넣기)


</div>



에드센스 상단좌측.txt


(텍스트 파일을 다운 받아 애드센스 코드를 넣고 티스토리 skin.html에 넣으시면 됩니다.)


div style의 float:left가 본문 좌측으로 코드를 이동시켜 줍니다. 그리고 그 다음의 margin은 광고 배치 후 광고 주변의 여백을 의미합니다. 광고를 넣고 글이 광고에 딱 붙어서 표현되면 좀 보기 그렇잖아요. 그래서 광고 사면의 여백을 표시해주게 되는데 margin: 이후 순서대로 상,우,하,좌 의 여백을 뜻합니다.


광고 배치 후 미리보기를 통해 여백의 적정성을 조금씩 조정하면서 사용해보시면 될 것 같습니다.



반대로 상단 우측은 어떻게 할까요?

float:right 라고 쓰면 되겠죠?


<!-- 애드센스 광고(상단우측) -->

<div style="float:right;margin:10px 5px 10px 10px">


(애드센스 코드 넣기)


</div>



에드센스 상단우측.txt


(텍스트 파일을 다운 받아 애드센스 코드를 넣고 티스토리 skin.html에 넣으시면 됩니다.)