본문 바로가기
블로그

티스토리 태그목록 입체적으로 바꾸기_TiCumulus적용방법_태그목록이 움직인다.

by 세상밖으로  2010. 4. 12.
반응형
블로그 사이드 바에 있는 태그목록을 좀더 멋있게 꾸며보겠습니다. 이미 프로, 파워 블로거님들께서는  많이들 달고 계시죠. 저도 블로그 초입으로써 많은 블로거님들의 포스트를 보면서 태그목록을 바꿨습니다. 도움주신 선배블로거님들께 먼저 감사말씀드리고여~

자~ 이제 시작해 보겠습니다.

1. 먼저 아래 파일을 다운로드 받아주세요.


2. 다운받으신 TiCumulus.zip 파일의 압축을 푸시면 다음의 두가지파일이 나옵니다.

                                      

                   요 두개의 파일을 ADMIN → 스킨 → 파일업로드로 가셔서 파일을 올립니다.


3. 다음은 ADMIN → 스킨 → HTML/CSS편집에 가셔서 style.html부분을 수정합니다.

'태그목록 모듈' 부분에 있는 아래부분을 찾아주세요.
<ul>
 <s_random_tags>
    <il><a href="" class=""></a></il>
  </s_random_tags>
</ul>

★ 파랗게 써있는 <il>, </il> 꼭 지워야합니다!



다음과 같이 수정합니다.
<div id="htags" style="display:none;"><tags>
  <s_random_tags>
    <a href="" class=""></a>
  </s_random_tags>
<a href="/"></a></tags></div>
<div id="TiCumulus"><p>Tistory Cumulus Flash tag cloud by <a href="
http://zoc.kr">BLUEnLIVE</a> requires Flash Player 9 or better.</p></div>
<script type="text/javascript" src="./images/swfobject.js"></script>
<script type="text/javascript">
  var t = new SWFObject("./images/tagcloud.swf", "tagcloud", "100%", "200", "7", "#ffffff");
  t.addVariable("tcolor", "0x222222");
  t.addVariable("mode", "tags");t.addVariable("distr", "true");t.addVariable("tspeed", "100");t.addParam("allowScriptAccess", "always");
  t.addVariable("tagcloud", document.getElementById('htags').innerHTML.replace(/class=([\w]+)/gi, 'class="$1"').replace(/\"\"/gi, '"').replace(/class=\"/gi, 'style=\"font-size:').replace(/:cloud([\d])/gi, ':1$1pt;').replace(/TAGS\>/gi, 'tags>').replace(/\<A\s/gi, '<a ').replace(/\<\/A\>/gi, '</a>').replace(/\"/g, "'"));
  t.write("TiCumulus");
</script>

혹시 위의 수정코드 않긁어지시면 아래 파일 받아주세요. 태그 써놓은 파일입니당.

어디를 바꿔야 하는지 아시겠죠? 빨간부분 바뀌주시변 됩니다. 저장하시고 태그목록 확인!!!



※  주의사항 : 기존의 태그를 혹시나 하는맘에 지우지 않고 걍 주석처리하면 않되는 경우
                  가 있습니다. 변경되는 부
분의 기존 태그는 과감히 지우시고 새로 작성
                  될 태그를 넣어주세요!!

짠~~ 완성입니다.

나름 간지나죠.ㅋ 마우스 대면 빙빙 돌아가네요. 재미도 있고 공부도 되는 블로그 건설 프로젝트~ 
조금씩 꾸며가면서 완성되어가는 모습이 노력한 보람이 있습니다.^^ 멋진 블로그 많이 만들어보세용!



 
반응형

댓글