2009. 4. 28. 14:47
유틸보고 따라쓰기
테그 클라우드[Cumulus for TiStory]숨비 작성
|
사이드바에 테그 목록은 넣고 싶은데 왠지 좀 밋밋하고 맘에 들지 않으셨다는 분이 있으셨다면 이번 포스팅이 도움이 되리라 생각합니다.
저 또한 티스토리를 하고 스킨을 꾸미면서 좀 깔끔한 테그 클라우드는 없나 하고 이리저리 기웃거리다가 BLUE'nLIVE's diary님의 블로그에서 Wp-Cumulus 를 티스토리 환경에 맞게 수정한 티스토리용 Cumulus를 우연히 발견하게되어 사용해본 결과 참 맘에 들어서 이렇게 소개해 드립니다. 블로그의 비쥬얼에 신경 쓰시는 분이라면 한번 적용시켜 보시는것도 좋으리라 생각합니다.
현재 제 블로그에 적용된 모습입니다.
뭐 옆 사이드바를 보시는게 더 정확하겠네요~~
BLUE'nLIVE's diary님이 공개하신것에 제 블로그에 맞게 색상을 좀 바꾸고 하이라이팅등 몇개를 추가한 모습입니다.
자 그럼 설치 방법 설명 들어갑니다!
1.우선 아래 파일을 다운받아 압축을 풉니다. 그러면 swfobject.js와 tagcloud.swf 두 개의 파일이 나오는데요.
이 두대의 파일을 관리모드>스킨>HTML/CSS편집>파일업로드에서 직접 업로드 시켜줍니다.
이 두대의 파일을 관리모드>스킨>HTML/CSS편집>파일업로드에서 직접 업로드 시켜줍니다.
TiCumulus.zip2.여기까지 하셨으면 다시 관리모드>스킨>HTML/CSS편집>skin.html에서 아래의 부분을 찾습니다.
ctrl+f 키로 쉽게 찾을수 있으실텐데요. 여기에서 색상이 들어간 부분 <ul>~</ul> 까지 수정해 주시면 됩니다.
수정하시는 방법은 아래와 같이 노란색 글씨 부분을 <ul>~</ul> 부분에 대신 삽입하시면 됩니다. 간단하죠?^^;;
3.위의 테그는 BLUE'nLIVE's diary님이 공개하신 그대로입니다.
제 블로그에 있는것은 미리 말을 했듯이 색상등 몇가지를 수정/추가한 모습이 되겠습니다.
그럼 상세 인자를 몇가지 아는 한도내에 적어 볼게요.
이상이 기본 포멧이었구요. 현재 저는 여기에 몇가지를 추가하고 사용하고 있는데요.
괜찮다 싶으신분은 사용하세요.
이 테그는 기본 포멧에 추가 시켜서 사용하시면 됩니다.
<s_sidebar_element>
<!-- 「태그 클라우드」 -->
<div id="tagbox" class="module">
<p class="modTitle" title="랜덤 태그 목록">TAG CLOUD</p>
<ul>
<s_random_tags>
<li> <a href="" class=""></a></li>
</s_random_tags>
</ul>
</div>
</s_sidebar_element>
<!-- 「태그 클라우드」 -->
<div id="tagbox" class="module">
<p class="modTitle" title="랜덤 태그 목록">TAG CLOUD</p>
<ul>
<s_random_tags>
<li> <a href="" class=""></a></li>
</s_random_tags>
</ul>
</div>
</s_sidebar_element>
ctrl+f 키로 쉽게 찾을수 있으실텐데요. 여기에서 색상이 들어간 부분 <ul>~</ul> 까지 수정해 주시면 됩니다.
수정하시는 방법은 아래와 같이 노란색 글씨 부분을 <ul>~</ul> 부분에 대신 삽입하시면 됩니다. 간단하죠?^^;;
<s_sidebar_element>
<!-- 「태그 클라우드」 -->
<div id="tagbox" class="module">
<p class="modTitle" title="랜덤 태그 목록">TAG CLOUD</p>
<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%", "200", "7", "#ffffff");
t.addVariable("tcolor", "0x222222");
t.addVariable("mode", "tags");
t.addVariable("distr", "true");
t.addVariable("tspeed", "100");
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>
</div>
</s_sidebar_element>
<!-- 「태그 클라우드」 -->
<div id="tagbox" class="module">
<p class="modTitle" title="랜덤 태그 목록">TAG CLOUD</p>
<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%", "200", "7", "#ffffff");
t.addVariable("tcolor", "0x222222");
t.addVariable("mode", "tags");
t.addVariable("distr", "true");
t.addVariable("tspeed", "100");
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>
</div>
</s_sidebar_element>
3.위의 테그는 BLUE'nLIVE's diary님이 공개하신 그대로입니다.
제 블로그에 있는것은 미리 말을 했듯이 색상등 몇가지를 수정/추가한 모습이 되겠습니다.
그럼 상세 인자를 몇가지 아는 한도내에 적어 볼게요.
var t = new SWFObject("./images/tagcloud.swf", "tagcloud", "100%", "200", "7", "#ffffff");
→ 여기에서 #ffffff 는 테그클라우드 바탕 색상입니다. #ffffff 면 현재 흰색이겠네요.
그리고 "100%" "200" 은 각각 가로 세로 크기입니다.
t.addVariable("tcolor", "0x222222");
→ 테그 클라우드내 테그 글씨의 색상입니다.
t.addVariable("tspeed", "100");
→ 이건 테그 회전 속도 입니다. 현재 100인데 저는 150 정도로 해놓고 사용하고 있습니다.
→ 여기에서 #ffffff 는 테그클라우드 바탕 색상입니다. #ffffff 면 현재 흰색이겠네요.
그리고 "100%" "200" 은 각각 가로 세로 크기입니다.
t.addVariable("tcolor", "0x222222");
→ 테그 클라우드내 테그 글씨의 색상입니다.
t.addVariable("tspeed", "100");
→ 이건 테그 회전 속도 입니다. 현재 100인데 저는 150 정도로 해놓고 사용하고 있습니다.
이상이 기본 포멧이었구요. 현재 저는 여기에 몇가지를 추가하고 사용하고 있는데요.
괜찮다 싶으신분은 사용하세요.
t.addVariable("tcolor2", "0xffd700");
→ 인기 테그의 색상입니다. 테그들중 인기 테그의 색상을 다르게 바꿔줍니다.
t.addVariable("hicolor", "0x00ffff");
→ 테그에 마우스를 올렸을때 색상입니다.
기본 포멧은 이 색상이 검은색으로 되어있어 제 배경과 색이 겹치기에 저는 색상을 바꾸어 사용하고 있습니다.
→ 인기 테그의 색상입니다. 테그들중 인기 테그의 색상을 다르게 바꿔줍니다.
t.addVariable("hicolor", "0x00ffff");
→ 테그에 마우스를 올렸을때 색상입니다.
기본 포멧은 이 색상이 검은색으로 되어있어 제 배경과 색이 겹치기에 저는 색상을 바꾸어 사용하고 있습니다.
이 테그는 기본 포멧에 추가 시켜서 사용하시면 됩니다.
이렇게 하시고 마지막으로 '저장'하시면 설정이 모두 끝이 납니다. 참 쉽죠잉~~~^^;;
제 글에서 부족한 부분이 있으신 분들은 BLUE'nLIVE's diary님의 블로그를 참조하시고
상세 인자를 확인하시고 싶으시면 이 사이트를 참조하기 바랍니다.
