태그를 꽤나 멋지게 만들기

원본은 티스토리에서 적용하는 Ti-Cumulus이며 이 포스팅은 BLUEnLIVE님의 http://zoc.kr/543 포스팅에 기초합니다.

 

 지난번에 쓸데없이 낚기만 했던 포스팅에서 예고한대로 텍큐 닷컴에서 Cumulus쓰는 법을 함 포스팅 해봅니다~

 

이짓을 할려면 조금 준비물이 필요합니다.

1. 텍큐닷컴 블로그 (텍큐닷컴 블로그를 꾸미려면 우선 텍큐닷컴 블로그가 필요하다)
2. 테터계열 블로그 스킨을 한번 만져봤거나 혹은 그에 상응하는 지식과 경험
3. http://zoc.kr/543에서 받을수 있는 Ti-Cumulus파일
4. 본인이 직접운영하는 서버 혹은 호스팅 계정
5. 오랜시간 삽질을 해도 괜찮을 정도의 시간
6. 길을 가면서 문자질을 해도 전봇대에 부딪히지 않을 정도의 운

넵. 이상의 준비물이 모두 준비 되었다면 시작 해보죠.

 

우선 3번 준비물인  Ti-Cumulus파일을 압축해제하면 두개의 파일이 나옵니다.

tagcloud.swf , swfobject.js 가 나오는데 이 두개를 호스팅 계정 혹은 서버에 올려둡니다.

swfobject.js의 경우에는 확장자를 jpeg로 바꿔서 텍큐에 올릴수도 있습니다만...용량이 넉넉한 서버 or 호스팅 계정이라면 그냥 한꺼번에 넣어두는게 관리하기나 여러가지 측면에서 편할겁니다.

 

여기까지 하셨으면 다음으로 텍큐닷컴에 자신의 블로그에 들어가서 스킨 편집을 시작합니다.

 

ctrl+f를 눌러서 우선 '검색 위젯'을 찾습니다.

(생략)

              <s_sidebar_element>
              <!-- 검색 위젯 -->
                <div class="part search">

 

(하략)

대략 위처럼 되어있을건데 이 <s_sidebar_element> 바로 위에 다음 코드를 수정해서 붙여 넣습니다

 <s_sidebar_element>

<!-- 태그 위젯 -->
              <div class="tags module">
                <h3>태그</h3>
                <div class="box">
                  <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="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("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>
              </div>
            </s_sidebar_element>

서버 주소라고 되 있는 부분은 필히 바꾸셔야 됨.

 

이 작업이 끝났다면 꾸미기 -> 위젯으로 이동.

참고적으로 이 위젯은 스킨 편집중에 코드를 만졌다면 코드를 만진 위젯은 죄다 초기화 됩니다. 죄다 재 설정해줘야 된다는....

 

'태그위젯'이라고 되 있는것을 적당한 위치로 옮깁니다.(새로 생겼을겁니다. 제대로 따라오셨다면)

 

자, 이제 확인.

 

잘 됬으면 다음처럼 나옵니다.

우려먹기....

자 모두 태그위젯을 달아 보아요.