티스토리 스크롤 배너 간단하게 하는 방법.

티스토리 스크롤 배너 적용 방법.

1. skin.html 에 배너 붙이기.

먼저 스크롤 배너를 넣고 싶은 위치에 추가를 해주는게 제일 먼저해야 할 일입니다.

티스토리 "관리페이지" 에서 HTML/CSS 페이지로 이동을 해주세요.

저 같은 경우에는 본문을 보여주는 페이지에서만 스크롤 배너를 적용하고 싶었기 때문에 <s_article_rep></s_article_rep> 해당 테그 안에 배너를 넣었습니다.

<h2 class="hidden">글</h2>

<div class="wrap_entry_1">

        <div class="wrap_cont_1">

                <div class="tit">

                        "타이틀"

                </div>

                <div id="adv-scroll_1">

                        <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

                        <!-- adv#1_160_600 -->

                        <ins class="adsbygoogle"

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

                                    data-ad-client="ca-pub-123123123451"

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

                        <script>

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

                        </script>

                </div>

                <div class="desc_1">

                        #_article_rep_desc_#

                </div>

        </div>

</div>

위 소스와 본인의 소스는 무조건 다를 것입니다. 같을 수는 없겠죠.

여튼 원하시는 위치에 광고배너를 위치시켜주세요.

2. style.css 

그 다음해야 하는 일은 광고배너에 대한 스타일을 지정하는 것입니다.

#adv-scroll_1 {

position: absolute;

right: 0;

top: 15px;

margin-right: -320px;

text-align:left;

width: 300px;

}

위에서 수정해야 할 부분이 있는데요.

top : 배너를 가장 위에 붙일 꺼면 0으로 하시면 되구요. 떨어뜨리고 싶은 만큼 수치를 주시면 됩니다.

margin-right : width 크기 + 본문에서 떨어뜨리고 싶은 수치 하시면 되요. 저같은 경우 본문에서 20px 더 떨어뜨린 것입니다.

width : 광고배너의 가로폭입니다.

아참 그리고 더 중요한 것 하나!

#adv-scroll 태그를 감싸고 있는 태그에 대한 스타일을 하나 추가해야됩니다.

제 소스로 설명을 하자면 <div class="wrap_cont_1"></div> 이 태그에 position: relative; 를 추가해주셔야 합니다.

그냥 간단히 <div class="wrap_cont_1" style="position: relative;"></div> 이렇게 하셔도 됩니다.

그리고 혹시나 overflow: hidden 이라는 스타일이 있다면 제거해주셔야합니다.

3. 스크롤 이벤트 추가하기.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<script type="text/javascript">

        $(function(){

                var timer;

        

                $( window ).scroll(function() {

                        if(timer) {

                                window.clearTimeout(timer);

                        }

            

                        timer = window.setTimeout(function() {

                                /* "15"의 수치는 CSS에서 "top" 부분에 적으신 수치를 말합니다. */

                                var sTop = $( window ).scrollTop() + 15;

                                if (sTop < 0)

                                        sTop = 15;

                                /* IE8에서는 비정상적으로 동작을 하는 경우가 있어요. */

                                /* 그래서 IE8에서는 부드러운 움직임 없어요. */

                                var rv = -1;

                                if (navigator.appName == 'Microsoft Internet Explorer') {

                                        var ua = navigator.userAgent;

                                        var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");

                                        if (re.exec(ua) != null)

                                                rv = parseFloat(RegExp.$1);

                                       rv = Number(rv);

                                }

                

                                if (rv >= 0 && rv <= 8) {

                                        $( "#adv-scroll_1" ).stop( true, true ).css('top', sTop);

                                } else {

                                        $( "#adv-scroll_1" ).stop( true, true ).animate({

                                                'top': sTop

                                        }, 600, function() {

                                                // Animation complete.

                                        });

                                }

                        }, 200);

                });

        });

</script>

</body>

위 이벤트 소스에 대해서는 그냥 주석으로 설명을 대신 할께요.

아참 이 부분은 </body> 바로 위에 추가해주시면 됩니다.

감사합니다.