• IT인터넷

  • 티스토리 태그 TAG 회전형 3D구름 만들기

  • Aki_ Aki_ · ·
728x90

플래시 태그 구름 적용 방법

플래시 태그 구름 적용 방법

플래시 태그 구름은 시각적으로 매력적인 스크립트와 플래시 기능을 활용하여 태그를 표시하는 오래된 방법입니다. 그러나 한 가지 단점은 모바일 환경에서는 보이지 않는다는 점입니다. 이 글에서는 플래시 태그 구름을 블로그에 적용하는 방법을 안내하겠습니다.

적용 방법

파일 다운로드

첨부된 파일을 다운로드한 후, 압축을 풉니다. 압축을 풀면 다음의 3개 파일이 생성됩니다:

  1. swfobject.js
  2. tagcloud.swf
  3. script.txt

파일 업로드

swfobject.js와 tagcloud.swf 두 파일은 티스토리 스킨에 업로드합니다.

소스 코드 수정

티스토리 관리자 페이지에서 HTML/CSS 편집으로 이동합니다.

플래시 태그 구름 적용 방법

스킨 편집 화면에서 Ctrl + F 키를 눌러 "태그목록"을 검색하여 해당 위치를 찾습니다.

코드 붙여 넣기

찾은 위치에 아래 코드를 복사하여 붙여 넣습니다.

<!-- 3D 태그 구름 -->
<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%", "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 태그 구름 END -->

코드 설명

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");
//태그들이 움직이는 속도, 숫자가 높을 수록 빙글빙글 도는 속도가 빨라짐.

자신이 원하는 스타일로 변경하실 분들은 참고하셔서 수정하시면 되겠습니다.

적용 완료

모든 작업이 끝났습니다. 이제 원하는 대로 꾸미고 적용하면 블로그의 태그가 더욱 매력적으로 보일 것입니다. 이렇게 간단한 작업으로 블로그의 시각적 효과를 높일 수 있으며, 마음에 드는 결과를 보면 기분도 좋아질 것입니다.

※ 현제 티스토리는 플래시를 지원하지 않습니다. 그래서 해당 클라우드태그 기능을 사용하실 수 없습니다.

728x90
comment
100%

티스토리툴바