블로그 내 3D 태그 구름 다는 방법! (티스토리 블로그 기준)

오늘!

3년 가까이 사용했던 스킨을 버리고 새롭게 깔끔한 스킨으로 변경하였습니다!

아주 큰 작업이었지만 요령(?)있게 간단하게 변경하였습니다.

다시한번 나몸냥님께 감사의 말씀을 전합니다... (__)

오늘 블로그 스킨을 변경하고 구글 애드센스 광고를 다시 게재하고, 이리저리 작은 것들 수정하고,,,

최종적으로 태크 항목에 대하여 3D 입체 효과를 주기 위해 작은 작업을 감행하였습니다.

요즘 대세가 3D 태크 구름이라는 것쯤은 알고 계시겠죠?^^

현재의 포스팅은 나몸냥님의 글을 인용하였으며, 원문은 현재 링크를 통해 확인해 보시기 바랍니다.

블로그의 스킨 및 여러 효과들에 대한 방법과 상세 설명이 첨가된... 블로거들에게 많이 유용한 블로그입니다~^^

 3D태그.zip

 

.

첨부파일을 다운로드하시면 swfobject.js 파일과 tagcloud.swf 2개의 파일로 압축되어 있으며, 압축 해제 후 티스토리 스킨 수정 화면에서 파일 업로드를 실행합니다.

보통 기본적으로 ./image/ 폴더 내로 파일이 업로드되니 아래에 첨부되는 소스파일을 그냥 사용하시면 되겠습니다.

<!-- 3D 태그 -->
  <s_sidebar_element>
  <div class="tagbox">
  <h3>Tag cloud</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="./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("hicolor", "0x3C5A91");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>
<!-- 3D 태그 끝 -->

코드.txt

 

 

위 소스코드를 아래 그림과 같이 s_sidebar_element 목록 사이에 삽입해 주시면 되겠습니다.

마지막으로 기존 TAG용 사이드바 모듈은 과감히 삭제해 줍니다.

Q를 눌러 메인 홈으로 이동하여 사이드바에서 움직이고 있는 3D 태그 구름을 만나시게 될것입니다.

여기서 한가지 더!

화면설정 메뉴에서 사이드바에 출력되는 태그의 개수를 조정하게 되면, 3D 태그 구름에서도 동일하게 태그의 개수를 출력해 주게됩니다.

30개로 하는게 조금은 있어보이고(?) 이쁘게 출력되는 듯 합니다.

소스코드 내의 100% 부분은 사이드바에서 나타낼 수 있는 최대를 보여주는 것이며, 50%로 조절하게 되면 조금 작게 표시된다는 점 참고하시기 바랍니다.

-----

방문 감사합니다 (__)