728x90
반응형
플래쉬 태그 구름은 아주 오래된 스크립트+플래쉬 입니다.
시각적이나 깔끔함에 사용을 하지만 한가지 단점은
모바일에서는 보이지 않습니다.
일단 적용방법에 대해 안내해드리도록 하겠습니다.
아래 파일을 다운로드 받습니다.
다운받으신 파일압축을 푸시면
swfobject.js, tagcloud.swf, script.txt 3개의 파일이 있습니다.
그중 swfobject.js, tagcloud.swf 2개의 파일은 티스토리 스킨에 업로드 합니다.
파일을 업로드 하셨으면 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
반응형