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

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

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

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

TiCumulus.zip

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>

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

script.txt

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

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

짠~~ 완성입니다.

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