@, &, + 등 일부 태그가 제대로 출력되지 않거나, 출력이 되어도 정상적으로 클릭이 되지 않는 문제다.
일부 태그를 화면에 출력하지 않는 미봉책을 사용했었는데, 이걸 모든 태그에 대해 정상동작하도록 대폭 수정했다.
이렇게 & @ '
1. 파일의 설치
아래 파일을 다운받아 압축을 풀면 swfobject.js, TiCumulus.js 그리고 tagcloud.swf 세 개의 파일이 나온다.
이 세 파일을 스킨 직접올리기 기능을 이용해서 올린다.
이 세 파일을 스킨 직접올리기 기능을 이용해서 올린다.
TiCumulus_v121a.zip
엔터튤립9 글꼴을 이용해서 만들어 파일 크기가 157KB밖에 안 됨
2. 스킨 수정 (새로 설치하는 것을 기준으로 함)
우선 헤더에 아래와 같이 두 줄을 추가한다.
다음으로, 스킨을 직접 편집해서 아래와 같은 내용을 찾는다.
스킨에 따라 조금씩 모양이 다르기는 하지만, 꼭 있는 태그가 <s_random_tags>이다.
우선 수정해야하는 부분은 이 <s_random_tags> 밖에 있는 <ul>-</ul>이다.
이 부분을 아래와 같이 수정한다.
조금 길지만 소스 보기를 한 뒤에 복사하면 된다.
<script type="text/javascript" src="./images/swfobject.js"></script>
<script type="text/javascript" src="./images/TiCumulus.js"></script>
다음으로, 스킨을 직접 편집해서 아래와 같은 내용을 찾는다.
<div id="tagbox" class="module">
<h3>태그목록</h3>
<div class="tagboxWrap">
<ul>
<s_random_tags>
<li>
<a href="[#\#_tag_link_#\#]" class="[#\#_tag_class_#\#]"> [#\#_tag_name_#\#]</a>
</li>
</s_random_tags>
</ul>
</div>
</div>
스킨에 따라 조금씩 모양이 다르기는 하지만, 꼭 있는 태그가 <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">
//<![CDATA[
var flashvars = {
tcolor: "0x2970A6",
hicolor: "0x462A56",
mode: "tags",
distr: "true",
tspeed: "100",
tagcloud: document.getElementById('htags').innerHTML.E4Cumulus()
};
var params = {
allowScriptAccess: "always",
wmode: "opaque",
bgcolor: "#f7f7f7"
};
swfobject.embedSWF("./images/tagcloud.swf", "TiCumulus", "100%", "200", "9.0.0", null, flashvars, params);
//]]>
</script>
조금 길지만 소스 보기를 한 뒤에 복사하면 된다.
a. 22행의 "100%", "200"은 각각 가로, 세로의 크기임.
b. 20행의 "#f7f7f7"는 배경의 색상임.
c. 10행의 "0x2970A6"는 태그의 기본색상임.
d. 11행의 "0x462A56"는 선택된 태그의 색상임.
e. 1.21에 비해 바뀐 부분이 15행. 기존 버전에 비해 훨씬 정교하고 정확하게 변환하도록 수정되었음.
b. 20행의 "#f7f7f7"는 배경의 색상임.
c. 10행의 "0x2970A6"는 태그의 기본색상임.
d. 11행의 "0x462A56"는 선택된 태그의 색상임.
e. 1.21에 비해 바뀐 부분이 15행. 기존 버전에 비해 훨씬 정교하고 정확하게 변환하도록 수정되었음.
그럼 잘 쓰시기 바란다!!!
※ IE에서도 배경색이 잘 동작하도록 수정됨 (2009. 10. 19)
늘 고마운 마음입니다. 잘 사용할께요. :)
답글삭제사실 어제 1.21로 업했는데요... --;
@깊은숲 - 2009/08/08 18:40
답글삭제그럼 잽싸게 업뎃하시는 겁니다. ㅎㅎ
@깊은숲 - 2009/08/08 18:40
답글삭제그런데, 태그를 클릭해도 제대로 동작하지 않는군요. 뭔가 오류가 있는 것 같습니다.
예~ ^^
답글삭제이제는 다국어만 남은건가요? ^^;;
답글삭제@하얀별 - 2009/08/08 22:49
답글삭제그건 용량 문제 때문에 전혀 생각이 없습니다. ㅎㅎㅎ
감사합니다^^
답글삭제원래 2.0 버전을 사용하다가 업데이트했는데 계속 Tistory Cumulus Flash tag cloud by BLUEnLIVE requires Flash Player 9 or better.라고 나와요. 물론 플래시 플레이어는 있고요.
답글삭제파일도 제대로 업로드했는데...
무엇이 잘못되었는지 부탁드려요 ㅜㅜ
다음은 제 HTML 헤더부분이에요.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="imagetoolbar" content="no" />
<!-- RSS link -->
<link rel="alternate" type="application/rss+xml" title="[##_title_##]" href="[##_rss_url_##]" />
<!-- Stylesheet -->
<link rel="stylesheet" media="screen" href="./style.css" type="text/css" />
<link rel="stylesheet" media="print" href="./images/print.css" type="text/css" />
<!--[if IE 6]>
<link rel="stylesheet" media="screen" href="./images/screen_ie6.css" type="text/css" />
<![endif]-->
<!--[if gte IE 7]>
<link rel="stylesheet" media="screen" href="./images/screen_ie7.css" type="text/css" />
<![endif]-->
<!-- Favicon -->
<link rel="shortcut icon" href="[##_blog_link_##]favicon.ico" />
<!-- pageTitle -->
<title>[##_title_##] <s_page_title> :: [##_page_title_##]</s_page_title></title>
<script type="text/javascript">
function getElementsByClass(searchClass,node,tag){
// JavaScript function was developed by MissFlash (http://blog.missflash.com)
var classElements = new Array();
if(node == null) node = document;
if(tag == null) tag = '*';
var els = node.getElementsByTagName(tag);
var elsLen = els.length;
var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
var j = 0;
for(i=0; i<elsLen; i++){
if(pattern.test(els[i].className)){
classElements[j] = els[i];
j++;
if(els[i].id != "MF_Reference"){
var result = els[i].innerHTML;
els[i].style.display = "none";
}
}
}
return result;
}
</script>
<!-- SyntaxHighlighter -->
<script type="text/javascript" src="./images/shCore.js"></script>
<script type="text/javascript" src="./images/shBrushCpp.js"></script>
<script type="text/javascript" src="./images/shBrushCSharp.js"></script>
<script type="text/javascript" src="./images/shBrushCss.js"></script>
<script type="text/javascript" src="./images/shBrushDelphi.js"></script>
<script type="text/javascript" src="./images/shBrushDiff.js"></script>
<script type="text/javascript" src="./images/shBrushJScript.js"></script>
<script type="text/javascript" src="./images/shBrushPlain.js"></script>
<script type="text/javascript" src="./images/shBrushXml.js"></script>
<script type="text/javascript" src="./images/shBrushMsx.js"></script>
<script type="text/javascript" src="./images/shBrushAvs.js"></script&g..
@스트링 - 2009/08/11 13:36
답글삭제잘 되는데요
@BLUEnLIVE - 2009/08/11 17:32
답글삭제조금 지나니가 잘 되네요.
제가 너무 성급했네요.ㅋㅋ
제 블로그에 태그 클라우드를 적용해봤는데,
답글삭제그냥 하얗게만 나옵니다. 왜 그럴까요?
도움이 필요합니다. -ㅅ-
@doodrim - 2009/08/14 12:11
답글삭제스킨 편집이 잘못되었군요.
열심히 해보시란 말 밖엔 드릴 말이 없습니다.
@BLUEnLIVE - 2009/08/14 13:00
답글삭제열심히 해보았답니다..ㅠㅠ
소스 한번 봐주실래요?
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="alternate" type="application/rss+xml" title="[##_title_##]" href="[##_rss_url_##]" />
<link rel="stylesheet" media="screen" type="text/css" href="./style.css" />
<link rel="stylesheet" media="print" type="text/css" href="./images/print.css" />
<link rel="shortcut icon" href="[##_blog_link_##]favicon.ico" />
<title>[##_title_##] :: [##_page_title_##]</title>
<!-- Tag Cloud Start -->
<script type="text/javascript" src="./images/swfobject.js"></script>
<script type="text/javascript" src="./images/TiCumulus.js"></script>
<!-- Tag Cloud End -->
</head>
===========================================
<s_sidebar_element>
<!-- 태그목록 모듈 -->
<div class="boxTopR"><div class="boxTop-left"></div><div class="boxTop-mid"></div><div class="boxTop-right"></div></div>
<div class="boxMidR">
<div id="tagbox">
<h3 class="stitle">태그목록</h3>
<!-- <ul>
<s_random_tags>
<li><a href="[##_tag_link_##]" class="[##_tag_class_##]"> [##_tag_name_##]</a></li>
</s_random_tags>
</ul> -->
<!-- Tag Cloud Start -->
<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">
//<![CDATA[
var flashvars = {};
flashvars.tcolor = "0x2970A6";
flashvars.hicolor = "0x462A56";
flashvars.mode = "tags";
flashvars.distr = "true";
flashvars.tspeed = "100";
flashvars.tagcloud = document.getElementById('htags').innerHTML.E4Cumulus();
var params = {};
params.allowScriptAccess = "always";
var attributes = {};
attributes.bgcolor = "#f7f7f7"
swfobject.embedSWF("./images/tagcloud.swf", "TiCumulus", "100%", "200", "9.0.0", null, flashvars, params, attributes);
//]]>
</script>
<!-- Tag Cloud End --> </div>
</div>
<div class="boxBtmR"><div class="boxBtm-left"></div><div class="boxBtm-mid"></div><div class="boxBtm-right"></div></div>
</s_sidebar_element>
@doodrim - 2009/08/14 12:11
답글삭제<ul>-</ul>을 안 지우고 주석으로 묶었군요.
@BLUEnLIVE - 2009/08/14 19:17
답글삭제주석으로 묶으면 안되는거였군요.. 감사합니다 (_ _);
감사합니다. 잘되네요.
답글삭제폰트가 조금 아쉬운 것 말고는 좋네요...ㅎㅎ;
햐.. 힘들었습니다 ㅜ_ㅜ 텍스트큐브닷컴에 적용할려고 별별 삽질끝에 완성했습니다.
답글삭제정말 맘에 드는군요! 감사합니다!
@우주곰 - 2009/09/02 13:57
답글삭제아직 텍큐닷컴은 기능들이 안정화되지 않아 손이 많이 가는 것 같습니다.
W3C에서도 js는 가급적 <head> 안에 두는 것을 원칙으로 하는데... 쩝쩝쩝.
수고 많으셨습니다.
아,, 이거 한글만 지원되는건가요??
답글삭제@센쇼 - 2009/09/06 11:57
답글삭제한글+영어 외엔 지원되지 않습니다.
비비코드에 이어 잘 쓰겠습니다. 덥썩![emo=082]
답글삭제처음 블로그 꾸며보고 있다가 많은 도움 받고 갑니다.
답글삭제너무 감사하고 잘 쓰겠습니다.
@엘카 - 2009/09/23 09:10
답글삭제잘 쓰시기 바랍니다.
@天上不非 - 2009/09/23 20:14
답글삭제가보니 글이 하나도 없는데, 태그는 많네요.
아마도 작성중인 글에 달린 태그인 듯...
좋은 블로그 꾸미시기 바랍니다. ^^;
태그클라우드 감사히 쓰고 있습니다.
답글삭제그런데 태그숫자는 어떻게 줄이나요?
태그가 많아서 어지러워 보이네요... :x
@엘카 - 2009/09/26 07:41
답글삭제티스토리 설정에서 조절할 수 있습니다.
태그 구름을 찾았었는데..필넷님의 안내로 방문하게되었습니다.
답글삭제너무 고맙습니다. 이쁜 태그구름 사용..넘 좋아요
태그구름 넘 이쁘네여
답글삭제잘 사용하겠습니다.
이거 배경색 수정은 정녕 안되는 건가요??
답글삭제명려어가 안먹히면
기폰 플래시 파일의 배경색을 바꿔서 업로드 시키면 될것 같은데
FLV 파일이 없으니 수정도 안되고;;;
쓸수가 없네요..
@Good_Speed - 2009/10/10 17:58
답글삭제IE에서는 배경색이 먹지 않더군요. IE의 버그는 MS로...
이번에도 좋은거 얻어갑니다.
답글삭제그런데 전 배경색 수정이 되는데요?
블로그 전체 폰트가 맑은 고딕이라
폰트에 약간의 아쉬움이 있긴 함..;;
@starfield - 2009/10/21 19:45
답글삭제배경색 동작되도록 수정했다고 적어놨는데요.
바꾸고 나서 안되네요. 초보라서 그런지...
답글삭제제 것도 봐주세요.
<s_sidebar_element>
<!--태그 구름 -->
<div id="tagbox" class="module">
<h4 style="padding-bottom:3px;">태그 구름</h4>
<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">
//<![CDATA[
var flashvars = {
tcolor: "0x2970A6",
hicolor: "0x462A56",
mode: "tags",
distr: "true",
tspeed: "100",
tagcloud: document.getElementById('htags').innerHTML.E4Cumulus()
};
var params = {
allowScriptAccess: "always",
wmode: "opaque",
bgcolor: "#f7f7f7"
};
swfobject.embedSWF("./images/tagcloud.swf", "TiCumulus", "100%", "200", "9.0.0", null, flashvars, params);
//]]>
</script>
</div>
</s_sidebar_element>
그리고 카테고리를 님 처럼 바꾸는 방법하고 카테고리를 클릭했을 때 카테고리 글 모두 나오게 하는 방법도 좀 가르쳐 주세요.
너무 많을 것을 물어보아서 죄송합니다.
@BLUEnLIVE - 2009/10/21 21:23
답글삭제아.. 전 위에분이 안 된다고 하시길래..;;
@히데오 - 2009/10/22 10:42
답글삭제뭐가 어떻게 안 되는지 아무런 설명 없이 툭 던지면 도와드릴 수 없습니다.
@BLUEnLIVE - 2009/10/22 19:16
답글삭제제가 너무 예의 없게 물어 봤습니다.
우선 태그구름이 에러 날 땐
Tistory Cumulus Flash tag cloud by BLUEnLIVE requires Flash Player 9 or better. 이라고 나오다가 새로 고침하면 정상적으로 돌아갑니다.
@히데오 - 2009/10/22 10:42
답글삭제캐쉬때문에 가끔 그럴 때가 있습니다.
정상적으로 설치되었습니다.
임시 인터넷 파일을 몽땅 지워버리면 그런 문제가 발생하지 않을 겁니다.
@BLUEnLIVE - 2009/10/22 23:06
답글삭제캐쉬를 지우니 잘 됩니다. 감사합니다.
1.20 버젼도 잘 쓰고 있었습니다만, 이렇게 또 업뎃해 주시다니~ 감솨감솨 !!
답글삭제아 참... 원래 cumulus에서는 태그 빈도에 따라 폰트색이 다른 것 같던데 (일반적인 태그클라우드처럼요) 1.20버젼에서는 태그가 쌓여도 색이나 볼드체 설정등이 안되는 것 같더라구요. 혹시 1.21a버젼도 그러려나요? 폰트색이 다르면 훨씬 좋을텐데... 방법이 없을지.
답글삭제http://www.kamiu.pe.kr/293 여기 블로그에 보면 본문에 넣는 스크립트 코드의 구조가 위에서 말씀주신 것과 다르네요. 그리고, tcolor2 라고 해서 덜 중요한 태그의 색을 지정하는 변수를 추가했고... 혹시나 해서 위에서 말씀주신 코드구조에다가 var flashvars ={ } 안에 tcolor2: "0x000000", 를 추가해 보았습니다만 덜 중요한 코드가 검은색으로 나오지는 않네요. 참고로 적은 블로그의 코드구조로 완전히 바꿔보지는 않았습니다.
답글삭제살펴보시고, 조언 부탁드립니다~~
@고영혁 - 2009/11/30 15:41
답글삭제예전에 약간 버그가 있는 구성을 공개했다가 최근에 수정했습니다.
아마 수정되기 전의 코드를 올린 것이 아닐까 합니다.
그리고, Cumulus의 기능이 100% 구현될 수 없는 원초적 한계가 있습니다. 헐~
@고영혁 - 2009/11/30 15:08
답글삭제나름 그 부분이 구현되어 있기는 합니다만, 티스토리에서 태그 구름을 만들어줄 때부터 다양한 스타일이 다 나오지는 않는 것 같습니다.
티스토리의 원초적 한계가 아닐까합니다. ^^;
trackback from: 홈페이지 꾸미기 완료 - RSS구독, 공유도구, 트위터연동, 이동메뉴
답글삭제지난 주말동안 짬을 내서 홈페이지를 대대적으로 개편했다. 2009.08.06 에 티스토리 블로그로 홈페이지를 오픈한 이후 실질적으로는 두 번째 개편인셈이다. 첫번째 개편에서는 기본적인 의사소통 및 브랜딩 도구를 설치했고, 한참 SNS를 따라잡던 터라 SNS 와의 기본 연결고리를 만들었었다. - 링크나우 프로필 버튼 : 사이드바 설정의 이미지배너 출력 사용 - 믹시, 다음 뷰 등의 메타블로그 위젯 : 각 메타블로그 사이트가 제공하는 위젯 사용 - 멋진..
티스토리가 변경되었는지
답글삭제치환자가 이상하게 작동하네요
<a href="[#\#_tag_link_#\#]" class="[#\#_tag_class_#\#]"> [#\#_tag_name_#\#]</a>
를
<a href="[##_tag_link_##]" class="[##_tag_class_##]"> [##_tag_name_##]</a>
로 해주어야 정상작동하네요 ㅠ.ㅠ
좋은 정보 잘 보고 갑니다^^
답글삭제혹시 배경의 투명화는 안되나요?
답글삭제t.addVariable("trans", "true");
될거라 생각했는데 동작이 안되는군요
답변 부탁드려요