본문 바로가기

Tech Story

블로그/티스토리에 물고기 플래쉬 넣기

의외로 많은 분들이 제 블로그 (아래의 스폰서링크과 트윗 가운데)에 있는 물고기 플래쉬에 관심이 많다는 것을 알았습니다. 그래서 본 포스팅을 통해서 간단하게 나마, 자신의 티스토리 블로그에 물고기 플래쉬를 넣는 방법에 대해서 다루려고 합니다. 물고기 플래쉬는 개발자의 홈페이지에 공개되어있으며, 또 해당 페이지에서 간단히 설정할 수 있습니다.

1. 물고기 플래쉬 가져오기
 먼저 플래쉬를 블로그에 넣기 위해서 플래쉬 소스가 필요합니다. 플래쉬 소스는 아래의 그림에서와 같이, 물고리 플래쉬 왼쪽 상단에 보면 'AB' (마우스를 올리면 'ABOWMAN'으로 확장)라는 마크가 보입니다. 바로 이곳을 클릭하시면 개발자 홈페이지로 연결이 됩니다.

 개발자 홈페이지 (http://abowman.com/google-modules/fish/)에 들어가시면 아래의 그림과 같은 기본 물고기 플래쉬를 보실 수 있습니다. 그리고, 그림의 아래쪽을 보시면 embed (object 태그) 부분에서 소스코드를 복사 copy하셔서 티스토리의 관리자센터 > 스킨 > HTML/CSS 편집 > skin.html 에서 적당한 위치에 paste하시면 됩니다.

2. 물고리 플래쉬 설정 조정하기
 위의 과정으로 플래쉬를 넣으면 되지만, 기본 화면이 자신의 블로그의 전체 분위기와 맞지 않고, 물고리수라던가 색상이 마음에 들지 않을 것입니다. 그런 분들을 위해서, 위의 개발자 홈페지이 중간부분에 'edit settings'라는 부분이 있습니다. '에딧세팅'를 클릭하시면 아래의 그림과 같이 플래쉬이름, 배경색상, 배경그림, 물고기수, 물고기색상, 그리고 물고기밥 색상 등을 수정하실 수 있습니다. 특히 색상 변경은 색상팔레트가 팝업되기 때문에 마음에 드는 색으로 쉽게 변경이 가능합니다. 그리고, 옵션을 변경시키면, 상단의 플래쉬에 바로 적용이 되어 Preview도 가능합니다.


 이런 기본 설정을 변경하셨으면, 플래쉬의 크기 등도 설정할 수 있습니다. 에딧세팅 바로 밑에 보시면, 'Get & Share'라는 영역이 있는데, 이곳에서 플래쉬의 크기 (높이 & 폭)을 설정하실 수 있습니다. 티스토리에 삽입하기 위해서는 'embed'를 선택하시면 됩니다. 플래쉬 크기가 정해지면, 해당 'Embed code'를 카피하셔서 블로그로 옮기시면 됩니다.

3. 물고기 플래쉬 소스를 티스토리에 넣기
 위의 설정이 모두 끝나고, 소스코드를 복사하셨다면... 티스토리 관리자 센터 > 스킨 > HTML/CSS 편집에서 'skin.html' 부분의 적당한 위치에 소스코드를 삽입하시고 저장하시면 모든 과정이 끝이 납니다. 2의 과정에서 모든 설정을 마치셨더라도, 복사하셨던 object 코드의 값들을 직접 수정하셔도 됩니다. 코드에 다양한 파라메터들이 들어있지만, up_fishColorXX=XXYYZZ라는 부분은 물고기XX번의 RGB 색상을 위한 파라메터이며, width 및 height의 값을 변경해서 블로그에 맞는 너비와 높이를 재설정할 수도 있습니다. 그외의 몇몇 파라메터 및 CSS 코드는 생략.

 이제 남은 문제는 skin.html의 어떤 부분에 코드를 넣을 것인가 입니다. 보통 날개부분에 삽입하기 위해서는 s_sidebar_element 부분을 수정하시면 되고, 저와 같이 본문 하단에 삽입하시기 위해서는 skin.html 파일에서 [ ##_article_rep_desc_## ]를 찾아서 바로 아래쪽에 소스코드를 삽입하시면 됩니다. 그런 후에, 설정을 저장하시면 물고기들이 밥을 기다리고 있습니다.

끝.
===
이렇게 성의없이 대강 적은 글을 보고 바로 적용하셨다면 당신은 아마도 천재?
반응형