태그목록 움직이는 구름태그 블로그스킨에 넣어 만들기

오늘은 태그목록을 구름 같이 움직이는 모습으로 블로그 스킨에 넣어
사이드바에 적용하여 보았습니다. 적용이 되어
보여지는 모습을 안캠코더로 화면을
캡쳐하여 올려봅니다.

태그목록이 단순하게 보여지는 것보다 움직이면서 구름처럼 떠도는
모습을 보면 한번쯤 태그에 단어를 클릭하여 태그로 연결된
자기 블로그 글로 연결하여 볼 것 같습니다.

태그목록에서 움직이는 태그를 만들려고 하면  skin.html 과  style.css에서
파일을 적용하여 구름태그를 블로그스킨에 넣어 만들는 방법입니다.

태그목로에서 배경색은 아래 표시란 곳에 색상코드를 바꾸면 됩니다.
    
동영상으로 움직이는 태그 모습을 안캠코더로 화면을
캡쳐하여 올려봅니다.

구체적으로 태그목록 꾸미기에서 움직이는 구름태그를 블로그스킨에
넣는 방법은 아래와 같습니다.

아래 압축중 2개 파일은 style.css에서 파일 업로드로 파일을 추가 합니다.

파일업로드 방법 보러가기  
HTML/CSS에서 블로그타이틀 이미지 설명 넣기

움직이는 태그.zip

압축중 2개 파일은 style.css에서 파일 업로드로 파일을 추가
tagcloud
swfobject

아래 택스트 파일은 skin.html 에 넣습니다. 넣는 곳은 ctrl + F를 눌러
스킨에서 찾는 단어를 넣으면 노랑색으로 표시된 곳입니다.
이곳에 아래 택스트 내용을 붙여 넣으면 됩니다.
반드시 미리보기로 확인합니다.
script.txt
skin.html 에 넣습니다. 넣는 곳은 ctrl + F를 누르면 찾기가 나옵니다.

</s_sidebar_element>
       
       <s_sidebar_element>
       <!-- 태그목록 모듈 -->
        <div id="tagbox">
         <h3>태그목록</h3>
         <ul>

ctrl + F를 눌러 스킨에서 찾는 단어를 넣으면 노랑색으로 표시된 곳입니다.
이곳에 아래 택스트 내용을 붙여 넣으면 됩니다.

script.txt

택스트 내용을 붙여 넣으면 됩니다. 색상코드로 배경색도 바꿔봅니다.<-- 색상코드 바꾸는 곳

<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 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>

오늘은 일반적으로 알려져 있는  태그목록을 움직이는 구름태그로
 블로그스킨에 넣어 만들어 보는 것은 블로그에 만들어
넣어 보면서 최대한 쉽게 설명하려고 노력
하였으나 부족한지 모르겠습니다. 

기초적인 스킨 다루는 방법을 설명 하다보니 조금 숙달이 되어가는 
것 같습니다. 너무 쉽지만 모르면 다음 단계로 가기가
쉽지 않은 기초단계를 알아보았습니다.
  

더 자세하게 알고 싶으시면 제가 태그 목록 배워 온 곳 바로가기(압축파일 가져온 곳)
로 연결합니다. http://jhpooh.tistory.com/57
블로그는 이러한 장점이 있는 것 같습니다. 트위터나 페이스북에 경쟁력이
있으려면 좀더 블로그가 창의적인 스킨이 많아져야 1인 미디어
시대에 좋은 콘텐츠와 더불어 빼놓은 수 없는 블로그 
활성화 방안입니다. 

태그의 중요성 보러가기
블로그 태그를 다는 이유는?

색상코드 가져오기
트윗 위젯만들고 색상코드 쉽게 얻을 수 있는 곳