본문 바로가기

blog DIY

[blog DIY] 사이드바 태그목록을 화려하게! 태그 클라우드

다른 분들 블로그를 염탐(?) 하다가 태그 목록이 신비스럽게 돌아가는 효과를 보고

앗 저거 나도!!! 싶어서 해보았다ㅎㅎㅎ

설정을 개개인에 맞게끔 바꿔주는 부분들이 좀 있어서

전혀 어렵지는 않은데 헷갈릴 수도 있을꺼 같아서 정리를 해봤다.ㅋㅋㅋ

우선은 파일을 저장해서 압축을 풀어준다.


TiCumulus.zip



<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://luminoustime.tistory.com">L´avare</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", "#333333");

t.addVariable("tcolor", "0xFFE40F");

t.addVariable("tcolor2", "0x4C4C4C");

t.addVariable("hicolor", "0x4641D9");

t.addVariable("mode", "tags");

t.addVariable("distr", "true");

t.addVariable("tspeed", "200");

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>


태그목록이 플래시 효과가 나타나면서 우주에 있는듯한 몽환적인 효과.ㅋㅋㅋㅋㅋ