반응형
[컴] 태그구름 이젠 나도 날개를 달아보자



처음 티스토리 블로그를 하면서 참 어렵다고 느낀부분은 바로 스킨 설정부분이다. 다른 블로그와 달리 엄청난 자유도에 놀라기 이전에 황당한 버튼과 환경설정에 일단 멍때리게 된다.

멍멍멍~ 무슨 뉘집 강아지도 아니고 힘겹게 접선받은 초대장을 손에 움켜쥐고선 한동안 눈물만 그렁그렁 .... 내가 왜 예전 블로그 버리고 여길 왔나 싶은 생각에 좌절 스럽기도 하겠지만 일단 어느정도 여기 저기 손대다 보면 어느세 중독성 강하게 스킨 꾸미기에 집착하게 된다.

솔직한말로 C언어 자바스크립 하다못해 html태그 놀이라도 안해본 사람이라면 이런 설명봐도 정말 고생고생 하면서 이해도 하기힘든 말에 쩔쩔메기 일쑤라고 생각한다. 나도 그런 언어를  그나마 건성으로 배운적이 있어서 아 이건 뭐구나 저건 뭐구나 하는 정도 알아보고 짜집기라도 하는데 이런걸 생전 처음 만난분들 특히 나이좀 있는 분이라면 생업에 종사하면서 이런거 할려면 정말 눈물이 쏟아지기 일쑤다.

나역시 전문가가 아니기에 많이 여기저기 뒤지면서 자료 찾고 관련 명령어 찾아서 공부하면서 겨우 하고 있지만 그나마 조금은 아는 것도 있으니 이렇게 글을 적어본다. 좀더 많은 사람과 정보를 공유하는게 블로거니까.

음... 태그구름이라고도 불리고 태그클라우드라고 하는 요놈 참 보고 있어도 귀여운 놈이라 많이들 가지고 싶어 하지만 설명 몇번 보다 이내 포기 하지만 그러지 말길 바란다. 몇일이 걸리더라도 하나 하나씩 해보면서 도전해보시길!

어짜피 블로그는 오랜기간 쓸테니 그동안 천천히 하나하나씩 보수하면서 꾸며나가자고 생각하는 게 옳을것 같다.

나역시 이와 관련된 글을 적게는 20개 이상 찾아서 읽어 봤는데 무성의 하게 적은 사람도 있고 정말 하나한 꼼꼼히 적은 사람도 있었는데 그중 가장 설명이 잘되어있는데다가 특별한 몇가지 옵션까지 알려주는 글이 있어서 자료로 활용하고자한다.


근데 이거 본론들어가기전에 너무 길어졌내요 ㅠㅠ
죄송요~ 제가 원체 글을 길게 적다보니 ㅎㅎㅎㅎ

아래글을 보시죠



일반적으로 태그란 자신의 블로그에 있는 자료를 묶어서 방문객에게 좀더 편하게 자신의 글을 보여주기 위해 존재하는 기능이지만 노출빈도가 높은 관계로 미관상으로도 매우 중요한 부분이다. 


이러한 태그목록의 장점을 그대로 유지하면서 좀더 디자인적으로 꾸미기 위해서 개발된 WP-Cumulus라는 플러그인이 있습니다. 워드 프레스용 플로그인 인데요.  이를 BLUE'nLIVE 님께서 티스토리용으로 수정을해서 공개하셨습니다.


이름하여 Ti-Cumulus. 바로 위에 모습처럼 태그 목록을 구의 형태로 모아서 표시를 해주는 플러그인입니다.
현제 제 블로그에도 설치를 해놓았는데요. 단순히 이렇게 보여주기만 하는것이 아니라 마우스를 각 방향 끝쪽으로 위치시키면 태그 목록이 회전을 하기 때문에 좀더 세련되 보입니다.

설치방법은 어렵지 않습니다.

1. 파일 설치

먼저 아래의 압축파일을 다운을 받습니다.
압축을 풀면 tagcloud.swf 와 swfobject.js 라는 파일이 나옵니다.
이것을 티스토리 스킨편집에서 직접올리기 기능을 이용해서 올리도록 합니다.

클릭을 하시면 다운받으실수 있습니다.

2. 스킨 설정



스킨편집의 HTML/CSS 편집으로 들어가서 html 부분에서 다음과 같은 부분을 찾습니다. 물론 각자의 스킨에 따라서 약간의 차이는 있습니다만 random_tags 라는 부분은 들어있기 때문에 그것으로 찾으시면 됩니다. 

<s_random_tags>윗부분에 

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

를 집어넣어주시면 됩니다. 아래 텍스트 파일에서 잘라서 붙여넣으시면 됩니다.

                                
                                 태그클라우드.txt
                  클릭을 하시면 다운받으실수 있습니다.



이렇게 집어넣으셨으면 기본 설치는 끝나신겁니다.
남은건 각자의 블로그에 맞게 세팅을 하시는것뿐이죠.

설정을 조금 살펴보면

var t = new SWFObject("./images/tagcloud.swf", "tagcloud", "100%", "200", "7", "#ffffff");

이부분에선 직접 올린 swf파일을 불러오는것과 크기와 배경색을 설정하실수 있습니다.


100%는 가로크기 200은 세로크기입니다. 그리고 #ffffff 부분은 배경색입니다. 가로크기와 세로크기는 딱히 손을 댈필요가 없을것같고 배경색만 블로그 배경에 맞게 수정해주시면 됩니다.


(배경색은 보통 css 맨위에 보면 나와있을겁니다.)


t.addVariable("tcolor", "0x222222");

이부분은 태그의 기본색상을 설정하는 부분입니다.
여기서 0x는 나두시고 뒷부분에 원하는 색상코드를 집어넣으면 됩니다.
저에 경우엔 a2a2a2를 집어넣어서 0xa2a2a2 로 수정을 했습니다.

t.addVariable("tcolor2", "0xff0000");

위에는 존재하지 않는것입니다만 중요도, 선호도에 따라 색상을 바꾸고 싶다 하면 추가로 tcolor2를 한줄 집어넣으시면 됩니다. 중요도에 따라 tcolor 과 tcolor2 사이의 색상으로 보여집니다.
또한 hicolor 이란 항목도 있는데요. 태그위에 마우스를 올려놨을때 보여지는 색상을 설정하는 항목입니다.
tcolor2 대신 hicolor을 집어넣으시면 되겠죠.




모든 설정을 마친 제 태그 화면입니다. 참고하시라고 올립니다.
블로그 창이 좁은 관게로 ㅠㅠ 클릭해서 확대 화면으로 보세요




마지막으로 관련색상 번호 테이블을 혹시 궁금할까해서 올립니다.
워드로 작성했으니 보시고 골라서 넣으세요

              클릭을 하시면 다운받으실수 있습니다.




혹시 태크에 관심이 있으시거나 관심있으신분 중 영어 되시는 분이라면 추천해드립니다. 뭐 영어 못하셔서 노력만 하면 볼수있죠 ㅎㅎ
관련 사이트 링크해드립니다. 많이 도움이 되셨길 바래요~


관련 사이트

반응형

+ Recent posts