네이버나 다음의 인기검색어 부분을 살펴보면 현재의 인기검색어가 하나씩 스크롤링 되며 보여지는 것을 확인할 수 있습니다. 이러한 텍스트 스크롤링 스크립트를 티스토리에서도 적용이 가능합니다. 원하는 내용을 입력하여 스크롤링 할 수도 있으며, 최근 글이나 최근 댓글과 같이 지속적으로 변하는 내용의 경우에도 스크롤링이 가능합니다. 현재 블로그 상단메뉴에 최근 댓글이 스크롤링 되어 출력되고 있는 것을 살펴볼 수 있습니다.
이번 글에서는 최근 글이나 댓글을 스크롤링 할 수 있는 방법에 대해서 살펴보겠습니다. 단, 이를 사용할 시 사이드바에 있는 최근 글과 최근 댓글 모듈은 정상적으로 출력되지 않을 수 있다는 점에 유의하시길 바랍니다.
최근 글과 댓글을 스크롤링 형태로 출력시키기.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> @최근에 작성된 글 : <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> @최근에 달린 댓글 : <a href="[샵#_rctrp_rep_link_#샵]">[샵#_rctrp_rep_desc_#샵]</a> <span style="font-size: 9pt">[샵#_rctrp_rep_name_#샵] </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>
※ @최근에 달린 댓글 : 댓글 내용 작성자 시간 으로 출력됩니다.
스크롤 하고자 하는 개수와 글자수 지정하기
화면설정 > 화면출력에서 사이드바 부분의 최근 글 부분과 최근 댓글 부분을 원하는 대로 수정해주시면 됩니다.
'Blog Tip > Design' 카테고리의 다른 글
| CSS를 이용해 블로그 상단 메뉴바 만들기(2) (7) | 2013.02.22 |
|---|---|
| CSS를 이용해 블로그 상단 메뉴바 만들기(1) (12) | 2013.02.21 |
| 배경과 테두리, 그림자로 레이어 꾸미기 (6) | 2013.02.12 |
| 블로그에 플로팅 배너(플로팅 레이어) 달기 (13) | 2013.02.11 |
| 트위터 리트윗(Retweet) 버튼 달기 (4) | 2013.01.29 |
댓글