[블로그 꾸미기팁] 블로그에 태그 클라우드 설치하기!

이런이미지 많이 보셨죠? 이러한 글자로 이뤄진 이미지를 통틀어 태그 클라우드라고 합니다.

보통 블로그를 하시는 분들도 다들 태그를 걸어두시는데요~ 티스토리에 예쁘게 움직이는 태그 클라우드를 걸 수 있는 방법! 지금부터 알려드리겠습니다.

구름.rar

먼저 이 파일을 받아주세요!!

HTML/CSS로 가셔서 skin.html에서 태그목록 모듈을 찾습니다. 

제가 파란색으로 드래그 한 부분을 없애고 구름.rar에 있는 스크립트를 넣어주세요!

<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>

저장하신다음 HTML/CSS 바로 옆에 있는 파일 업로드를 클릭해서 스크립트 말고 남은 두 파일을 모두 업로드 해주세요! 제목은 이미지에도 나와있지만 swfobject와 tagcloud입니다.

업로드가 되었다면 블로그에 예쁘게 자리가 잡혔을꺼에요!

저는 태그가 얼마 없어서 부실하지만 많으면 정말 이쁘게 움직일 것 같은 느낌이 들어요!

어떠세요? 어렵지 않죠?