Web/Tistory Blog
티스토리 메인페이지 내 헤드라인형 포스트의 인터벌타임 조절하기
꾸러기 Joy
2017. 8. 26. 22:52
티스토리 메인페이지는 블로그를 마치 홈페이지처럼 사용자 마음대로(≠나는 아직) 다양하게 꾸밀 수 있도록 변형이 가능하다.
그 중 헤드라인형 포스트의 포스트 개수나 인터벌 타임(포스트 하나가 보여지는 시간)을 조절하고 싶을 때는 다음의 소스를 수정한다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 | <h2 class="tt-item-title"><span class="tt-item-title-bg"><span class="tt-item-title-inner"></span></span></h2> <ul class="tt-wrap-item"> <s_tabloid> <li class="tt-item-point-0 tt-span-12 tt-last tt-clear"> <div class="tt-wrap-post tt-span-12 tt-last"> <a href="" title="" class="tt-wrap-thumb-link tt-span-12-border tt-span-12- tt-last"><img class="tt-post-thumb" style="" src="http:////" alt="" /></a> <div class="tt-wrap-postinfo tt-span-12 tt-last tt-clear"> <div class="tt-post-thumb-link"> <a class="tt-post-link-over" href="#0" onclick="javascript:ttChangePointItemSelectedArticle2('ttItem', this);return false;" title="">1</a> <a href="#1" onclick="javascript:ttChangePointItemSelectedArticle2('ttItem', this);return false;" title="">2</a> <a href="#2" onclick="javascript:ttChangePointItemSelectedArticle2('ttItem', this);return false;" title="">3</a> <a href="#3" onclick="javascript:ttChangePointItemSelectedArticle2('ttItem', this);return false;" title="">4</a> <a href="#4" onclick="javascript:ttChangePointItemSelectedArticle2('ttItem', this);return false;" title="">5</a> </div> </div> </div> </li> <li class="tt-item-point-1 tt-span-12 tt-last tt-clear" style="display: none;"> <div class="tt-wrap-post tt-span-12 tt-last"> <a href="" title="" class="tt-wrap-thumb-link tt-span-12-border tt-span-12- tt-last"><img class="tt-post-thumb" style="" src="http:////" alt="" /></a> <div class="tt-wrap-postinfo tt-span-12 tt-last tt-clear"> <div class="tt-post-thumb-link"> <a href="#0" onclick="javascript:ttChangePointItemSelectedArticle2('ttItem', this);return false;" title="">1</a> <a href="#1" class="tt-post-link-over" onclick="javascript:ttChangePointItemSelectedArticle2('ttItem', this);return false;" title="">2</a> <a href="#2" onclick="javascript:ttChangePointItemSelectedArticle2('ttItem', this);return false;" title="">3</a> <a href="#3" onclick="javascript:ttChangePointItemSelectedArticle2('ttItem', this);return false;" title="">4</a> <a href="#4" onclick="javascript:ttChangePointItemSelectedArticle2('ttItem', this);return false;" title="">5</a> </div> </div> </div> </li> <li class="tt-item-point-2 tt-span-12 tt-last tt-clear" style="display: none;"> <div class="tt-wrap-post tt-span-12 tt-last"> <a href="" title="" class="tt-wrap-thumb-link tt-span-12-border tt-span-12- tt-last"><img class="tt-post-thumb" style="" src="http:////" alt="" /></a> <div class="tt-wrap-postinfo tt-span-12 tt-last tt-clear"> <div class="tt-post-thumb-link"> <a href="#0" onclick="javascript:ttChangePointItemSelectedArticle2('ttItem', this);return false;" title="">1</a> <a href="#1" onclick="javascript:ttChangePointItemSelectedArticle2('ttItem', this);return false;" title="">2</a> <a href="#2" class="tt-post-link-over" onclick="javascript:ttChangePointItemSelectedArticle2('ttItem', this);return false;" title="">3</a> <a href="#3" onclick="javascript:ttChangePointItemSelectedArticle2('ttItem', this);return false;" title="">4</a> <a href="#4" onclick="javascript:ttChangePointItemSelectedArticle2('ttItem', this);return false;" title="">5</a> </div> </div> </div> </li> <li class="tt-item-point-3 tt-span-12 tt-last tt-clear" style="display: none;"> <div class="tt-wrap-post tt-span-12 tt-last"> <a href="" title="" class="tt-wrap-thumb-link tt-span-12-border tt-span-12- tt-last"><img class="tt-post-thumb" style="" src="http:////" alt="" /></a> <div class="tt-wrap-postinfo tt-span-12 tt-last tt-clear"> <div class="tt-post-thumb-link"> <a href="#0" onclick="javascript:ttChangePointItemSelectedArticle2('ttItem', this);return false;" title="">1</a> <a href="#1" onclick="javascript:ttChangePointItemSelectedArticle2('ttItem', this);return false;" title="">2</a> <a href="#2" onclick="javascript:ttChangePointItemSelectedArticle2('ttItem', this);return false;" title="">3</a> <a href="#3" class="tt-post-link-over" onclick="javascript:ttChangePointItemSelectedArticle2('ttItem', this);return false;" title="">4</a> <a href="#4" onclick="javascript:ttChangePointItemSelectedArticle2('ttItem', this);return false;" title="">5</a> </div> </div> </div> </li> <li class="tt-item-point-4 tt-span-12 tt-last tt-clear" style="display: none;"> <div class="tt-wrap-post tt-span-12 tt-last"> <a href="" title="" class="tt-wrap-thumb-link tt-span-12-border tt-span-12- tt-last"><img class="tt-post-thumb" style="" src="http:////" alt="" /></a> <div class="tt-wrap-postinfo tt-span-12 tt-last tt-clear"> <div class="tt-post-thumb-link"> <a href="#0" onclick="javascript:ttChangePointItemSelectedArticle2('ttItem', this);return false;" title="">1</a> <a href="#1" onclick="javascript:ttChangePointItemSelectedArticle2('ttItem', this);return false;" title="">2</a> <a href="#2" onclick="javascript:ttChangePointItemSelectedArticle2('ttItem', this);return false;" title="">3</a> <a href="#3" onclick="javascript:ttChangePointItemSelectedArticle2('ttItem', this);return false;" title="">4</a> <a href="#4" class="tt-post-link-over" onclick="javascript:ttChangePointItemSelectedArticle2('ttItem', this);return false;" title="">5</a> </div> </div> </div> </li> </ul> <script type="text/javascript"> var roller = ttRepeatItemByInterval('ttItem', 5, 2); </script> | cs |
line 77의 굵게 표시한 ttRepeatItemByInterval('ttItem', 5, 2); 에서
중간 숫자 5는 번갈아 보여지는 포스트의 수를, 마지막 숫자 2는 인터벌타임을 뜻한다.
1) 포스트 수를 조절하고 싶으면 포스트의 수를 뜻하는 중간 숫자를 바꾸면 된다.
대신 위의 <li class="tt-item-point-4 tt-span-12 tt-last tt-clear" style="display: none;"> 부터 </li> 까지 하나의 블럭으로 보고
블럭의 갯수와 li class="tt-item-point-다음에 나오는 숫자(0~4)도 맞춰줘야 한다.
2) 인터벌타임. 즉, 포스트 하나당 노출 시간을 조절하고 싶으면 마지막 숫자를 바꿔준다.
예를들어, 2를 5로 바꾸면 포스트가 천천히 전환되는것을 확인할 수도 있고, 응용하면 이미지 전환을 없앨 수도 있다.