티스토리 애드센스 광고 위치 선정

안녕하세요. 양미니 입니다.

티스토리를 시작한지 약 1달 정도 된 것 같네요.

광고와 어울리게 티스토리를 꾸밀려고 하니깐 html을 모르는 저는 매우 어렵게 느껴졌는데요. 

제가 꾸밀때 마다 정보를 같이 공유하고자 합니다. 저도 다른 고수분들의 정보를 많이 참고를 했습니다.

아래에는 좌,우로 광고 위치를 띄우는 코드 입니다. 애드센스 광고 크기는 160x600 입니다.

1. [블로그 관리 -> 스킨 편집 -> html 편집] 을 클릭합니다.

2. 여기에 아래의 코드를 원하는 위치에 넣어줍니다

(위치를 모르시면 아무 곳에 넣어서 확인을 해보시면 금방 이해가 됩니다.)

(저는 헤더가 끝나는 부분에 넣었습니다. </header> 바로 아랫 줄에...)

<!-- 광고 설정(ad1) -->

<div id="ad1" style="width: 160px; height: 600px; margin-top: 20px; margin-left: 10px; float: left; position: absolute; display:none">

<ins class="adsbygoogle"

     style="display:inline-block;width:160px;height:600px"

     data-ad-client=" "

     data-ad-slot=" "></ins>

<script>

(adsbygoogle = window.adsbygoogle || []).push({});

</script>

</div>

<!-- 광고 설정(ad2) -->

<div id="ad1" style="width: 160px; height: 600px; margin-top: 20px; margin-left: 10px; float: left; position: absolute; display:none">

<ins class="adsbygoogle"

     style="display:inline-block;width:160px;height:600px"

     data-ad-client=" "

     data-ad-slot=" "></ins>

<script>

(adsbygoogle = window.adsbygoogle || []).push({});

</script>

</div>

<!-- 광고 위치 선정 -->

<script> 

var crome_width=window.getWindowCleintWidth();

var position = ((crome_width)/2)+520+"px";

var position2 = ((crome_width)/2)-695+"px";

if(crome_width>1400)

{ 

document.getElementById("ad1").style.display="block";

document.getElementById("ad2").style.display="block";

document.getElementById("ad1").style.margin="60px 0 0 "+position; 

document.getElementById("ad2").style.margin="60px 0 0 "+position2; 

}

else

{

document.getElementById("ad1").style.display="none";

document.getElementById("ad2").style.display="none";

}

window.onresize = function()

{

crome_width=window.getWindowCleintWidth();

position = ((crome_width)/2)+520+"px";

position2 = ((crome_width)/2)-695+"px";

if(window.getWindowCleintWidth()>1400)

{ 

document.getElementById("ad1").style.display="block";

document.getElementById("ad2").style.display="block";

document.getElementById("ad1").style.margin="60px 0 0 "+position; 

document.getElementById("ad2").style.margin="60px 0 0 "+position2; 

}

else

{

document.getElementById("ad1").style.display="none";

document.getElementById("ad2").style.display="none";

}

}

</script>

위의 코드들을 설명하자면,

애드센스 광고코드를

 <div id="ad1" style="width: 160px; height: 600px; margin-top: 20px; margin-left: 10px; float: left; position: absolute; display:none">

 ~애드센스 광고코드~

 </div>

이런 식으로 <div> </div>로 묶은겁니다(제가 이해한 방식으로 설명을 ㅠㅠ).

묶은 광고코드는 ad1 으로 설정이 되는 겁니다. 이렇게 2개의 광고코드를 ad1, ad2로 묶습니다.

그런 다음에 위치를 선정하는 코드는 그 다음 아래의 박스가 됩니다.

<script> ~~ </script> 로 묶입니다.

window.getWindowCleintWidth();    이 녀석으로 현재 인터넷 창의 크기를 확인하고요.

position, position2 로 광고 좌표를 설정하게 됩니다. 그리고 인터넷 창의 크기가 1400 이상이면 광고가 나타나게 하고, 1400보다 작으면 광고를 안 띄우는!! 모바일에서도 위반이 안되게끔 설정이 되어 있습니다.

그 아래의 window.onresize = function()  이녀석은 인터넷 창이 커지거나 작아지면 실행되는 코드인데요.

광고의 위치가 자동으로 잡히겠죠? 글이랑 안 겹치도록! 그리고 1400보다 작아지면 광고가 사라지게 됩니다.

3. 광고의 위치를 보고 마음에 드는 위치로 선정하기 위해서 

document.getElementById("ad1").style.margin="60px 0 0 "+position;    이 녀석의  "60px 0 0" 이 부분을 수정하시면 됩니다.

60px가 커지면 점점 아래로 갑니다.

이상입니다.

설명이 너무 중구난방인데... 도움이 되셨으면 합니다^^;;