티스토리 스킨 #1 양쪽 사이드에 고정 애드센스 달기[수정 리얼클릭 + 클릭몬스터로대체]

티스토리 스킨 #1 양쪽 사이드에 고정 애드센스 달기 [수정 리얼클릭 + 클릭몬스터로대체] 수정 부분은 밑에 다시 적었어요.~

 

 

제 티스토리 스킨은 티스토리에서 제공하는 반응형 #1번을 사용중에 있습니다.

 

그런데 양쪽 사이드에 애드센스를 달아보고 싶어서 작업을 좀 해보았습니다. 

 

 

 

우선 양쪽에 120*600 짜리 하나씩 그리고 고정으로 달았습니다.

 

 

아래 소스코드를 보시면 아시겠지만 화면크기에 따라 

양쪽에 마진을 주기도 하였고

마진을 빼기도 하였습니다.

 

 

 

 

1. 화면 가로폭이 1440 이상인경우

양쪽 여백이 생깁니다.

 

 

 

 

 

2. 화면 가로폭이 1440 보다는 작고 1350 사이인 경우

양쪽 여백을 아예 없앴습니다.

 

 

 

 

3. 화면 가로폭이 1350 보다 작은경우 (모바일포함) 

애드센스가 나오지 않습니다.

 

 

 

 

자 이제 중요한 적용 방법입니다.

 

 

아래 소스 코드를 응용하면 되는데 

애드센스에서 120*600 을 만든다음 

아래 코드 왼쪽 애드센스와 오른쪽 애드센스에 넣어주시고

 

<div id="side_ad_left" style="width: 120px; height: 600px; margin-top: 20px; margin-left: 10px; float: left; position: fixed; ">			
<!-- 왼쪽  애드센스 Start -->
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:inline-block;width:120px;height:600px"
     data-ad-client="ca-pub-"
     data-ad-slot=""></ins>
<script>
    (adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- 왼쪽  애드센스 End -->
</div>
<div id="side_ad_right" style="width: 120px; height: 600px; margin-top: 20px; right: 10px;  float: right; position: fixed; ">			
<!-- 오른쪽 애드센스 Start -->
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:inline-block;width:120px;height:600px"
     data-ad-client="ca-pub-"
     data-ad-slot=""></ins>
<script>
    (adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- 오른쪽 애드센스 End -->
</div>
<script>

    var window_size = window.getWindowCleintWidth();
    var margin_left = ((window_size - 800) / 2 - 8.5 - 120) / 2 + "px";
    console.log(margin_left);
    if (window_size > 1440) {
        document.getElementById("side_ad_left").style.display = "block";
        document.getElementById("side_ad_left").style.margin = "30px 0 0 " + margin_left;
        document.getElementById("side_ad_right").style.display = "block";
        document.getElementById("side_ad_right").style.margin = "30px " + margin_left + " 0 0";
    } else if (window_size <= 1440 & window_size > 1350) {
        document.getElementById("side_ad_left").style.display = "block";
        document.getElementById("side_ad_left").style.margin = "30px 0 0 0"
        document.getElementById("side_ad_right").style.display = "block";
        document.getElementById("side_ad_right").style.margin = "30px 0 0 0"
    } else {
        document.getElementById("side_ad_left").style.display = "none";
        document.getElementById("side_ad_right").style.display = "none";
    }

    window.onresize = function () {
        window_size = window.getWindowCleintWidth();
        margin_left = ((window_size - 800) / 2 - 8.5 - 120) / 2 + "px";
        if (window.getWindowCleintWidth() > 1440) {
            document.getElementById("side_ad_left").style.display = "block";
            document.getElementById("side_ad_left").style.margin = "30px 0 0 " + margin_left;
            document.getElementById("side_ad_right").style.display = "block";
            document.getElementById("side_ad_right").style.margin = "30px " + margin_left + " 0 0";
        } else if (window_size <= 1440 & window_size > 1350) {
            document.getElementById("side_ad_left").style.display = "block";
            document.getElementById("side_ad_left").style.margin = "30px 0 0 0"
            document.getElementById("side_ad_right").style.display = "block";
            document.getElementById("side_ad_right").style.margin = "30px 0 0 0"
        } else {
            document.getElementById("side_ad_left").style.display = "none";
            document.getElementById("side_ad_right").style.display = "none";
        }
    }
</script>

dkContent 아래 부분에 넣으면 끝~ 

 

 

 

 

 

 2018.05.28일 수정부분

 

이부분을 작성하고 나서 몰랐는데 div 안에 애드센스를 넣는것 자체가 불법이라는 얘기를 듣고 

오른쪽 리얼클릭(160*600) 왼쪽 클릭몬스터(160*600) 으로 다시 수정하였다. 

방법은 위와 같기에 따로 적진 않을께요.~~

 

 

 

리얼클릭과 클릭몬스터로 재수정한 부분

 

---

 2019.04월 현재 

사용치는 않고 있습니다.

블로그를 다시 시작했어요.~~^^

전 블로그가 완전 저품질 되어서요.~