태그 클라우드 (Tag Cloud)을 블로그에 적용하자

흔히 볼 수 있는 네이버 인기태그다

어찌보면 심플하면서도 언뜻 눈에 피로가 덜가는 생삭으로 맞춘게 아닌가 싶을 정도로 보기 좋다

(네이버 특유의 색상이기도 하지만..)

먼저 가장 흔히 블로그마다 볼수 있는 태그는 아래 형태이다.

내 블로그에 적용해 보자. *예 택스트큐브닷컴 블로그

 아래 소스(코딩) 참고

skin.html 소스추가

<!-- 분류 목록--> <div class="category"> <h3>분류 목록</h3> <div class="data">[##_category_##]</div> </div> </s_sidebar_element> <s_sidebar_element> <!-- 태그목록 모듈1 --> <div class="tagbox"> <h3>태그 구름</h3> <div id="htags" style="display:none;"> <tags> <s_random_tags> <a href="[##_tag_link_##]" class="[##_tag_class_##]">[##_tag_name_##]</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="http://jnstory.net/1299/attach/swfobject.js"></script> <script type="text/javascript"> var t = new SWFObject("http://fs.textcube.com/blog/1/19153/attach/XQY8jzEz93.swf", "tagcloud", "100%", "200", "7", "#FFFFFF"); t.addVariable("tcolor", "0x222222"); t.addVariable("hicolor", "0x006CA6"); t.addVariable("tcolor2", "0xF0E68C"); t.addVariable("mode", "tags"); t.addVariable("distr", "true"); t.addVariable("tspeed", "100"); t.addParam("allowScriptAccess", "always"); t.addVariable("tagcloud", document.getElementById('htags').innerHTML.replace(/&amp;/gi, ' ').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> </div> <!-- 태그목록 모듈 끝--> </s_sidebar_element>

위 태그 클라우드 소스에서 짙게 표시된 소스(코딩)부분을 skin.html 사이드바부분에 추가한다. 소스(코딩)편집후 저장과 위젯설정 지정하고 필히 저장을 누르자. 이리하면 쉽게 태그클라우드를 적용 할 수 있다.

그 밖의..

          

 

http://www.metaportaldermedienpolemik.net/blog/Blog/2007-08-10/text-comparison-using-relational-tagclouds

http://eduspaces.net/csessums/weblog/378594.html