TIP::내 블로그에 태그 구름 넣기.

오늘은 가볍게 팁하나 올려드릴께요.

태그 구름을 블로그에 넣기.

(텍스트큐브닷컴, 티스토리 기준입니다.- 태더 툴즈, 텍스트큐브 기반 블로그)

[이놈이 태그구름 입니다. 이쁘장하네요.]

우선 개발자님 사이트 링크. :)

http://www.roytanck.com/

이 태그 구름 위젯은 WP-cumuls 라는 정식 명칭을 갖고 있지만,

생긴게 구름마냥 떠다니는 플래쉬 태그 위젯이기에, 태그 구름이라고 부르는것 같네요.

// 아. tag cloud 라는 위젯이 존재했네요. 수정

1. 위젯 파일 다운로드

Download from Original Site : 소스상 수정을 할 필요가 있을법도 싶습니다.

국내향 태그 구름 :  BLUEnLIVE  님의 원소스입니다.

tag_cloud.rar

2. 파일 설치하기

압축을 푸시면 swfobject.js, tagcloud.swf 라는 두개의 파일이 존재합니다.

이 파일들을 본인이 갖고 계신 온라인계정.

(파일이 올라가기만 하면 됩니다. 텍스트큐브는 막아놓은 듯 싶네요.)

<s_sidebar_element>
<!-- 태그목록 모듈 -->
  <div class="tagbox">
  <h3>태그 구름</h3>
  <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("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(/&amp;/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>

html 태그는 다음과 같습니다.

블로그 드래그를 막아놓은 관계로 html 태그가 들어있는 텍스트파일을 첨부합니다.

tag_cloud.txt

위 파일을 open 후, 복사 하신 후에,  [내 블로그 관리하기] 로 가셔서 [꾸미기]->[스킨편집]을 가주세요.

복사한 소스를 붙여넣을 곳은 skim.html 안쪽입니다.

skin.html 에서

==============================================================================

<s_sidebar_element> <!-- 검색 위젯 --> <div class="search widget"> <s_search> <input type="text" name="[##_search_name_##]" value="[##_search_text_##]" class="inputText"/><button type="submit" class="btnSearch" onclick="[##_search_onclick_submit_##]" ><span>검색</span></button> </s_search> </div> </s_sidebar_element>

==============================================================================

위의 소스 부분을 찾으세요. Ctrl + F 하셔서 "검색 위젯" 이라고 찾으시면 쉽게 찾으실 수 있습니다.

찾으면 검색위젯 글씨 위의 <s_sidebar_element> 윗부분에 아까 복사하신 태그를 붙여넣으세요.

이렇게 되겠죠?

복사한 부분

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

....

이제 복사한 부분에서 수정을 하셔야 합니다.

• 자기계정 : 자신이 파일을 올린 계정입니다. ( ex) http://semone.net/agcloud.swf 이런식으로요.)
  
• t.addVariable("tcolor", "0x222222");
  : 구름안의 글자색입니다. 0x222222 를 다른 웹컬러로 변경하세요.
• t.addVariable("hicolor", "0xFF3333");
  : 구름안의 태그에 마우스를 가져갔을때 highlight 색입니다. 0xFF3333 을 다른 웹컬러로 변경하세요.
  
• t.addVariable("tcolor2", "0xF0E68C");
  : 구름안의 태그중에서 인기태그의 색상입니다. 0xF0E68C 를 다른 웹컬러로 변경하세요.

웹컬러 보기

위의 링크를 누르시면 웹컬러표가 등장합니다 :)

원하시는 색상의 코드( #다음에 붙는 6글자)를 0x 다음에 적어주세요.

그리고 적용하기 버튼을 눌러주세요.

그 다음, [꾸미기] -> [위젯] 을 가주세요.

가시면, 위젯 목록에 "태그 위젯" 이라고 보일겁니다. (혹은 태그 구름 위젯) 이라고 보입니다.

이것을 사이드바의 원하시는 위치에 지정해 주시면 끝.

p.s) 이 태그위젯은 html을 수정시 (skin.html 의 스킨 수정시) 마다 사이드바 적용이 풀려버립니다.

html 수정시마다 위젯 적용을 해주셔야 해요.

자~ 이제 블로그에 멋진 태그 구름이 등장합니다.

즐거운 블로깅하세요 :)

p.s2) 혹시 질문이 있으시면 comment 남겨주시면 답변해드릴께요 ~