[티스토리] 광고넣기 - javascript 사용

[티스토리] 광고넣기 - javascript 사용

javascript 를 사용하여 광고를 삽입하면 본문 중간에도 넣을 수 있다.

단점은, 스킨을 변경하게 되면 다시 입력해 주어야 한다는 것이다. 또한 스킨마다 id 및 class 가 다르기 때문에 그에 맞는 수정이 필요하다.

HTML 편집

꾸미기 → HTML/CSS 편집 메뉴로 들어간다.

</HTML> 이전에 <script> 태그를 추가한다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>   
<script>
$(function(){
    moveAds();
});
function moveAds(){
     // 이곳에 구현한다.
}
</script>

moveAds 함수에서 광고의 이동을 구현한다. 3개의 광고를 모두 html로 만들어 놓고, 원하는 위치로 이동시킨다.

<div id="adHeader" style="text-align:center;">
  <ins  class="adsbygoogle" style="display:inline-block;width:336px;height:280px"></ins>
</div>

역시 중앙 정렬을 위해 div 태그로 감쌌다. 이동을 위해 id를 부여하였다.

function moveAds(){
    var header = $('#head');
    if (! $(header).length) header = $('.area_title');
    if (! $(header).length) header = $('#mFeature');
    if (! $(header).length) header = $('#mArticle');   
    if (! $(header).length) header = $('.tab_line');
    if (! $(header).length) header = $('.post-content');
    addAdsenseAfter(header, '#adHeader')
}

function addAdsenseAfter(ele, id){
    if( $(ele).length == '1') {
        $(ele).after($(id));
        (adsbygoogle = window.adsbygoogle || []).push({});
    }
    else $(id).remove();
}

원하는 대상을 찾으면 이동하고 없는 경우는 해당 객체를 삭제한다.