플래쉬 태그 구름은 아주 오래된 스크립트+플래쉬 입니다.
제가 홈페이지를 운영할때 사용했던것인데 아직까지 사랑을받고 많은 분들이 블로그에 사용하시네요.
시각적이나 깔끔함에 사용을 하지만 한가지 단점은 모바일로 접속해서 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> 부터 삭제하고 소스를 넣으라고 하지만 제 블로그는 그렇게 하면 사이드바 디자인이 약간 어긋납니다.
사용자 디자인에 따라 그 부분은 조절하셔야 할듯 합니다.
<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님 께 감사 드립니다.
아...
태그 구름은 어디에 나오나요??
안녕하세요.
태그구름은 오른쪽 메뉴 중간쯤에 "태그 목록"이란곳에 보이는 부분입니다.
덕분에 유익한 정보 얻고 갑니다^^
댓글 감사합니다.^^
구름테그가 적용된 부분 배경을 조정하시면 더욱 이쁠거 같아요.^^
정보 감사합니다
댓글 감사합니다.
새해 복 많이 받으세요.^^