태그구름 위젯 추가하였습니다.태그구름 위젯 추가하였습니다.
Posted at 2009. 8. 7. 14:41 | Posted in Blog태그에 구름처름 빙글도는 것이 있어서 알아보니 출처가 여기 더군요.
"태그 구름"으로 검색해보면 이미적용하신분이 많이 있으십니다.
참조한 블로그는 링크 이곳
이제부터 제 블로그에다가 적용해 보겠습니다.
우선아래2개의 파일을 다운받아서 압축을 푸신후 자신의계정으로 업로드 합니다.
invalid-file
#현재 텍스트 큐브에서는 .js , swf 는 업로드가 되지 않습니다.
그래서 다른 방법으로 진행합니다.
비밀글 하나 만들어서 파일을 올려주세요.
이제부터 파일이 저장된 주소를 확인하도록 하겠습니다.
아래 그림과 같이 공백(tagcloud.swf)과 swfobject.js파일이 보입니다.
swfobject.js 의 경우는 마우스 우클릭으로 쉽게 주소 확인이 됩니다.
메모장을 열러 주소를 붙여넣기를 합니다.
그러나 tagcloud.swf 경우에는 페이지 소스보기를 하여야 합니다.
아래 그림을 따라하세요.
스샷은 크롬의 경우고요 ie의 경우는 소스보기입니다
-마우스 우클릭으로 소스보기를 클릭합니다.
Ctrl +F(찾기)를 눌러 "swf"를 입력합니다.
그러면 아래 그림과 같이 검색이 되는데 주소를 복사 합니다.
다시 메모장에 주소를 복사하여 둡니다.
이제는 텍스트큐브 스킨편집을 하시면 됩니다
skim.html을 수정화면으로 가세요
위젯List를 찾아서 아래 문구추가 하여주면 되는데
검색(Ctrl + F)으로 "/s_sidebar_element" 찾아서 아래에 아래쪽문구(노란색)를 복사하여 넣어주면 됩니다
#적색부분은 메모장으로 작업한 절대주소로 바꿔주세요.
-<!-- 태그목록 모듈 --> 은 위젯추가리스트에 표시되는 재목
-<h3>태그 구름</h3> 은 사이드바에 표시되는 재목입니다. 원하시는것으로 변경하세요.
<s_sidebar_element>
<!-- 태그목록 모듈 -->
<div class="tagbox">
<h3>태그 구름</h3>
<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="http://주소/swfobject.js"></script>
<script type="text/javascript">
var t = new SWFObject("http://주소/tagcloud.swf", "tagcloud", "100%", "200", "7", "#FFFFFF");
t.addVariable("tcolor", "0x222222");
t.addVariable("hicolor", "0xFF3333");
t.addVariable("tcolor2", "0xF0E68C");
t.addVariable("mode", "tags");
t.addVariable("distr", "true");
t.addVariable("tspeed", "100");
t.addParam("allowScriptAccess", "always");
t.addVariable("tagcloud", document.getElementById('htags').innerHTML.replace(/&/gi, ' ').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>
#사이드바에 위젯으로 추가되어야 하니 시작은 <s_sidebar_element> 뒤쪽에는 </s_sidebar_element>로 마무리가 되어야 합니다
위아래 폭조정은 적색을 수정해주면 됩니다.
<script type="text/javascript">
var t = new SWFObject("http://주소/tagcloud.swf", "tagcloud", "100%", "200", "7", "#FFFFFF");
태그 바탕색은 적색을 변경해주면 됩니다.(아래 웹컬러 참조)
("http://주소/tagcloud.swf", "tagcloud", "100%", "160", "7", "#ffffff");
태그가 빙글 돌아가는 속도를 조정할려면 적색을 수정하면 됩니다.(필자는 120으로 설정하였습니다)
t.addVariable("tspeed", "100");
더 세부적인 설정은 원문설정표 참조하세요
http://www.roytanck.com/2009/03/11/how-to-use-wp-cumulus-shortcodes/#more-1346
Attribute Used for Possible values Example width Width of the tag cloud Number of pixels (positive integer) width=”300″ height Height of the tag cloud Number of pixels (positive integer) height=”240″ tcolor Tag color HEX color value without the ‘#’ prefix tcolor=”ffcc00″ tcolor2 Tag color for less important tags HEX color value without the ‘#’ prefix tcolor2=”cc9900″ hicolor Tag highlight color HEX color value without the ‘#’ prefix hicolor=”ffffff” bgcolor Tag cloud background color HEX color value without the ‘#’ prefix bgcolor=”333333″ speed Rotation speed Precentage, higher means faster speed=”150″ trans Background transparency “true” or “false” trans=”true” distr Even tag distributions along sphere “true” or “false” distr=”true” args Argments to be passed to the ‘wp_tag_cloud’ function (experimental, use at own risk) URL encoded string args=”smallest=10″ mode Tag/Category mode “tags”, “cats” or “both” mode=”tags”
이제 위젯 설정에 가서 사이드바로 올려주시면 됩니다.
이제 완성입니다.
태그 구름
포스트가 별로 없어서 허전하긴 하지만 그래도 기분은 좋습니다. ^^
'Blog' 카테고리의 다른 글
| BBCode 작업중..(보류중) (0) | 2009.08.13 |
|---|---|
| 타이틀을 물결무늬 적용해보자 (0) | 2009.08.10 |
| 웹컬러의 이해 (0) | 2009.07.23 |
| Microsoft weft를 이용한 웹폰트 만들기 (1) | 2009.07.17 |
| 베이스 캠프 스킨확장하는 방법 (2) | 2009.06.19 |
원곡을 찾아 보다.
