네이버나 다음의 인기검색어 부분을 살펴보면 현재의 인기검색어가 하나씩 스크롤링 되며 보여지는 것을 확인할 수 있습니다. 이러한 텍스트 스크롤링 스크립트를 티스토리에서도 적용이 가능합니다. 원하는 내용을 입력하여 스크롤링 할 수도 있으며, 최근 글이나 최근 댓글과 같이 지속적으로 변하는 내용의 경우에도 스크롤링이 가능합니다. 현재 블로그 상단메뉴에 최근 댓글이 스크롤링 되어 출력되고 있는 것을 살펴볼 수 있습니다.


이번 글에서는 최근 글이나 댓글을 스크롤링 할 수 있는 방법에 대해서 살펴보겠습니다. 단, 이를 사용할 시 사이드바에 있는 최근 글과 최근 댓글 모듈은 정상적으로 출력되지 않을 수 있다는 점에 유의하시길 바랍니다.

최근 글과 댓글을 스크롤링 형태로 출력시키기.txt


<head>와 </head>사이에 삽입할 내용



HTML/CSS 편집 모드에서 skin.html의 <head>와 </head> 사이에 추가해야 할 내용입니다.


<script type="text/javascript">

function textScroll(scroll_el_id) {

    this.objElement = document.getElementById(scroll_el_id);

    this.objElement.style.position = 'relative';

    this.objElement.style.overflow = 'hidden';


    this.objLi = this.objElement.getElementsByTagName('li');

    this.height = this.objElement.offsetHeight;

    this.num = this.objLi.length;

    this.totalHeight = this.height*this.num;

    this.scrollspeed = 2; // 스크롤 속도

    this.objTop = new Array();

    this.timer = null;

    

    for(var i=0; i<this.num; i++){

        this.objLi[i].style.position = 'absolute';

        this.objTop[i] = this.height*i;

        this.objLi[i].style.top = this.objTop[i]+"px";

    }

}


textScroll.prototype.move = function(){

    for(var i=0; i<this.num; i++) {

        this.objTop[i] = this.objTop[i] - this.scrollspeed;

        this.objLi[i].style.top = this.objTop[i]+"px";

    }

    if(this.objTop[0]%this.height == 0){

        this.jump();

    }else{

        clearTimeout(this.timer);

        this.timer = setTimeout(this.name+".move()",50);

    }

}


textScroll.prototype.jump = function(){

    for(var i=0; i<this.num; i++){

        if(this.objTop[i] == this.height*(-2)){

            this.objTop[i] = this.objTop[i] + this.totalHeight;

            this.objLi[i].style.top = this.objTop[i]+"px";

        }

    }

    clearTimeout(this.timer);

    this.timer = setTimeout(this.name+".move()",3000);

}


textScroll.prototype.start = function() {

    this.timer = setTimeout(this.name+".move()",3000);

}

</script>


※ 스크립트 출처 : http://trend21c.tistory.com/327

※ 검은색 블록으로 되어 있는 부분만 수정해주시면 됩니다. (1이나 2를 넣어주시면 됩니다)


style.css에 추가해야 할 내용



HTML/CSS 편집 모드에서 style.css 파일에 추가해야 하는 내용입니다.


#scroll {height:20px;}


※ 하나의 단위가 갖게 될 원하는 높이 값을 설정해주시면 됩니다.


최근 글 스크롤링하기


원하는 위치에 삽입해주시면 됩니다.


<ul id="scroll">

<s_rctps_rep>

    <li>&nbsp;&nbsp; @최근에 작성된 글 : <a href="[샵#_rctps_rep_link_#]">[#_rctps_rep_title_#]</a> <span style="font-size: 9pt">( [#_rctps_rep_rp_cnt_#] )</span></li>

</s_rctps_rep>

</ul>


<script type="text/javascript">

var real_search_keyword = new textScroll('scroll');

real_search_keyword.name = "real_search_keyword";

real_search_keyword.start();

</script>


※ @최근에 작성된 글 : 글의 제목 (댓글 수) 로 출력됩니다.


최근 댓글 스크롤링하기



원하는 위치에 삽입해주시면 됩니다.


<ul id="scroll">

<s_rctrp_rep>

    <li>&nbsp;&nbsp; @최근에 달린 댓글 : <a href="[#_rctrp_rep_link_#]">[#_rctrp_rep_desc_#]</a> <span style="font-size: 9pt">[#_rctrp_rep_name_#] [##_rctrp_rep_time_##]</span></li>

</s_rctrp_rep>

</ul>


<script type="text/javascript">

var real_search_keyword = new textScroll('scroll');

real_search_keyword.name = "real_search_keyword";

real_search_keyword.start();

</script>


※ @최근에 달린 댓글 : 댓글 내용 작성자 시간 으로 출력됩니다.


스크롤 하고자 하는 개수와 글자수 지정하기



화면설정 > 화면출력에서 사이드바 부분의 최근 글 부분과 최근 댓글 부분을 원하는 대로 수정해주시면 됩니다.