본문 바로가기

블로그 관련 정보/블로그 꾸미기

플래쉬 태그구름 적용하기

플래쉬 태그구름 적용하기
광고 차단 플러그인을 꺼 주시면 블로그 운영에 도움이 됩니다. ^^

플래쉬 태그 구름은 아주 오래된 스크립트+플래쉬 입니다.

 

제가 홈페이지를 운영할때 사용했던것인데 아직까지 사랑을받고 많은 분들이 블로그에 사용하시네요.

 

시각적이나 깔끔함에 사용을 하지만 한가지 단점은 모바일로 접속해서 PC버전으로 화면보기 하면 보이지 않습니다.

 

태그 구름 (Tag Cloud) 는 메타 데이터에서 얻어진 태그들을 분석하여 중요도나 인기도등을 고려하여 시각적으로 늘어 놓아 웹사이트에 표시하는 것이라고 할 수 있습니다.
사용자는 이렇게 표시된 태그중 마음에 드는 키워드를 발견하고 그것을 선택하여 그 메타 데이터에 원래 연결된 웹 페이지로 이동을 하게 됩니다.

  TiCumulus.rar

위 파일을 다운로드 하셔서 압축을 풀어 줍니다.

swfobject.js, tagcloud.swf, script.txt 파일이 있습니다.

 

swfobject.js, tagcloud.swf 파일은 티스토리 파일 업로드 기능을 이용해서 업로드 합니다.

 

 

파일을 업로드 하셨으면 HTMLl/CSS 편집에서 소스 코드를 수정해야 합니다.

 

 

Ctrl+F 키를 눌러서 찾기 기능을 이용하여's_random_tags'로 검색하세요.
기존에 있는 태그목록 모듈인 <ul> 안에<s_random_tags> ~ </s_random_tags>부분을 삭제하고 아래 스크립트를 넣어주세요.

 

다른 블로그 설명을 보면 <ul></ul> 부터 삭제하고 소스를 넣으라고 하지만 제 블로그는 그렇게 하면 사이드바 디자인이 약간 어긋납니다.

사용자 디자인에 따라 그 부분은 조절하셔야 할듯 합니다.

 

<!-- 3D 태그 구름 -->
<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="./images/swfobject.js"></script>
<script type="text/javascript">
  var t = new SWFObject("./images/tagcloud.swf", "tagcloud", "100%", "170", "7", "#ffffff");
  t.addVariable("tcolor", "0x222222");
  t.addVariable("hicolor", "0x3C5A91");
  t.addVariable("tcolor2", "0xF0E68C");
  t.addVariable("mode", "tags");
  t.addVariable("distr", "true");
  t.addVariable("tspeed", "170");
  t.addParam("wmode", "opaque");
  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>
<!-- 3D 태그 구름 끝 -->

 

드래그가 안될것입니다.

첨부된 파일에 'script.txt'안에 내용을 전부 넣어주시면 됩니다.

 

간단 설명 

var t = new SWFObject
              ("./images/tagcloud.swf", "tagcloud", "100%", "170", "7", "#ffffff");
 
100% : 가로크기
 170 : 세로크기
 #ffffff : 태그 클라우드의 배경색
 
  t.addVariable("tcolor", "0x222222");
  글자색
  t.addVariable("tcolor2", "0xF0E68C");
  인기태그 색
  t.addVariable("hicolor", "0x3C5A91");

 마우스 오버시 글자색

컬러 변경을 하실려면 0x는 그래로 두고 뒤6자리를 바꾸면 됩니다.

 

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


태그들이 움직이는 속도, 숫자가 높을 수록 빙글빙글 도는 속도가 빨라짐

 

적용이 끝났습니다.

 

티스토리에서 돌아가는 태그구름을 만드신(변환) http://zoc.kr/543 BLUEnLIVE님 께 감사 드립니다.