< 물결 플래시 > 티스토리 적용법 미루고 미루다 이제야 올립니다.
이 녀석 덕에 자주자주 뿌듯해 하면서도 머리 속에서만 구르고 있는 다른 녀석들에게 우선 순위가 자꾸 밀렸네요.
기존 텍큐 적용법과 크게 다른 점은 없습니다만,
많은 수의 티스토리 유저 분들이 HTML 태그에 경기를 일으키신다는 이야기를 듣고 스샷 좀 찍어봤습니다.
잡설이 길죠?
들어갑니다.


1. 위젯 다운로드 / 압축 해제 / 스크립트 복사


스크립트를 제외하곤 기존 파일과 모두 동일합니다.
티스토리는 주소 바뀔 일이 없어 아예 따로 파일을 떼 놔 넣어버렸습니다.
압축을 해제하면 요렇게 세 파일이 뜹니다.
script.txt 를 열어 코드를 복사해두세요.


기다란 설명들 다 필요없고 요것만 복사하셔도 됩니다.
제목의 정렬을 바꾸시려면 center 를 left/right 로 수정하세요.
색상을 바꾸시려면 0x000000 을 수정하세요. (16진수 RGB 입니다)


2. 티스토리 파일 업로드

티스토리 해당 블로그에 로그인 하시면 뜨는 관리자 페이지입니다.

스킨-HTML/CSS편집 메뉴를 클릭하세요.

요런 창이 뜹니다.
안에 파일 내용은 스킨마다 다를 수 있습니다.
'파일업로드' 버튼을 클릭하세요.


눈에 익은 파일업로드 대화상자가 뜨지요?
아까 압축 풀어놓았던 파일들을 찾아 드래그한 후 열기를 클릭합니다.
잘 뒤져보면 images 폴더에 세개의 파일이 업로드 되었을 거에요. 요렇게



3. 스크립트 수정

다시 HTML/CSS 편집 탭을 클릭하고, Ctrl+F 를 누르면 검색 창이 뜹니다.
검색 창에 article_rep_title 을 입력하고 엔터를 누르면 원래의 타이틀 코드가 뜹니다.

여기서는
요 녀석이로군요.
대부분 저런 비슷한 형태니까 찾기 쉬우실 거에요.

찾으신 부분을 아까 복사해 둔 스크립트로 붙여넣기 합니다.
공개/보호/비밀글 마다 따로 서식을 가지고 있는 스킨인 경우 저 작업을 여러번 반복 하셔야 합니다.
다시 Ctrl+F 하셔서 엔터를 누르다보면 나올테니 모두 수정이 됐는지 확인해보세요.

그리고 쭈욱- 내려가면 밑에 '저장' 버튼이 있습니다.
여기서 이거 안 누르시면 적용 된 게 날아가니 주의하세요.


4. 확인

예쁘게 적용이 되었네요.
적용하시는 스킨에 따라 정렬과 색상을 바꾸시면 더 이쁘겠지요.
원 글(http://minsangk.com/85) 에 댓글 달아주신 분들 블로그를 둘러보시면 멋지게 적용 된 블로그들이 많으니 참고가 되실 듯 합니다.


나름 쉽게 풀어 쓴다고 썼는데, 쉽게 글 쓰는 데는 영 자신 없어 제대로 설명이 됐는지 궁금합니다.
도움이 되시길 바래요 -.-.-


postscirpt : 스샷을 위해 아이디를 빌려 준 병렬군 감사. (사실 허락 없이 썼음 ㅋ)


09년 2월 23일 수정
 - js 파일에 오류가 있어 앰퍼샌드 이스케이프 문자 처리에 문제가 있었습니다. angle bracket 처리가 안 되는 문제 해결했습니다. 피드백 주신 푸름님 감사합니다. 기존 사용자 분들은 edited1 에 들어있는 js 파일만 기존 파일에 덮어 씌우시면 됩니다.

물결 플래시 타이틀 위젯 [ StreamWave Flash Title Widget ]

위에 보고 계신 녀석이 바로 이 녀석입니다.

제 스스로의 만족치를 거뜬히 넘길 만큼 이쁘게 나와 조심스레 텍스트큐브 스킨 게시판에 올렸었는데, 제 스스로의 예상치를 거뜬히 넘길 만큼 많은 분들께서 관심을 가져주셨습니다. 텍스트큐브 스킨게시판의 글에도 많은 댓글이 달렸고, 제 블로그 링크 글에는 무려 100여개가 넘는 많은 댓글이 달렸네요.

단순히 타이틀만 띄우는 형태에서 텍스트 정렬도 바꿀 수 있고, 색도 변경할 수 있게 되었고, (면봉님 감사합니다) 링크도 걸 수 있게 된 것 (푸룬님, bizbook 님 감사합니다) 다른 분이 만드신 소중한 스킨에 포함 되어 더 많은 분들이 사용 하실 수 있게 된 것 (엔하늘 님 감사합니다) 모두 관심 가져주시고 피드백 주신 많은 분들 덕분입니다.

그리고 사용법에 대한 보다 자세한 매뉴얼 포스트 제작해 주신 더티문라 님도 감사드려요

많은 피드백을 받으며 해결하지 못한 부분이 있었는데, 바로 특수문자 (&, +) 의 처리 문제였습니다. 다른 기호는 괜찮은데 & 와 + 문자는 FlashVars 전달 과정에서 구분자로 쓰이는 바람에 그 뒤에 적힌 모든 제목들이 잘렸던 것이지요. 고민고민 끝에 결국 자바스크립트를 이용해 Percent-Encoding 하는 방식으로 해결 했습니다. 그리고 이왕 자바스크립트에 손 댄 김에, 좀 더 많은 분들이 쉽게 적용 하실 수 있도록 넣는 방식을 조금 더 손 보았습니다.



아래는 새롭게 바꾸어 본 적용 방법입니다.
기존 사용자 분들도 & + 처리를 위해 본 방법으로 수정해주시면 감사하겠습니다.

새로운 적용법 (보기)

* 티스토리 적용법 바로가기

* 기타 사항

 - 폰트에 포함되지 않은 『』 이런 녀석들은 전부 [] 로 치환되어 표현 됩니다.
 - 일어나 한자 혹은 그 외의 외국어는 전부 빈 네모로 표현이 됩니다. 그와 같은 문자의 사용이 많으신 분들은 사용이 불가능 할 듯 합니다.
 - scriptAccess 를 링크를 위해 always 로 지정해 두었습니다. 개인적인 보안 이슈로 인해 꺼려지시는 분들은 js 파일을 열어 수정하여 사용하세요. (그냥 사용하셔도 물론 별 문제는 없습니다)


적용 중에 문제가 발생했다거나,
기능 추가가 필요하다고 생각하시는 부분이 있다거나,
꼭 이 녀석이 아니더라도 누군가 만들어 주었으면 하는 아이디어가 있다거나,
플래시 소스가 어떻게 생겼나 궁금하시다거나,
현재 제작 중이신 스킨에 적용하려 하신다거나,
그냥 아무 이유 없이 한마디 해야겠다 싶다거나, (ㅋ)

하신 모든 분들은 댓글 남겨주세요.



09년 2월 23일 수정
 - js 파일에 오류가 있어 앰퍼샌드 이스케이프 문자 처리에 문제가 있었습니다. angle bracket 처리가 안 되는 문제 해결했습니다. 피드백 주신 푸름님 감사합니다. 기존 사용자 분들은 edited1 에 들어있는 js 파일만 기존 파일에 덮어 씌우시면 됩니다.