전체글
일상
게임
코딩
블로그 운영
IT
여행

티스토리 기본스킨#1에 애드센스 사이드 광고(좌측) 달기

심플하고 가독성이 좋아서 '기본 반응형 스킨#1'을 사용하시는 티스토리 블로거분들이 많이 있습니다. 현재는 티스토리 블로그 개설시 설정되어 있는 기본 스킨이기도 해서 많은 분들이 스킨을 제작하거나 구해서 변경하기 전까지 사용하고 있습니다.


기본 반응형 스킨#1에 사이드 광고 배치



 기본 스킨 중에 하나인 반응형 스킨#1에는 빈 공간에 애드센스 광고를 넣기 어렵다는 단점이 있습니다. 티스토리 스킨을 꾸미려고 html을 막 시작한 분들이시라면 빈 공간에 애드센스 광고를 넣을 수는 있지만, 강제로 넣는 경우가 많아서 반응형 스킨의 장점을 살리지 못하는 경우도 많습니다. 그래서 제가, 측면에 애드센스 광고를 달면서, 반응형 스킨의 장점을 살릴 수 있는 소스 코드를 배포하겠습니다.




 위에 이미지는 현재 제 블로그에 적용되어 있는 애드센스 광고 입니다. 사이드 바 없이, 기본 반응형 스킨 #1의 좌측에 광고가 달려있는 것을 보실 수 있습니다.

 반응형 스킨의 장점을 살리기 위해, 창 크기를 줄이거나, 저해상도로 볼 경우 광고가 자동적으로 사라지게 됩니다. 구글 애드센스 정책상, 광고가 컨텐츠 내용을 가리면 위반 사유가 되기 때문에 저해상도에서는 사이드에 있는 광고들이 무조건 사라져야합니다.



기본 반응형 스킨#1 사이드 광고 소스 코드

<!--사이드 광고 소스 코드 시작-->

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

<!-- 애드센스 광고단위 소스 코드-->

<ins class="adsbygoogle"

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

     data-ad-client="ca-pub-애드센스번호"

     data-ad-slot="광고단위번호"></ins>

<script>

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

</script>

<!-- 애드센스 광고단위 소스 코드 끝-->

</div>

<script>

var window_size=window.getWindowCleintWidth();

var margin_left = ((window_size-800)/2-8.5-300)/2+"px";

console.log(margin_left);

if(window_size>1440){

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

document.getElementById("side_ad").style.margin="30px 0 0 "+margin_left;

} else if(window_size<=1440 & window_size >1435){

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

document.getElementById("side_ad").style.margin="30px 0 0 0"

}else{

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

}

window.onresize = function() {

window_size=window.getWindowCleintWidth();

margin_left = ((window_size-800)/2-8.5-300)/2+"px";

if(window.getWindowCleintWidth()>1440){

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

document.getElementById("side_ad").style.margin="30px 0 0 "+margin_left;

} else if(window_size<=1440 & window_size >1435){

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

document.getElementById("side_ad").style.margin="30px 0 0 0"

}else{

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

}

}

</script>

<!--사이드 광고 소스 코드 끝-->


사이드 광고 소스 코드 넣는 법


 위에 코드를 복사한 후에 소스 코드를 어디에 붙이셔야하는지 알려드리겠습니다. 먼저, [관리센터]-[HTML/CSS편집]을 누르셔서 html 편집기를 엽니다. 그리고 아래에 태그가 있는 곳을 찾습니다.


<div id="dkContent" class="cont_skin" role="main">


ctrl + f로 검색창을 띄우고 "dkContent"만 입력하셔도 쉽게 찾으실 수 있습니다. 이 태그 밑에 소스 코드를 달아야 합니다. 예시를 보여드리겠습니다.



 맨 위에 블럭으로 처리된 태그 밑에 제가 공유하는 소스 코드를 붙이시면 됩니다. 코드를 붙이신 후에 구글 애드센스에서 300x600 광고단위를 만듭니다. 


<!-- 애드센스 광고 단위 소스-->

애드센스 소스코드 붙여넣기

<!-- 애드센스 광고단위 소스 끝-->


광고 단위를 만드신 후에, 위에 부분에 볼드처리한 부분에 그대로 애드센스 소스 코드를 붙여넣기 하시고 저장하시면, 제 블로그처럼 좌측 상단에 애드센스 광고가 생기시는 것을 확인할 수 있습니다. 



도움이 되셨으면 공감을 눌러주세요!


  


허니지

질문이 있는데요~~ 애드센스 광고 소스중에
시작부분 <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
이거는 안넣어도되나요?

2017.05.29 10:55 신고
소심파두목

전 우측에 넣고 싶은데 하나님처럼 우측에는 어떻게 넣는거죠 ㅠㅠ

2017.06.14 13:06 신고
    하나 하나즈오우

    답변이 늦어서 죄송합니다. ㅜㅜ
    제가 아래 덧글에 남긴 <script> 소스를 포스트에 있는 소스 대신에 붙여넣으시면 됩니다.

    2017.06.19 02:56 신고
    하나 하나즈오우

    <script>
    var window_size=window.getWindowCleintWidth();
    //var margin_right = ((window_size-800)/2-8.5-300)/2+"px";
    var margin_left = (window_size-800)/2+820+"px"
    if(window_size>1435){
    document.getElementById("side_ad").style.display="block";
    document.getElementById("side_ad").style.margin="30px 0 0 "+margin_left;
    }else{
    document.getElementById("side_ad").style.display="none";
    }

    window.onresize = function() {
    window_size=window.getWindowCleintWidth();
    margin_left = (window_size-800)/2+820+"px"
    if(window.getWindowCleintWidth()>1435){
    document.getElementById("side_ad").style.display="block";
    document.getElementById("side_ad").style.margin="30px 0 0 "+margin_left;
    }else{
    document.getElementById("side_ad").style.display="none";
    }
    }
    </script>

    2017.06.19 02:56 신고

비밀댓글입니다

2017.07.04 23:42
    하나 하나즈오우

    지금 Eitelkeit90님 블로그 들어가서 살짝 보고 왔는데, 좌측에 광고가 사라지지 않는 다는 건가요??

    2017.07.04 23:49 신고
    하나 하나즈오우

    설명 잘 이해하고 따라하셔야합니다.
    좌측 구글 광고 코드를
    <div class="side_ad">좌측구글광고코드</div>
    이런식으로 먼저 div 태그로 싸줍니다.

    그리고 우측 구글 광고 코드를 넣은 div 태그 내에 id="side_ad"를 class="side_ad"로 바꿔줍니다.

    마지막으로 제 스크립트를

    <script>
    var window_size=window.getWindowCleintWidth();
    if(window_size>1435){
    $(".side_ad").css("display","block");
    }else{
    $(".side_ad").css("display","none");
    }

    $(window).resize(function(){
    window_size=$(window).width();
    if(window_size>1435){
    $(".side_ad").css("display","block");
    }else{
    $(".side_ad").css("display","none");
    }
    });

    </script>
    이거로 바꿔보시고 테스트 해보세요.

    2017.07.05 00:06 신고
아이텔카이트

일단 답글 주셔서 감사드리고요..
이해 가능한 방식으로 다 따라해봤는데 안되는 것같네요.

<!--좌측 광고 소스 코드 시작11111-->

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

<!-- 애드센스 광고단위 소스 코드11111-->



<!-- 블로그사이드광고 -->
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:600px"
data-ad-client="ca-pub-2206502466137789"
data-ad-slot="1091870152"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>



<!-- 애드센스 광고단위 소스 코드 끝11111-->
</div>

<script>

var window_size=window.getWindowCleintWidth();

var margin_left = ((window_size-800)/2-8.5-300)/2+"px";

console.log(margin_left);

if(window_size>1440){

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

document.getElementById("side_ad").style.margin="30px 0 0 "+margin_left;

} else if(window_size<=1440 & window_size >1435){

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

document.getElementById("side_ad").style.margin="30px 0 0 0"

}else{

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

}



window.onresize = function() {

window_size=window.getWindowCleintWidth();

margin_left = ((window_size-800)/2-8.5-300)/2+"px";

if(window.getWindowCleintWidth()>1440){

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

document.getElementById("side_ad").style.margin="30px 0 0 "+margin_left;

} else if(window_size<=1440 & window_size >1435){

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

document.getElementById("side_ad").style.margin="30px 0 0 0"

}else{

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

}

}

</script>



<!--좌측 광고 소스 코드 끝11111-->





<!--우측 광고 소스 코드 시작22222-->

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

<!-- 애드센스 광고단위 소스 코드2222-->


<!-- 블로그사이드광고 -->
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:600px"
data-ad-client="ca-pub-2206502466137789"
data-ad-slot="1091870152"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

<!-- 애드센스 광고단위 소스 코드 끝2222-->

</div>
<script>
var window_size=window.getWindowCleintWidth();
//var margin_right = ((window_size-800)/2-8.5-300)/2+"px";
var margin_left = (window_size-800)/2+820+"px"
if(window_size>1435){
document.getElementById("side_ad2").style.display="block";
document.getElementById("side_ad2").style.margin="30px 0 0 "+margin_left;
}else{
document.getElementById("side_ad2").style.display="none";
}

window.onresize = function() {
window_size=window.getWindowCleintWidth();
margin_left = (window_size-800)/2+820+"px"
if(window.getWindowCleintWidth()>1435){
document.getElementById("side_ad2").style.display="block";
document.getElementById("side_ad2").style.margin="30px 0 0 "+margin_left;
}else{
document.getElementById("side_ad2").style.display="none";
}
}
</script>
<!--우측 광고 소스 코드 끝22222-->




2017.07.05 01:09 신고
아이텔카이트

제가 수정한 방식은 위와 같은데요. 위치는 조정된건 아니구요.

일단 본문에 올려주신 좌측코드그대로 적용했구요.
다른분 댓글에 올려주신 오른쪽코드보고 div쪽은 그대로적용한후 스크립트를 수정했어요.
그런데 두개를 병렬시키면 한쪽 광고가 안뜨더라고요..
그래서 문외한이라 생각해보니 div의 id가 같아서 그런가하고
id를 하나는 ad로 하고, 하나는 ad2로 해서 스크립트에 있는
명칭도 그거에 따라변경했어요. 그러니까 두개가 온전히 뜨더라구요
문제는 우측광고는 페이지축소시 사라지는데, 좌측광고가 사라지지않더라구요.. 이건 다 건드려봐도 도저히 알아낼 방법이 없었습니다..

결론은 제가 위에 올려드린 적용코드를 좀 손봐주셨으면합니다 ㅠㅠ;;

이 문제가 해결될시에 문상만원어치 핀번호를 댓글에다 남겨드릴께요.

부탁드려요... ^^ㅠㅠ

해당코드적용시 뜨는 화면은 블로그 새로만들어서 적용시켜놨습니다.

http://subblog90.tistory.com/ 참조부탁드립니다~!

2017.07.05 01:13 신고
    하나 하나즈오우

    Eitelkeit90님 소스 제가 보고 손 좀 봤습니다.
    기존 소스를 지우시고 아래 소스를 그대로 복붙해서 테스트 해보세요.

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

    <!-- 애드센스 광고단위 소스 코드11111-->
    <!-- 블로그사이드광고 -->
    <ins class="adsbygoogle"
    style="display:inline-block;width:300px;height:600px"
    data-ad-client="ca-pub-2206502466137789"
    data-ad-slot="1091870152"></ins>
    <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script>


    <!-- 애드센스 광고단위 소스 코드 끝11111-->
    </div>



    <!--좌측 광고 소스 코드 끝11111-->

    <!--우측 광고 소스 코드 시작22222-->

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

    <!-- 애드센스 광고단위 소스 코드2222-->
    <!-- 블로그사이드광고 -->
    <ins class="adsbygoogle"
    style="display:inline-block;width:300px;height:600px"
    data-ad-client="ca-pub-2206502466137789"
    data-ad-slot="1091870152"></ins>
    <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script>

    <!-- 애드센스 광고단위 소스 코드 끝2222-->

    </div>
    <script>

    var window_size=window.getWindowCleintWidth();
    var margin_left = (window_size-800)/2+820+"px";
    var margin_left2 = ((window_size-800)/2-8.5-300)/2+"px";
    if(window_size>1435){
    document.getElementById("side_ad2").style.display="block";
    document.getElementById("side_ad").style.display="block";
    document.getElementById("side_ad2").style.margin="30px 0 0 "+margin_left;
    document.getElementById("side_ad").style.margin="30px 0 0 "+margin_left2;
    }else{
    document.getElementById("side_ad2").style.display="none";
    document.getElementById("side_ad").style.display="none";
    }

    window.onresize = function() {
    window_size=window.getWindowCleintWidth();
    margin_left = (window_size-800)/2+820+"px";
    margin_left2 = ((window_size-800)/2-8.5-300)/2+"px";
    if(window.getWindowCleintWidth()>1435){
    document.getElementById("side_ad2").style.display="block";
    document.getElementById("side_ad2").style.margin="30px 0 0 "+margin_left;
    document.getElementById("side_ad").style.display="block";
    document.getElementById("side_ad").style.margin="30px 0 0 "+margin_left2;
    }else{
    document.getElementById("side_ad2").style.display="none";
    document.getElementById("side_ad").style.display="none";
    }
    }
    </script>

    2017.07.05 22:27 신고
    아이텔카이트

    와우 ㅋㅋ 뭔가 간단해진 느낌입니다..
    아이디만 바꿔서 추가하면 몇개라도
    광고를 추가가능하게 만드신거죠??

    정말 감사드립니다.
    고민고민해서 위치조정까지 했네요 ㅎ

    2017.07.06 00:42 신고
    하나 하나즈오우

    도움이 되어서 저도 기쁘네요^^

    2017.07.06 01:12 신고

비밀댓글입니다

2017.07.06 00:47

비밀댓글입니다

2017.08.02 13:39

비밀댓글입니다

2017.11.17 19:09
    하나 하나즈오우

    스킨 변경 후, 사이트맵 다시 만들어서 제출하니까 누락 되는 글 이틀 뒤에 다 복구 되더라고요.
    지금 쓰는 스킨은 제가 직접 만든 스킨 입니다

    2017.11.17 21:30 신고
김고딕

감사합니다. 도움이 되었습니다. 그런데 이미 붙인 사이드 광고 밑에 또 사이드광고를 붙이려면 어떻게 하면 좋을까요?

2017.12.30 23:20 신고
생각하는기계

우측 사이드에 애드센스가 아닌 애드핏을 달고 싶은데, 혹시 방법 아시면 부탁드리겠습니다.

2018.10.14 16:37 신고
텐션

관리자의 승인을 기다리고 있는 댓글입니다

2018.11.30 11:51
최오리

관리자의 승인을 기다리고 있는 댓글입니다

2019.08.17 08:17
 비밀글