움직이는 나만의 태크창을 만드는 방법

움직이는 태그창을 만드는 방법입니다.

 

소스보기

 

<s_sidebar_element>

<!-- 태그목록 모듈 -->

                                                                                                                       <div class="module module_tag">

                                                                                <h3>Tag Cloud</h3>

                                                                                <div id="htags" style="display:none;"><tags>

 

         <a href="/tag/블로그" class="cloud3">블로그</a>

                 

         <a href="/tag/구글" class="cloud3">구글</a>

        

         <a href="/tag/파이어폭스" class="cloud3">파이어폭스</a>

        

         <a href="/tag/IT" class="cloud3">IT</a>

        

         <a href="/tag/소녀시대" class="cloud4">소녀시대</a>

        

         <a href="/tag/브라우저" class="cloud4">브라우저</a>

1. 위의 붉은색 부분이 바로 움직이게 될 태그들입니다.  

2. 전체태그 중 자신의 대표 태그를 20개 선정해 위의 붉은색 태그와 바꿔줍니다.

3. 태그 수에 따라 해당 행을 복사한 뒤 한 줄씩 띄어붙힌 후 동일한 작업을 실시합니다.

4. 작업이 끝났으면 다음 소스를 이어 붙힙니다.

<a href="/"></a></tags></div>

         <div id="TiCumulus"><p>Flash Player 9 or better.</p></div>

         <script type="text/javascript" src="http://cfs.tistory.com/custom/blog/30/306426/skin/images/swfobject.js"></script>

<script type="text/javascript">

  var t = new SWFObject("http://cfs.tistory.com/custom/blog/30/306426/skin/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>

                           </li>

   

    <!-- RSS -->

      <div class="widgettitle">

        <div class="box">

          <a href="http://blogyourlife.tistory.com/rss/" target="_blink"><img src="http://fs.textcube.com/blog/0/7024/skin/1/images/rss.gif" alt="RSS 구독하기" /></a>

        </div>

      </div>

   

 

 

  </ul>

             </div>

                                                                                                                                </s_sidebar_element>

5. 해당소스를 스킨 -> 사이드바 ->HTML배너 편집 기능을 이용해 입력합니다.
6. 직접 skin.html 부분에 삽입하셔도 됩니다. (</s_sidebar_element>와 <s_sidebar_element>의 사이)